jQuery基础-阿里云开发者社区

开发者社区> 龙神之怒> 正文

jQuery基础

简介: jQuery 简介 jQuery的使用 jQuery的导入 本地导入 网络导入 jQuery 语法 基础语法 jQuery 选择器 jQuery ID选择器 jQuery CLASS选择器 jQuery 元素选择器 jQuery 属性选择器 jQuery C...
+关注继续查看

jQuery 简介

  jQuery 是一个 JavaScript 库。

  jQuery 极大地简化了 JavaScript 编程。

jQuery的使用

jQuery的导入

 要使用jQuery首先要导入jQuery文件导入的方式分两种本地导入和网络导入(其实就上用网上的jQuery库)

本地导入

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

  注意:
   导入文件的这对<script>标签里不能再写jquery代码,不然会出错。

网络导入

  如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
Google 的 CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

使用谷歌或微软的 jQuery,有一个很大的优势

许多用户在访问其他站点时,已经从谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度

jQuery 语法

基础语法

这里写图片描述

$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

jQuery 选择器

jQuery ID选择器

  • $(“#name”) 选取 ID名字为 name的元素。

jQuery CLASS选择器

  • $(“.name”) 选取 class名字为 name的元素。

jQuery 元素选择器

  • $(“p”) 选取 <p> 元素。

  • $(“p.intro”) 选取所有 class=”intro” 的 <p> 元素。

  • $(“p#demo”) 选取所有 id=”demo” 的 <p> 元素。

jQuery 属性选择器

jQuery 使用* XPath 表达式*来选择带有给定属性的元素。

  • $(“[href]”) 选取所有带有 href 属性的元素。

  • $(“[href=’#’]”) 选取所有带有 href 值等于 “#” 的元素。

  • $(“[href!=’#’]”) 选取所有带有 href 值不等于 “#” 的元素。

  • ("[href=’.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素。

  • $(“div#intro .head”) id=”intro” 的 <div> 元素中的所有 class=”head” 的元素

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$(selector).css(“属性”:”值”);

$("p").css("background-color","red");

jQuery查询其他节点

祖先

  • parent()   返回被选元素的直接父元素。

  • parents()   返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

返回所有 元素的所有祖先:

$(document).ready(function(){
  $("span").parents();
});

您也可以使用可选参数来过滤对祖先元素的搜索。

例子返回所有 元素的所有祖先,并且它是

  • 元素:

$(document).ready(function(){
  $("span").parents("ul");
});
  • parentsUntil()   返回介于两个给定元素之间的所有祖先元素。

返回介于

元素之间的所有祖先元素:

$(document).ready(function(){
  $("span").parentsUntil("div");
});

后代

  • children() 返回被选元素的所有直接子元素。

  • find() 返回被选元素的后代元素,一路向下直到最后一个后代。

    • find(“selector”) 返回属于被选元素后代的所有selector 元素
    • find(“*”) 返回被选元素的所有后代

兄弟

  • siblings()   返回被选元素的所有同胞元素。

  • next()     返回被选元素的下一个同胞元素。

  • nextAll()    返回被选元素的所有跟随的同胞元素。

  • nextUntil(“selector”)  返回介于两个给定参数之间的所有跟随的同胞元素

  • prev()     返回的是前面的同胞元素

  • prevAll()   返回被选元素的前面的同胞元素。

  • prevUntil(“selector”)  返回介于两个给定参数之间的所有跟随的同胞元素(向前)

过滤(缩写搜索元素的范围)

  • first()   返回被选元素的首个元素。

  • last()    方法返回被选元素的最后一个元素。

  • eq()    方法返回被选元素中带有指定索引号的元素。
    索引号从 0 开始,因此首个元素的索引号是 0 而不是 1

  • filter()    方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

    • 返回带有类名 “intro” 的所有 <p> 元素:
$(document).ready(function(){
  $("p").filter(".intro");
});
  • not()     方法返回不匹配标准的所有元素。

    • not() 方法与 filter() 相反。
      返回不带有类名 “intro” 的所有 <p> 元素:
$(document).ready(function(){
  $("p").not(".intro");
});

jQuery 事件

  jQuery 事件处理方法是 jQuery 中的核心函数。
  事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

jQuery 事件函数

  jQuery 代码放到 部分的事件处理方法

$("button").click(function() {..some code... } )

单独文件中的函数
  如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。

  和导入jQuery库文件一样。

jQuery 事件

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

jQuery HTML

  jQuery 拥有可操作 HTML 元素和属性的强大方法。

获得内容和属性

jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

  DOM = Document Object Model(文档对象模型)

获得内容 ####

  text()、html() 以及 val()

  • text()   设置或返回所选元素的文本内容

  • html()    设置或返回所选元素的内容(包括 HTML 标记)

  • val()    设置或返回表单字段的值

获取属性

   attr()

  • $(selector).attr( 属性)  方法用于获取属性值

例子:如何获得链接中 href 属性的值:

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

设置内容和属性

设置内容

  • text()   设置或返回所选元素的文本内容

  • html()   设置或返回所选元素的内容(包括 HTML 标记)

  • val()   设置或返回表单字段的值

      text()、html() 以及 val() 的回调函数

      上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。
      回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

例子演示带有回调函数的 text() 和 html():

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

设置属性 - attr()

  jQuery attr() 方法也用于设置/改变属性值

   $(selector).attr( 属性:属性值)

  attr()   方法也允许您同时设置多个属性

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

attr() 的回调函数

  jQuery 方法 attr(),也提供回调函数。
  回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

添加元素

添加新内容的四个 jQuery 方法

  • append()   在被选元素的结尾插入内容

  • prepend()    在被选元素的开头插入内容

  • after()     在被选元素之后插入内容

  • before()    在被选元素之前插入内容

      注意:通过 append() 和 prepend() 方法添加若干新元素

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

删除元素/内容

  • remove()   删除被选元素(及其子元素)

  • empty()    从被选元素中删除子元素

获取并设置 CSS 类

  • addClass()    向被选元素添加一个或多个类
  • removeClass()  从被选元素删除一个或多个类
  • toggleClass()  对被选元素进行添加/删除类的切换操作
  • css()      设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性
语法: css(“propertyname”)

$("p").css("background-color");

设置多个 CSS 属性

css({“propertyname”:”value”,”propertyname”:”value”,…})

  • width()      设置或返回元素的宽度(不包括内边距、边框或外边距)。

  • height()     设置或返回元素的高度(不包括内边距、边框或外边距)。

  • innerWidth()    返回元素的宽度(包括内边距)。

  • innerHeight()    返回元素的高度(包括内边距)。

  • outerWidth()    返回元素的宽度(包括内边距和边框)。

  • outerHeight()    返回元素的高度(包括内边距和边框)。

jQuery 效果

隐藏、显示、切换,滑动,淡入淡出,以及动画

隐藏和显示

  • hide() 隐藏HTML 元素

  • show() 显示 HTML 元素

  • toggle() 切换 hide() 和 show() 方法

    • 显示被隐藏的元素,并隐藏已显示的元素:
    • $(selector).toggle(speed,callback)
    • 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
      可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

淡入淡出

  • fadeIn() 用于淡入已隐藏的元素。

    • 语法:
    • $(selector).fadeIn(speed,callback)
    • 可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
    • 可选的 callback 参数是 fading 完成后所执行的函数名称。
  • fadeOut()   方法用于淡出可见元素。

    • 语法:
    • $(selector).fadeOut(speed,callback)
    • 可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
    • 可选的 callback 参数是 fading 完成后所执行的函数名称。
  • fadeToggle()   方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    • 如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
    • 如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

    • 语法:

    • $(selector).fadeToggle(speed,callback)
    • 可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
    • 可选的 callback 参数是 fading 完成后所执行的函数名称。
  • fadeTo()   方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

    • 语法:
    • $(selector).fadeTo(speed,opacity,callback)
    • 必需的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
    • fadeTo()  方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
    • 可选的 callback 参数是该函数完成后所执行的函数名称。

滑动

  • slideDown() 方法用于向下滑动元素。

    • 语法:
    • $(selector).slideDown(speed,callback)
    • 可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。

    • 可选的 callback 参数是滑动完成后所执行的函数名称。

  • slideUp() 方法用于向上滑动元素。

    • 语法:
    • $(selector).slideUp(speed,callback)
    • 可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。

    • 可选的 callback 参数是滑动完成后所执行的函数名称。

  • slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

    • 如果元素向下滑动,则 slideToggle() 可向上滑动它们。
    • 如果元素向上滑动,则 slideToggle() 可向下滑动它们。

    • 语法:

    • $(selector).slideToggle(speed,callback)
    • 可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。

    • 可选的 callback 参数是滑动完成后所执行的函数名称。

动画

  • animate() 方法用于创建自定义动画。

    • 语法:
    • $(selector).animate({params},speed,callback)
    • 必需的 params 参数定义形成动画的 CSS 属性。

    • 可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。

    • 可选的 callback 参数是动画完成后所执行的函数名称。

animate() - 操作多个属性
请注意,生成动画的过程中可同时使用多个属性:

  • 当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right

animate() - 使用相对值

  • 也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

animate() - 使用预定义的值

  • 您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”:

animate() - 使用队列功能

  • 默认地,jQuery 提供针对动画的队列功能。

  • 这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Cordova应用的JavaScript代码和自定义插件代码的调试
Cordova应用的JavaScript代码和自定义插件代码的调试
5 0
JavaScript实现的水果忍者游戏,支持鼠标操作
JavaScript实现的水果忍者游戏,支持鼠标操作
3 0
npm scripts的生命周期管理
npm scripts的生命周期管理
1 0
零基础入门 Unity 之 UGUI 详解专栏
推荐 UGU专栏 -- Unity 之 UGUI 入门级详解专栏。
4 0
在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
3 0
记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑
记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑
3 0
使用Cordova将您的前端JavaScript应用打包成手机原生应用
使用Cordova将您的前端JavaScript应用打包成手机原生应用
3 0
云服务器ECS使用体验
最近因需要使用云服务器来运行我在学校做的综合课程设计,查来查去发现阿里云具有学生优惠政策可以免费领取使用。太棒了!!!
4 0
HTML5应用 + Cordova = 平台相关的混合应用
HTML5应用 + Cordova = 平台相关的混合应用
3 0
SAP成都研究院安德鲁:自己动手开发一个Chrome Extension
SAP成都研究院安德鲁:自己动手开发一个Chrome Extension
3 0
+关注
龙神之怒
让我们一起努力奋斗吧
95
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载