1. jQuery介绍 1.1 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 1.2 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。 它的宗旨就是:“Write less, do more.“ 1.3 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 1.4 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。 1.5 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 1.6 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 1.7 Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 1.8 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。 1.9 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。 2. jQuery内容: 2.1 选择器 2.2 筛选器 2.3 样式操作 2.4 文本操作 2.5 属性操作 2.6 文档处理 2.7 事件 2.8 动画效果 2.9 插件 3.0 each、data、Ajax 3. DOM对象和jQuery对象转换: 3.1 DOM对象和jQuery对象他们都有各自的方法,他们的方法不能互用,所以需要转换。 3.2 注意声明jQuery对象时,前面要加$。 3.3 DOM对象转换成jQuery对象: $(DOM对象),这是一个Object对象 3.4 jQuery对象转换成DOM对象: jQuery对象[0],这个一个具体的标签 3.5下面测试可以发现: $(DOM对象) 这个DOM对象指的是通过ById、ByClassName、ByTagName找到的DOM对象。 简单理解就是DOM对象套一个$就可以转换为jQuery对象。 jQuery对象[0] 可获取一个具体的标签,它可以是含有id、class的标签。 简单理解就是jQuery对象加一个[0]就可以转换为DOM对象。 <div id="d1">d1d1</div> <div id="d2">d2d2</div> <div class="c1">c1c1</div> <div class="c2">c2c2</div> ById: var d1Ele = document.getElementById('d1'); //DOM对象:d1Ele d1Ele; //<div id="d1"> 这个一个具体的标签 $(d1Ele); //Object [ div#d1 ] DOM对象转换成jQuery对象 var $d2Ele = $('#d2'); //jQuery对象:$d2Ele $d2Ele; //Object [ div#d2 ] $d2Ele[0]; //<div id="d2"> jQuery对象转换成DOM对象,这个一个具体的标签 ByClassName: var c1Ele = document.getElementsByClassName('c1'); //DOM对象:d1Ele 或ByTagName: c1Ele; //HTMLCollection [ div.c1 ] c1Ele[0]; //<div class="c1"> 这个一个具体的标签 $(c1Ele); //Object [ div.c1 ] $(c1Ele[0]); //Object [ div.c1 ] 注意:$(c1Ele)和$(c1Ele[0])结果都一样,都是jQuery对象。 var $c2Ele = $('.c2'); $c2Ele; //Object { 0: div.c2, length: 1, prevObject: Object(1) } $c2Ele[0]; //<div class="c2"> jQuery对象转换成DOM对象,这个一个具体的标签 4. 选择器: 查找标签 4.1 基本选择器 id选择器: $('#id') 例:$('#d1') class选择器: $('.className') 例:$('.c1') 标签选择器: $('tagName') 例:$('div') 配合使用: $('div.c1') 找到类名是c1的div标签 所有元素选择器: $("*") 组合选择器: $('#id,.className,tagName') 例:$('#id,.c1,div') 注意逗号分隔 4.2 层级选择器 $("x y");// x的所有后代y(子子孙孙) $("x > y");// x的所有儿子y(儿子) 例如:$('#d1>a'); $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y 4.3 属性选择器 <input type="text" name="用户名"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']"); // 找到checkbox类型的input标签,注意外层是双引号,内层是单引号 $("input[type!='text']"); // 找到类型不是text的input标签 $("input[name='用户名']"); 5. 筛选器:索引都是从0开始 5.1 基本筛选器: :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素 :odd // 匹配所有索引值为奇数的元素 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素,注意这个l是L的小写 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 示例: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> $('ul li:first'); //Object { 0: li, length: 1, prevObject: Object(1) } $('ul li:eq(2)'); $('ul li:gt(2)'); //也就是找到索引为3和4的标签 $('ul li:not(.c1)'); //找到后代中所有不包含c1类的li标签 $('ul li:not(:has(a))') //找到后代中所有不包含a标签的li标签 $("div:has(h1)") //找到后代中有h1标签的div标签 $("div:has(.c1)") //找到后代中有c1样式类的div标签 5.2 表单筛选器: :text :password :file :radio :checkbox :submit :reset :button :enabled //可用的 :disabled //不可用 :checked :selected $(":checkbox") // 找到所有包含checkbox的标签 $("input:checkbox") // 找到所有包含checkbox的标签,这两种写法是同一个意思。 示例1:找到可用的input标签: <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 示例2:找到默认的(被选中的)option: <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有默认的option 5.3 筛选器方法: 使用 对象.方法() 找到的元素也是一个对象,是对象就可以使用jQuery的方法,例如$('#id').next().siblings('.c1'); 注意:如果()可填写,那么它可填写的是id、class、tagname、其他表达式。 下一个元素: $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") 上一个元素: $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") 父亲元素: $("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。 儿子和兄弟元素: $("#id").children();// 儿子们,跟$('#d1>*');效果一样。具体某个儿子:$("#id").children('#d1')或$("#id").children('.c1'); $("#id").siblings();// 兄弟们。具体某个兄弟:$("#id").siblings('#d1')或$("#id").siblings('.c1'); 查找 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 $("div").find("p") 等价于$("div p") 筛选:用逗号分隔多个表达式。 $("div").filter(".c1") // 从结果集中过滤出有c1样式类的,等价于 $("div.c1") 补充:跟上面的基本筛选器的效果一样 .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
day77-jQuery-选择器和筛选器
猜你喜欢
转载自www.cnblogs.com/python-daxiong/p/12454434.html
今日推荐
周排行