1500字范文 > JQuery 基础（1）—— 基本介绍选择器筛选器（选择器的一种）

JQuery 基础（1）—— 基本介绍选择器筛选器（选择器的一种）

时间：2019-04-08 00:25:44

一、JQuery的基本概念

1.JQuery是什么？

jquery是一款javaScript库，能更方便地处理HTML、事件、动画等，可以兼容多浏览器

2.如何选择版本？

JQuery有三个大版本：

v1.X：兼容IE6-8，以及低版本的chrome和火狐浏览器，推荐使用

v2.X：不兼容IE6-8

v3.X：同上，分为精简版和普通版，与V2普通版差不多，更新相应的API，加了相应的性能优化

3.使用CDN

Content Delivery Network 内容分发网络，速度快，节省本地服务器的带宽，下载速度快

4.$

window.jQuery === window.JQuery库对外只暴露了一个jQuery全局变量，JQuery库对外只暴露了一个jQuery全局变量，符号是缩写

JQuery的所有属性、方法都被定义在jQuery这个qu全局变量内

(1)调用属性和方法

$.each() //调用方法也可以写成：jQuery.each()$.noop//调用属性$.toArray() //调用方法

(2)选择器

$('#myDiv') //返回jQuery对象$('.myClass') ....jQuery对象转换为DOM对象$(domObject) //返回jQuery Object$(xxx).get(0) //返回DOM Object$(xxx)[0] //返回DOM Object

(3)什么是jQuery对象

是原生DOM对象封装

jQuery对象和原生DOM对象不同

jQuery对象包含了很多操作DOM元素的方法

(4)链式语法chaining

正常的写法$('#divTest').text('Hello,World!')$('#divTest').removeClass('blue')$('#divTest').addClass('bold')$('#divTest').css('color','red')a.链式写法（推荐）$('#divTest').text('Hello,World!').removeClass('blue').addClass('bold').css('color','red')这样写不用每次都进行dom搜索建议换行写$('#divTest').text('Hello,World!').removeClass('blue').addClass('bold').css('color','red')原理就是没执行完一次方法后会把该原jQuery对象（或者选择过后的jQuery对象）返回回来。b.链式语法使用需要注意破坏性的语法例如$('#divTest2').find('p.child') //find方法就是有破坏性的，会返回一个重新选择后的jQuery对象，目前对象是id为divTest2元素下class为child的<p>元素.css('color','red').addClass('bold')c.我们可以使用end()方法来还原上一次查询的jQuery对象$('#divTest2').find('p.child') .end() //将jQUery还原成 id为divTest2的元素.css('color','red').addClass('bold')d.有些方法不返回jQuery对象，也就无法使用链式语法$('#divTest').get(0) //这是把jQuery对象转化为DOM对象

(5)$(document).ready(function(){…})

等页面的DOM树加载完毕

window.onload事件是等待页面所有的东西（dom树、图片、第三方网站等）都加载完毕才触发

jQuery中的ready只会在dom树加载完毕就执行，不会去等图片或第三方网站iframe框架，也就是说ready执行会比window.onload早执行

建议window.onload和ready不要一起使用，可能会发生ready无效

可以使用$(window).load(function(){...});来代替window.onload=function(){...}效果是一样的，都是等的页面中的dom树，图片，和第三方网站iframe框架都加载完成后才执行方法中的内容

总结

$(document).ready(function(){…}); //dom树加载完毕后就执行方法中的内容

$(window).load(function(){…}); //效果等同于window.onload

$(function(){…})和ready是等价的，也就是简写

二、jQuery选择器 —— 选择的艺术

（一）js中选择元素常用的方法

document.getElementById() //按照ID选择document.getElementsByName() //按照name来选择document.getElementsByTagName() //按照标签的name来选择document.getElementsByClassName() //按照类名来选择最新的方法document.querySelector('.box') //使用的是CSS的选择器的语法，返回第一个匹配的，class为box的节点元素document.querySelectorAll('.box') //返回多个

（二）CSS选择器

—基本选择器

—属性选择器

—伪类选择器

—伪元素选择器

PS：jQuery选择器兼容CSS选择器语法及扩展返回0个、1个或多个jQuery元素集合（类数组对象），集合内元素顺序和在页面上顺序一致

（三）jQuery选择器

1.基本选择器

和css是一样的：

ID选择器类选择器元素选择器后代选择器属性选择器

建议都是使用单引号，单引号中再使用双引号

2.筛选器 / 过滤器

以：开头

将元素进行筛选得出结果

位置筛选器 jquery独有子元素筛选器表单筛选器内容筛选器其他筛选器自定义筛选器

(1)位置筛选器

ps:这里的位置都是从0开始:first //第一个位置:last //最后一个位置:even //偶数位置:odd //奇数位置:eq(n) //等于 n是从0开始:gt(n) //大于:lt(n) //小于

例子

<!DOCTYPE html><html><head><title>jQuery的位置选择器</title><meta charset="utf-8"><style>.hightlight{background-color: yellow;}</style></head><body><ul><li>li-01</li><li>li-02</li><li>li-03</li><li>li-04</li><li>li-05</li><li>li-06</li><li>li-07</li><li>li-08</li></ul><script type="text/javascript" src="./js/jquery-1.12.4.js"></script><script type="text/javascript">$(function(){//$('li:first').addClass('hightlight'); //<li>li-01</li>高亮//$('li:last').addClass('hightlight'); //<li>li-08</li>高亮//$('li:even').addClass('hightlight');//<li>li-01</li><li>li-03</li><li>li-05</li><li>li-07</li>高亮//$('li:odd').addClass('hightlight');//$('li:eq(1)').addClass('hightlight'); //<li>li-02</li>高亮//$('li:gt(1)').addClass('hightlight'); //<li>li-03</li> ~ <li>li-08</li>高亮//$('li:lt(3)').addClass('hightlight'); //<li>li-01</li> ~ <li>li-03</li>高亮})</script></body></html>

(2)表单筛选器

(3)内容筛选器

(4)其他选择器

3.jQuery选择器的性能优化

jquery选择器的性能优化，也可以说是书写规范，同样适用于CSS选择器

尽量适用CSS中有的选择器避免过度约束尽量以ID开头让选择器的右边有更多特征避免使用全局选择器缓存选择器结果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>positionFilter</title></head><body><div><ul id="list" class="list"><li>list-01</li><li class="item2">list-02</li><li>list-03</li><li class="item4">list-04</li><li>list-05</li><li>list-06</li><li>list-07</li><li>list-08</li><li>list-09</li><li>list-10</li></ul></div><script src="//jquery-1.12.4.js"></script><script>function logTime(cb) {console.time('logTime');if (typeof cb === 'function') {for (var i = 0; i < 10000; i++) {cb();}}console.timeEnd('logTime');}$(function() {//1.尽量适用CSS中有的选择器// logTime(function () {// $("ul li:even");// 慢// })// logTime(function () {// $("ul li:nth-child(odd)");// 快// })// logTime(function () {// document.querySelectorAll("ul li:nth-child(odd)"); // best// })// logTime(function () {// $(document.querySelectorAll("ul li:nth-child(odd)")); // 快// })//------------------//2.避免过度约束// logTime(function () {// $('div ul li.item2');// 慢// })// logTime(function () {// $('li.item2');// 快// })//------------------//3. 尽量以ID开头// logTime(function () {// $('.list li.item2'); // 慢// })//// logTime(function () {// $('#list li.item2'); // 快// })//------------------//4.让选择器的右边有更多特征// logTime(function () {// $('ul.list .item2'); // 慢// })//// logTime(function () {// $('.list li.item2'); // 快// })//------------------//5.避免使用全局选择器// logTime(function () {// $('ul'); // 慢// })//// logTime(function () {// $('.list'); // 快// })//------------------//6.缓存选择器结果logTime(function() {// 慢$('#list .item2');$('#list .item4');});logTime(function() {// 快var ul = $('#list');ul.find('.item2');ul.find('.item4');});});</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。