jQuery基础学习(二)
来源:互联网 发布:淘宝如何不显示会员名 编辑:程序博客网 时间:2024/06/06 19:45
jQuery 核心:选取元素
上面我们介绍了jQuery的一些基本知识,现在我们来详细了解一下如何真正上手jQuery。
使用jQuery 选择器选取元素,并封装为jQuery对象
在JS原生DOM中,我们想要对DOM元素进行操作,首先得获取到对应的元素(getElementById()、getElementsByTagName()等),然后再对这些元素进行操作。
同样的,jQuery也需要先选取所需的DOM元素,然后再针对这些元素进行操作。我们先来看看jQuery如何获取所需的元素。
http://www.365mini.com/page/jquery-quickstart.htm$("#uid"); // 选取id属性为"uid"的单个元素$("p"); // 选取所有的p元素$(".test"); // 选择所有带有CSS类名"test"的元素$("[name=books]"); // 选择所有name属性为"books"的元素
和CSS选择器一样,jQuery选择器也支持多个选择器任意组合使用。
// 多个选择器以空格或指定符号隔开,将匹配与前者具有指定关系的最后一个选择器所表示的元素$("#uid span"); // 选择id为"uid"的元素的所有后代span元素$("p > span"); // 选择p元素的所有子代span元素$("div + p"); // 选择div元素后面紧邻的同辈p元素$("div p span"); // 选择div元素的所有后代p元素的后代span元素// 多个选择器之间没有空格,将匹配同时满足这些选择器条件的元素$("p#uid"); // 选择id属性为"uid"的p元素$("div.foo"); // 选择所有带有CSS类名"foo"的div元素$(".foo.bar"); // 选择所有同时带有CSS类名"foo"和"bar"的元素$("input[name=books][id]"); // 选择所有name属性为"books"并且具备id属性的元素
此外,为了更加便于使用,jQuery还定制了特有的选择器:
为了更加便于使用,jQuery还定制了特有的选择器:
// jQuery特有的选择器,当然也可以和其他选择器任意组合使用$(":checkbox"); // 选取所有的checkbox元素$(":text"); // 选取所有type为text的input元素$(":password"); // 选取所有type为password的input元素$(":checked"); // 选取所有选中的radio、checkbox、option元素$(":selected"); // 选取所有选中的option元素$(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素)当我们使用
$("选择器字符串")
匹配到指定的元素后,将返回一个jQuery对象。该对象就包含匹配到的所有DOM元素。如果指定的选择器没有匹配到任何元素,将返回一个空的jQuery对象(不包含任何DOM元素)。将现有的DOM元素封装为jQuery对象
var uid = document.getElementById("uid");var ps = document.getElementsByTagName("p");var unames = document.getElementsByName("uname");var domsArray = [ document.getElementById("uid1"), document.getElementById("uid2") ];// 将以上DOM元素直接转换为jQuery对象$( uid ); $( ps ); $( unames );$( domsArray );$( ); // 不传入任何参数,返回空的jQuery对象(不匹配任何元素)
将HTML字符串封装为jQuery对象
// 你同样可以使用jQuery对象的方法对这些临时的DOM元素进行操作,或者将它们插入到文档的指定位置。$('<span></span>'); // 包含一个临时的span元素$('<span/>'); // 包含一个临时的span元素,和上一行代码的作用相同$('<div id="mydiv"><p class="foo bar">Hello CodePlayer</p></div>'); // 包含一个临时的div元素,其内嵌一个子节点p元素
元素筛选
// 以下方法都返回一个新的jQuery对象,他们包含筛选到的元素$("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)$("ul li").first(); // 选取ul li中匹配的第一个元素$("ul li").last(); // 选取ul li中匹配的最后一个元素$("ul li").slice(1, 4); // 选取第2 ~ 4个元素$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素$("div").find("p"); // 选取所有div元素的所有后代p元素$("div").children(); // 选取所有div元素的所有子代元素$("div").children("p"); // 选取所有div元素的所有子代p元素$("span").parent(); // 选取所有span元素的父元素$("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素$("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素$("#uid").next(); // 选取id为uid的元素之后紧邻的同辈元素
切记混淆jQuery对象和Element对象的方法
jQuery对象和DOM对象是两个对象,如果是jQuery对象就使用jQuery的方法,如果是DOM对象就使用DOM对象的方法Get and Set in One 原则
jQuery提供了简洁的DOM操作API,其方法往往是"读写一体"的。也就是说,某个方法既可用于读取操作,也可用于设置操作。如果没有为其传入表示值的参数,则表示获取操作,将返回获取到的数据;如果为其传入了表示值的参数,则表示设置操作。// 返回一个匹配id为"username"的元素的jQuery对象var uid = $("#username");// 没有传入value参数,返回第一个匹配元素的value属性值var value = uid.val();// 传入了value参数,设置所有匹配元素的value值为"CodePlayer"uid.val("CodePlayer");
Get first Set all 原则
jQuery对象几乎所有的DOM操作方法都遵守"Get first Set all"原则。简而言之,假设当前jQuery对象匹配多个元素,如果使用jQuery对象的方法来获取数据("读"数据),则只会获取第一个匹配元素的数据;如果使用jQuery对象的方法来设置元素数据("写"数据),则会对所有匹配元素都进行设置操作。var $lis = $("ul li"); // 匹配ul元素的所有后代li元素var className = $lis.attr("class"); // 只获取第一个匹配的li元素的class属性$lis.attr("class", "codeplayer"); // 将所有匹配的li元素的class属性设为"codeplayer
链式编程风格
// jQuery的链式编程风格$("div").find("ul").addClass("menu").children().css("margin", 0).hide();// 以下是上述代码的分解描述$("div") // 返回一个匹配所有div元素的jQuery对象.find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象.addClass("menu") // 为这些ul元素添加CSS类名"menu",并返回当前对象本身.children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象.css("margin", 0) // 为这些子代元素设置css样式"margin: 0",并返回当前对象本身.hide(); // 隐藏这些子代元素,并返回当前对象本身
$("#uid").val()
、 $("div").attr("id")
等方法在没有传入值参数时,它们将返回指定DOM元素的特定属性值,它们有特定的返回需求,因此无法进行链式编程。如果是$("#uid").val("CodePlayer")
、 $("div").attr("id", "myId")
等情况,此时它们不需要返回特定的值,将返回当前jQuery本身,因此可用于链式编程。智能DOM操作,静默容错
在JS原生DOM操作中,如果通过getElementById()、getElementsByName()等方式获取不到对应的元素,那么将返回null,在null上访问属性或方法,将会抛出异常。
与此不同的是,jQuery在匹配不到对应元素时将返回一个空的jQuery对象,我们仍然可以调用jQuery对象的方法,而且并不会报错。因为jQuery会智能地处理这种情况。如果该方法用于获取数据,则返回null或undefined;如果该方法用于设置数据,则忽略设置操作,并返回该空对象本身;如果该方法用于筛选元素,则同样返回一个新的jQuery空对象。
jQuery核心:DOM操作
在前面我们学习了如何选取元素,也了解了jQuery进行DOM操作的一些原则。下面,我们就来真正使用jQuery的DOM操作方法了。
1.属性操作
在jQuery中,对DOM元素进行属性操作,主要是通过以下方法实现的:
// selector 表示具体的选择器$("selector").val(); // 获取第一个匹配元素的value值(一般用于表单控件)$("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"$("selector").html(); // 获取第一个匹配元素的innerHTML值$("selector").html("Hello"); // 设置所有匹配元素的innerHTML值为"Hello"$("selector").text(); // 获取第一个匹配元素的innerText值(jQuery已进行兼容处理)$("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"$("selector").attr("class"); // 获取第一个匹配元素class属性$("selector").attr("class", "code"); // 设置所有匹配元素的class属性为"code"$("selector").removeAttr("class"); // 移除所有匹配元素的class属性$("selector").prop("checked"); // 获取第一个匹配元素的checked属性值$("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框)$("selector").removeProp("className"); // 移除所有匹配元素的className属性
对于val()、html()、text()方法,相信大家都能够理解。而attr()和prop()这两个方法,就是通用的属性获取或设置方法,不过attr()
方法针对的是HTML文档节点的属性,prop()
方法针对的是文档节点对应的DOM元素对象的属性。它们之间的详细区别请参考attr()和prop()的区别。此外,它们各有一个对应的属性删除方法:removeAttr()和removeProp()。
jQuery的属性操作方法较多,请直接参考jQuery的属性操作方法一览表。
文档处理
jQuery还提供了众多的文档处理方法。通过这些方法,我们可以轻松地插入、修改、移动、删除指定的DOM元素。
// 以下$A均表示当前jQuery对象,$B可以是选择器字符串、html字符串、DOM元素、jQuery对象$A.before( $B ); // 在$A之前插入$B$A.after( $B ); // 在$A之后插入$B$A.insertBefore( $B ); // 将$A插入到$B之前的位置$A.insertAfter( $B ); // 将$A插入到$B之后的位置$A.append( $B ); // 在$A内部的末尾位置追加$B$A.appendTo( $B ); // 将$A追加到$B内部的末尾位置$A.prepend( $B ); // 在$A内部的开头位置追加$B$A.prependTo( $B ); // 将$A追加到$B内部的开头位置$A.replaceAll( $B ); // 用$A替换$B$A.replaceWidth( $B ); // 用$B替换$A$A.wrap( $B ); // 在$A的外侧包裹$B$A.unwrap( ); // 只移除$A的父元素的标签$A.wrapAll( $B ); // 在整个$A的外侧用单个$B将其包裹起来$A.wrapInner( $B ); // 在$A的内侧包裹$B$A.empty(); // 清空$A的所有内容$A.remove(); // 删除$A及其绑定的事件、附加数据等$A.detach(); // 删除$A,但保留其绑定的事件、附加数据等$A.clone(); // 克隆一个$A
除了*wrap*系列方法以及empty()、clone()方法外,当使用上述插入、追加、替换、删除方法时,如果用于插入/追加/替换/删除的元素是文档中的元素,则这些元素将从原位置上消失。
关于所有文档处理方法的详细信息,请参考jQuery内容操作方法一览表。
CSS操作
几乎所有的CSS操作都可以通过jQuery的css()方法来进行。
$("selector").css("margin-left"); // 获取第一个匹配元素的margin-left的属性值$("selector").css("marginLeft"); // 与上一行代码作用相同,css()支持这两种写法$("selector").css("marginLeft", 15); // 设置所有匹配元素的margin-left为15px(数字的默认单位均为px)$("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // 一次性设置所有匹配元素的多个样式属性$("selector").css( "marginLeft", ""); // 设为空字符串,则表示删除该样式属性
此外,jQuery还提供了直接获取或设置高度、宽度、偏移位置的方法,请参考jQuery CSS操作方法一览表。
动画效果
使用jQuery,我们还可以非常简单地实现动画效果。
$("selector").show(); // 显示隐藏的元素,默认不带过渡动画效果$("selector").show( 400 ); // 显示隐藏的元素,带有400毫秒的过渡动画效果$("selector").show( "fast" ); // 显示隐藏的元素,带有200毫秒的过渡动画效果$("selector").show( "slow" ); // 显示隐藏的元素,带有600毫秒的过渡动画效果$("selector").hide(); // 隐藏显示的元素,其用法与show()相同$("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏,隐藏就显示),其用法与show()类似/* 下面的slide*、fade*系列方法与上面的show()、hide()、toggle()等方法作用相同, * 用法也类似,只是带有不同的动画效果 */$("selector").slideDown(); // 显示隐藏的元素,带有向下滑动的过渡动画效果$("selector").slideUp(); // 隐藏显示的元素,带有向上滑动的过渡动画效果$("selector").slideToggle(); // 切换显示/隐藏的元素,带有向上/下滑动的过渡动画效果$("selector").fadeIn(); // 显示隐藏的元素,带有淡入的过渡动画效果$("selector").fadeOut(); // 隐藏显示的元素,带有淡出的过渡动画效果$("selector").fadeToggle(); // 隐藏显示的元素,带有淡出的过渡动画效果
jQuery核心:事件处理
jQuery核心:Ajax
jQuery还对Ajax进行了封装了,我们可以非常方便地发送一个Ajax请求,并对响应进行处理。
$.ajax({ url: "ajax.php?action=add", type: "post", data: "username=hello&password=123456", // 附加的请求数据,也可以为对象格式 dataType: "json", success: function(data){ // 这是Ajax请求成功后执行的回调函数 // 因为dataType为json,如果服务器返回的是JSON格式数据,jQuery会将其转为对应的JS对象 // 假设data为{ msg: "Ajax请求成功", uid: 2 } alert( data.msg ); }});
$.ajax()是是jQuery中Ajax的底层实现,其它Ajax请求方法都是基于该方法实现的。
// 以GET方式发送Ajax请求$.get("ajax.php", { username: "hello", password: "123456" }, function(data){ // 这是Ajax请求成功后执行的回调函数,就是上面$.ajax中的success选项});// 以POST方式发送Ajax请求$.post("ajax.php", { username: "hello", password: "123456" }, function(data){ // 这是Ajax请求成功后执行的回调函数,就是上面$.ajax中的success选项});
关于jQuery Ajax的更多方法和细节,请参考jQuery的Ajax方法一览表。
jQuery辅助工具方法
jQuery还为我们提供了许多的辅助工具方法,以便于我们进行各种常用的代码逻辑处理。
// 去除字符串两端的空白字符var str1 = $.trim( " abc d " ); // "abc d"var str2 = $.trim( null ); // ""// 判断是否是数组var isArray1 = $.isArray( [] ); // truevar isArray2 = $.isArray( new Array() ); // true// 判断是否是函数var result1 = $.isFunction( function(){} ); // truevar result2 = $.isFunction( new Function() ); // true// 检索数组中是否存在指定值,并返回其第一次出现的索引var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3var index2 = $.inArray( 3, [ 2 ] ); // -1 (不存在返回-1)// 将JSON字符串转为对应的JS对象var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' );var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );
遍历方法
// $.each()用于遍历数组元素或对象属性var array = [ 12, "jQuery", true ];$.each( array, function(i, value){ // i 表示当前迭代元素的索引或对象的属性名称 // value 表示当前迭代的数组元素或对象的属性值 // this 与 value 相同 alert( i + " = " + value ); // 如果函数return false,将终止遍历});// $.map()用于遍历数组元素或对象属性,并将每次执行遍历函数的返回值封装为数组返回var obj = { name: "jQuery", age: 20, isAdmin: true };var resultArray = $.map( obj, function(value, i){ // 注意参数顺序与each()不同 // value 表示当前迭代的数组元素或对象的属性值 // i 表示当前迭代元素的索引或对象的属性名称 // this 指向全局对象(window) if( typeof value === "number"){ return null; // 如果函数返回null或undefined,则不会添加到结果数组中 }else{ return value; }} );// resultArray 为 [ "jQuery", true ]//$.grep()用于遍历数组元素,并根据函数的返回值(true/false)来过滤数组元素var array2 = [ "Hello", 12, "jQuery", true ];var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序与each()不同 // value 表示当前迭代的数组元素 // i 表示当前迭代元素的索引 // this 指向全局对象(window) return i % 2 == 0; // 保留返回值不为false的元素} );// resultArray2 为 [ "Hello", "jQuery" ];
上面的方法全是静态方法。此外,jQuery还有两个同名的实例方法each()和map(),专门用于遍历jQuery对象匹配的所有元素。
// 遍历所有的p元素,并执行对应的函数$("p").each(function(i, element){ // i 表示当前迭代元素的索引 // element 表示当前迭代的DOM元素 // this === element });// 返回包含所有匹配元素value值的数组$(":checkbox:checked").map(function(i, element){ // i 表示当前迭代元素的索引 // element 表示当前迭代的DOM元素 // this === element return this.value; });
jQuery的工具方法较多,详情请参考jQuery的工具属性和方法一览表。
DOM元素和jQuery对象的相互转换
实际上jQuery对象是一个类数组对象。它将匹配的所有DOM元素都依次存储在数字索引形式的属性中,并用length属性存储DOM元素的个数。
var p = $("p"); // 返回一个包含所有p元素的jQuery对象p[0]; // 第1个p元素p[0].id ; // 返回第1个p元素的idp[1]; // 第2个p元素p[2]; // 第3个p元素p.length; // p元素的个数
此外,jQuery还给我们提供了一个get()方法,用于获取对应索引的DOM元素。
var p = $("p"); // 返回一个包含所有p元素的jQuery对象p.get(0); // 第1个p元素p.get(1); // 第2个p元素p.get(2); // 第3个p元素p.get( ); // 不传入任何参数,将以数组形式返回包含的所有p元素
- jQuery基础学习(二)
- jQuery基础学习(二)
- jQuery基础学习(二)
- jquery学习基础(二)
- Jquery的学习(二)基础核心
- jQuery学习笔记(二)基础事件
- jQuery基础学习笔记二
- jquery基础(二)
- jQuery学习(二)---基础语法---事件
- jQuery学习(二)
- jquery学习(二)
- jquery学习(二)
- jquery 学习 (二)
- jQuery 学习(二)
- jQuery学习(二)
- jQuery 学习(二)
- jQuery学习(二)
- jQuery学习(二)
- Glide介绍
- for-in 来遍历字典 while for 循环
- 云服务正在吞噬世界!
- Java编程思想重点笔记(Java开发必看)
- 选择团队成员,最应该看重什么?
- jQuery基础学习(二)
- C语言字符串操作函数
- wireshark解析rtp协议,流媒体中的AMR/H263/H264包的方法
- 操作系统安装方法(简易安装)
- logback日志配置
- 常用設計模式
- [Spring实战系列](1)Eclipse下创建Spring-HelloWorld项目
- 解决jboss-eap-6 (jboss7)JCE cannot authenticate the provider BC 的问题
- 日历