提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
提示：以下是本篇文章正文内容，下面案例可供参考
一、jQuery是什么？
简单来说，jQuery就是一个javascript库。将javascript中的一些功能进行封装。
jQuery 相对 javascript 的优势：
1.jQuery可以写多个入口函数（window.onload）
2.jQuery的api名字容易记忆
3.jQuery代码简洁
4.jQuery帮助我们解决了浏览器兼容性问题
5.jQuery容错性高，前面的代码出了问题，后面的代码不受影响。
js的缺点：
1.不能添加多个入口函数，如果添加了多个，后面的会覆盖前面的。
2.api名字难记。
3.代码比较冗余。
4.js中有些属性或方法有浏览器兼容问题。
5.js容错率较低，前面的代码写错，后面的代码不能执行。
二、如何使用JQuery？
1.引入jQuery文件
之后就可以很简单的引入了,例如：
<script src="../jQuery.js"></script>
2.写一个入口函数
入口函数的作用: 当页面加载完成时，可以形成独立的作用域。
js入口函数与jQuery入口函数的区别：
- js的入口函数不能写多个，jQuery的入口函数可以有多个
- 执行时机不同，jQuery入口函数要快于window.onload. jQuery的入口函数等页面上的dom树加载完，就会执行，而window.onload要等待页面上所有的资源（dom树，图片，外部css/js链接…）加载完成后，才会执行。
四种编写方式： 代码如下（示例）：
<script src="../jQuery.js"></script>
<script>
//方法一（常用）
$(document).ready(function(){
});
//方法二 （常用）
$(function(){
});
//方法三 （不常用）
jQuery(document).ready(function(){
});
//方法四 （不常用）
jQuery(function(){
});
</script>
之后就可在入口函数中写入想要实现的功能。
三、jQuery 底层原理
1.jQuery文件结构
这里简单介绍一下，可以查看自己下载的jQuery文件仔细研究。
- jQuery文件中是一个自执行函数
查看jQuery文件可知：
(function(){
window.jQuery = window.$ = jQuery
})
可以尝试在控制台输出一下，得到的结果为true
<script>
//console.log(window.$)
console.log(window.jQuery == window.$);
</script>
- jQuery自执行文件就是给window对象添加了一个jQuery属性和$属性
引入一个js文件，会执行js文件中的代码，所以引入jQuery文件后，就会执行该文件中的代码，给window对象添加上述两个属性。通过查看jQuery文件，可以知道jQuery和$是等价的,是一个函数。
console.log(Object.prototype.toString.call($));
//结果为[object Function]
关于Object.prototype.toString.call()
关于prototype
- $是一个函数
$函数中传递的参数不同，结果也不同。
- 参数为一个匿名函数： 则变成入口函数
$(function(){
});
- 参数为字符串 - 选择器 / 一个标签（创建该标签）
$("#nav");
$("<div>我是一个div</div>")
- 参数为dom对象，则会把dom对象转换为jQuery对象
四、DOM操作
1.DOM对象与jQuery对象
- Dom对象
通过原生js选择器获取
只能调用dom属性或者方法，不能调用jQuery属性和方法
var div = document.getElementsByTagName("div");
div.css('bacgroundColor','green');
//报错：Uncaught TypeError: div.css is not a function
- jQuery对象
通过jQuery选择器获取
只能调用jQuery的方法和属性，不能调用原生js dom对象的属性和方法
var div = $("#one")
div.style.backgroundColor = 'green';
//报错：Uncaught TypeError: Cannot set property 'backgroundColor' of undefined
jQuery对象是一个伪数组，jQuery对象就是dom的一个包装集
var div = $("#one")
// div.style.backgroundColor = 'green';
console.log(div);
console.log(div._proto_ === Array.prototype);
//判断jQuery对象是否为数组
//_proto_属性(前后各两个下划线)，用来读取或设置当前对象的prototype对象。目前所有浏览器(包括IE11)都部署了这个属性。
输出结果：
- jQuery对象转换成dom对象
- dom对象转换为jQuery对象
2.基本操作
1.新建节点
可直接通过$()来完成
<script>
$(function(){
//创建文本节点
var $li = $('<li>你好</li>')
$('ul').append($li);
//创建元素节点
var $li2 = $('<li></li>')
$('ul').append($li2);
//创建属性节点
var $li3 = $('<li class="set">你好</li>')
$('ul').append($li3);
})
</script>
2.添加节点
- append()
内部添加，将标签作为父元素的最后一个子元素
用法如下：
$('#btnAppend').click(function(){
// 1.新创建一个li标签
//该li标签作为最后一个子元素添加进ul中
var newLi = $("<li>我是新创建的li标签</li>");
$('#ul1').append(newLi);
//2.选择已经存在的li标签
//该li标签将会被剪切，变成ul中最后一个元素
var newLi3 = $('#li3');
$('#ul1').append(newLi3);
// 3.选择另外ul中的li标签
//则将该li剪切，放入ul中，作为最后一个元素
var newLi2 = $('#li2');
$('#ul1').append(newLi2);
})
- appendto()
内部添加，将标签作为元素的最后一个子元素
语法： 添加的元素. appendto( 父元素 )
用法同append
- prepend()
内部添加，将标签作为父元素的第一个元素
用法同append
- after()
外部添加，将标签放在指定元素的后面
//after方法
$('#btnAfter').click(function(){
var $newdiv = $('<div>我是新建的div标签</div>')
$('#ul1').after($newdiv);
})
- before()
外部添加，将标签放在指定元素的前面
用法同after（）
3.删除清空节点
- remove()
移除目标节点
// 移除节点
$('#btnRemove').click(function(){
$('#ul1').remove();
})
- empty()
清空目标节点的内容，目标节点还存在
//清空节点
$('#btnEmpty').click(function(){
$('#ul1').empty();
})
可尝试输入比对一下。
注意：$( 目标节点 ).html ( ) 也可以清空节点内容，但是不能清空内容的事件，可能会造成内存泄漏，所以一般不使用该方法清空内容
4.修改节点
- 克隆节点 clone()
clone( ) 可以复制相应的节点，方法中的参数，true表示复制目标所带的事件，false表示不复制目标的事件
$('#btnClone').click(function(){
var cloneDiv = $('.div1').clone(true);
$('body').append(cloneDiv);
})
- 替换节点 replaceAll() ，replaceWith（）
replaceWith() 和 replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。
两者的不同在于语法格式：
(被替换目标) . replaceWith( 新的目标 )
(新的目标) . replaceAll(被替换目标 )
var $li = $('<li>我是替换的li标签</li>')
// $('#one').replaceWith($li);
// $li.replaceAll($('#one'));
$('#one').replaceWith('<li>我是替换的li标签</li>')
5.其它
属性操作
1.html属性操作
- attr() 和 removeAttr()
console.log($('.div1').attr('class'));
// console.log($('.div1').attr('id'));
$('.div1').attr('class','bc');
//会将原来的class值覆盖掉,所以此时已经没有div1这个类了
// console.log($('.div1').attr('class'));
// 设置多个值使用对象存储，如果设置多个类名不能使用attr()方法
$('div').attr('class','go');
$('div').attr({
'name' : 'box'
})
//删除单个属性
// $('div').removeAttr('class');
//移除多个属性
// $('div').removeAttr('class name')
2.Dom属性操作
- prop() 和 removeProp()
//prop方法 设置获取属性值（该属性值应该不是css样式，因为没有看到html内容有变化）
// $('div').prop('color',"red");
// $('div').prop('width',"400px");
$('div').prop({
'color' : 'red',
'width': '400px'
})
console.log($('div').prop('width'));
//移除prop生成的属性
//$('div').removeProp('color');
//该写法无效，必需带有参数
$('div').removeProp();
console.log($('div').prop('color'));
console.log($('div').prop('width'));
prop() 方法应该用于检索属性值,如需检索 HTML 属性，请使用 attr() 方法代替。
3.类样式操作
- 添加类 addClass
$('#add').click(function(){
alert(1);
//添加一个类
//$('.one').addClass('fontSize');
//添加多个类
$('.one').addClass('fontColor width200')
})
- 移除类 removeClass
$('#remove').click(function(){
//移除所有的类
$('.one').removeClass()
//移除单个/多个类
//$('.one').removeClass('width200');
})
- 切换类 toggleClass
//多次点击可以移除或添加该类
$('#toggle').click(function(){
$('.one').toggleClass('bc')
})
- 判断是否含有某类 hasClass
$('#has').click(function(){
console.log( $('.one').hasClass('fontColor'));
})
4.值操作
- 获取设置文本 text（）
text（）获取文本时，会获取目标中所有的文本内容（不包含标签），包括后代元素
text（）设置内容时，新写的内容会覆盖原来的内容，将标签转换为文本
$(function(){
//获取文本
console.log( $('.div1').text());
//设置文本
$('#setText').click(function(){
$('.div1').text('我是新设置的内容');
$('.div1').text('我是新设置的内容<a>点击</a>');
})
})
- 获取html html()
和text（）类似，但是html（）获取的内容包含标签，设置内容时，内容中的标签会生效
- 获取value值 val（）
通过val() 来获取设置表单元素的属性值
操作简单
console.log( $('#setText').val());
$('#toggle').val('切换类');
6.遍历节点
- each()
遍历对象元素或数组，隐式迭代给同一类元素进行相同的操作，当进行不同的操作时，需要用到遍历
$(this).each(function(index,element)) 遍历每一个对象，index是选择器的索引号，element 是DOM元素对象，不能使用jquery的方法
-
children()
$( ’ ’ ).children() 匹配元素的子代节点，不包括后代节点 -
parent()
匹配元素的父亲节点 -
siblings()
匹配元素的兄弟节点 -
next()
匹配元素的下一个兄弟节点 -
prev()
匹配元素的上一个兄弟节点 -
closest()
$(’ ').closest( selector ) 沿 DOM 树向上遍历，直到找到已应用选择器的第一个匹配为止。 more
7.css-dom操作
- css()
css（样式名）可以获取元素的某个样式
获取多个dom元素的jQuery对象样式，只能获取到第一个元素的样式
css（样式名，样式值 / 对象{ 样式名，样式值 }）设置样式为行内样式，可以给单个或多个元素设置样式
//css（）
//获取某个样式
console.log($('.div1').css('width'));
//设置某个样式
$('.div1').css('backgroundColor','green');
//设置多个样式
$('.div1').css({
height:200,
'width': '250px',
'backgroundColor': 'yellow'
})
//给多个对象设置样式
$('div').css({
'backgroundColor': 'pink'
})
- position()
position（）获取距离有定位的父元素的距离
- offset()
offset()获取元素距离document的距离
- scrollTop() 和 scrollLeft()
scrollTop() 获取元素被卷曲的高度，scrollLeft() 获取元素被卷曲的宽度
//获取某元素的卷曲值
console.log($('.pic').scrollTop() +"和"+$('.pic').scrollLeft());
//获取页面的卷曲值
console.log($(window).scrollLeft()+'和'+$(window).scrollTop());
五、jQuery选择器
jQuery选择器返回值为对象
1.基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| id选择器 | $ ( ’ #id ’ ) | 获取指定的id元素 |
| 类选择器 | $ ( ’ .class ’ ) | 获取指定的一类class元素 |
| 标签选择器 | $ ( ’ div ’ ) | 获取指定的同一类标签元素 |
| 并集选择器 | $ ( ’ div ， p，li ’ ) | 用逗号隔开，只要符合条件之一即可 |
| 交集选择器 | $ ( ’ div . red ’ ) | 获取class为red的div元素 |
和css选择器用法一样
2.层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $ ( ’ ul > li ’ ) | 使用 > ，获取儿子层级的元素，不会获取孙子层级的元素 |
| 后代选择器 | $ ( ’ ul li ’ ) | 使用空格，获取所有的后代元素 |
和css选择器用法一样
3.过滤选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq （index） | $ ( ’ li:eq(2) ’ ).css.(‘color’ , ’ red’) | 获取li元素中，索引号为2的元素，索引号从0开始 |
| :odd | $ ( ’ li:odd ’ ).css.(‘color’ , ’ red’) | 获取li元素中，索引号为奇数的元素，索引号从0开始 |
| :even | $ ( ’ li:even ’ ).css.(‘color’ , ’ red’) | 获取li元素中，索引号为偶数的元素，索引号从0开始 |
比较简单
4.筛选选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| children (selector) | $ ( ’ ul ’ ).children (’ li ') | 相当于$（’ ul-li '），子类选择器 |
| find (selector) | $ ( ’ ul ’ ).find (’ li ') | 相当于$（’ ul-li '），后代选择器 |
| silblings (selector) | $ ( ’ #one ’ ).silblings (’ li ') | 查找兄弟节点，不包括自己 |
| parent () | $ ( ’ #one ’ ).parent( ) | 查找父亲 |
| eq ( index ) | $ ( ’ li ’ ).eq( 2 ) | 相当于$（’ li : eq (2) '）,index从0开始 |
| next () | $ ( ’ li ’ ).next( ) | 查找下一个兄弟 |
| prev () | $ ( ’ li ’ ).prev( ) | 查找上一个兄弟 |
清晰易懂
推荐应用案例：下拉菜单
5.表单筛选器
6.属性选择器
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
