jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。
Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。
animate.js(JQurey.js)是我们自己封装的库，而jQuery是别人帮我们封装好的库。
我们应该学习jQuery的什么东西?
目前这个阶段，主要学习如何来使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能方法，这些方法叫做API（Application Programming Interface应用程序编程接口）。
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
DOM对象指的是：使用js操作DOM返回的结果。
var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象
jQuery对象指的是：使用jQuery提供的操作DOM的方法返回的结果。
jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。
（联想：手机和有手机壳的手机，手机就好比是DOM对象，有手机壳的手机就好比是jQuery对象）
jQuery 对象 和 Dom对象的相互转换
坑自己遇见的jQuery的大坑,遇见两次了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--IE浏览器最高渲染-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--为了确保适当的绘制和缩放-->
<title>Title</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<button id="n1">提交</button>
<script src="../jquery-3.2.1.min.js"></script> ####不要在第一个scrip里写内容应该另起一个scrip的标签
<script>
console.log(123);
$("#n1").click(function () {
alert(1236);
console.log("aaaa");})
</script>
</body>
</html>
选择器:
基本选择器
id选择器：$("#id")
标签选择器： $("tagName")
class选择器： $(".className")
所有元素选择器： $("*")
组合选择器： $("#id, .className, tagName")
层级选择器
$("x y"); // x的所有后代y（子子孙孙,不管他在第几层）
$("x > y"); // 儿子选择器 x的所有儿子y（儿子）注意如果你要加染色的话y的儿子也会被加上
基本筛选器
$('li:first ') // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素 英文equal的缩写
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素 英文greater than 的缩写;
:lt(index) // 匹配所有小于给定索引值的元素 英文less than 的缩写;
:not(元素选择器) // 移除所有满足not条件的标签
:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
举例子:
$("div:has(h1)") // 找到所有后代中有h1标签的div标签
$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)") // 找到所有不包含c1 class的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
筛选器方法
1. 下一个（同级的标签/弟弟标签）
- next()
- nextAll()
- nextUntil(“终止条件”) (不包含终止条件)
2. 上一个（同级的标签/姐姐标签）
- prev()
- prevAll()
- prevUntil(“终止条件”) (不包含终止条件)
3. 父标签系列
- parent()
样式操作:
样式属性操作
.css() : 设置或获取样式属性的值
1.设置样式属性.
a 设置单个样式属性.
$(selector).css(“color”, “red”); 注意属性和属性值之间用逗号(,)隔开
b. 设置多个样式属性.
语法: jQuery选择器.css({"key1":"value" , "key2':'value2')
$(selector).css({“color”: “red”, “font-size”: “30px”}); 注意:花括号里面各属性之间用逗号连接
2获取样式属性值操作：
$(selector).css(“font-size”);
类操作方法
添加类样式: jQuery选择器.addClass('classname')
$(selector).addClass(“liItem”);
删除类样式: jQuery选择器.removeClass('classname') 为指定标签移除类
$(selector).removeClass(“liItem”);
$(selector).removeClass(); 注意:如果不指定参数，表示移除被选中元素的所有类
判断有没有类样式: jQuery选择器.hasClass('classname')
$(selector).hasClass(“liItem”); 如果存在返回True ,否则False
切换类样式: jQuery选择器.toggle('classname') 为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
$(selector).toggleClass(“liItem”);
注意:
1. 如果样式 少用jQuery 操作样式.
2.如果样式多,用css来操作样式
属性操作的方法
1.设置属性
$(selector).attr(“title”, “中国”);
2.获取属性值
$(selector).attr(“title”);
3. 移除属性
$(selector).removeAttr(“title”);
prop() 方法设置或返回被选元素的属性和值。 推荐用于获取和设置checkbox和radio的值, 通常用来影响DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
$("input[value='2']").prop("checked") 结果为True
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
$("input[value='2']").prop("checked",false)
提示：如需检索 HTML 属性，请使用 attr() 方法代替。
提示：如需移除属性，请使用 removeProp() 方法。
- 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
<a href="http://www.baidu.com" target="_self" class="btn">百度</a> 这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。
处理这些属性时，
建议使用prop方法。 <a href="#" id="link1" action="delete">删除</a> 这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。
处理这些属性时，建议使用attr方法。
使用prop方法取值和设置属性值时，都会返回undefined值。 像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。 $("#chk1").prop("checked") == false $("#chk2").prop("checked") == true 如果上面使用attr方法，则会出现： $("#chk1").attr("checked") == undefined $("#chk2").attr("checked") == "checked"
val() 设置或返回表单元素的值
适用范围: input标签
select 标签
textarea 标签
// 获取匹配元素的值，只匹配第一个元素 返回第一个匹配元素的 value 属性的值。 $(selector).val(); // 设置所有匹配到的元素的值 $(selector).val(“具体值”);
.html()、.text()以及.val()的区别?
.html()：用为读取和修改元素的HTML标签及内容； 读取返回的是字符串类型 ,设置是返回的jQuery对象 .text()：用来读取或修改元素的纯文本内容； 读取返回的是字符串类型,设置是返回的jQuery对象 .val()：用来读取或修改表单元素value属性的值。读取返回的是字符串或数组,设置是返回的jQuery对象 .html() .text() .val()三种方法都是用来读取选定元素的内容；只不过.html()用来读取元素的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容（包括其后代元素），
.val()用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上，而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()
，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。 .html(htmlString) .text(textString) .val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，都将会替换所有选中元素的内容。
坐标操作:
offset ()获取或设置相对当前窗口的偏移 {top: xx, left: xxx}
$(selector).offset({left:100, top: 150});
注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative(相对于原来自己的位置移动)
position() 返回匹配元素相对于已经定位父元素的位置（偏移）
// 获取，返回值为对象：{left:num, top:num}
$(selector).position();
注意：只能获取，不能设置。
scrollTop()
作用：获取或者设置元素垂直方向滚动的位置
// 无参数表示获取偏移
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);
尺寸位置操作
height(): ：设置或获取匹配元素的高度值
//带参数表示设置高度 $(selector).height(200); //不带参数获取高度 注意这个是content的高度 $(selector).height();
width() ：宽度操作 设置或获取匹配元素的宽度值
//带参数表示设置宽度
//不带参数获取宽度
$(selector).width(200);
innerHeight() :设置或获取匹配content +padding的高度值
outerHeight() :设置或获取匹配content +padding+border的高度值
文本操作
html():方法返回或设置被选元素的内容 ( 相当于inner HTML)。如果该方法未设置参数，则返回被选元素的当前内容。
当使用该方法返回一个值时，它会返回第一个匹配元素的内容。
当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。
text():方法设置或返回被选元素的文本内容。(相当于innerText).
当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。
当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。
//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）
$(selector).text();
//设置操作带参数，参数表示要设置的文本内容
// 如果设置的内容包含html标签（<span>我要动态创建span，这时候行吗？</span>），那么text这个方法会把他们当作文本内容输出，而不会创建元素。
这个text()和html()方的主要区别
$(selector).text(“我是内容”);
节点操作
创建标签:
1.$()的另外一个作用是动态创建标签
var $spanNode = $(“<span>我是一个span元素</span>”); 这样就创建了一个span标签,然后我把需要把这个标签放到文档里
2.用原生DOM来创建标签,然后再转换为jQuery对象
var pEle=document.createElement('p'); $(pEle).text('我是p标签');
添加标签
标签内部添加:
append (); 在被选元素内部的最后一个元素后面增加元素或函数, 注意这个并不是同级添加元素
node. appendTo(node2): 把node添加到node2中最后一个元素的后面, 这个不能添加函数
<body>
<div class="div1">
<div class="div2">我是div1里最后一个元素</div>
</div>
<script src="../jquery-3.2.1.min.js"></script>
<script>
var $spanNode=$('<span>我是span标签</span>');
$('.div1').append($spanNode)
</script>
注意:如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。
prepend() :在被选元素内部的第一个元素前面增加元素或函数, 注意这个并不是同级添加元素
node1.prependTo(node2): 把node1添加到node1内部第一个元素前面, 这个不能增加函数
同级标签添加
after() :在被选元素之后，作为兄弟元素插入内容或节点
before: 在被选元素之前，作为兄弟元素插入内容或节点
清空元素
empty():清空指定元素的所有子元素（光杆司令）
// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function() {});
// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});
$(selector).empty();
remove(): “自杀” 把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();
.html(''): 清空指定元素的所有子元素（光杆司令）推荐使用这种方法来清空标签
$(selector).html('');
克隆元素:
clone(): 复制$(selector)所匹配到的元素或处理程序
//当无参数时 默认为false,这时候不复制事件处理程序也就是如果前面的程序绑定事件了,复制的这个不会绑定事件
$(selector).clone();
//当参数为true, 这时候会复制事件处理程序,也就是如果前面的程序绑定事件了,复制的这个会绑定事件
$(selector).clone(true);
替换元素
A.replaceWith(B) --> B替换A
A.replaceAll(B) --> A替换所有的B
事件
事件冒泡
首先我们先认识一下事件冒泡:
事件冒泡: 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
原理：利用事件冒泡--> 父标签捕获事件->处理事件
事件冒泡作用:
1.事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
2.让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。
语法: $("已经存在的标签").on("事件", "选择器", function(){...}
$('已经存在的父标签'').on('click','作用在父标签内部的哪个子标签上',function(){
})
常用事件
click(function(){...}) 单击事件
hover(function(){...}) 鼠标移到上面的事件
blur(function(){...}) 失去焦点事件
focus(function(){...}) 获得焦点事件
change(function(){...}) 改变条件事件
keyup(function(){...}) 键松开事件
keydown(function(){...}) 键按下去事件
keypress(function(){...}) 按下和抬起事件
事件绑定
.on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function() {});
// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});
解除绑定:
off解绑on方式绑定的事件（重点）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );
阻止后续事件执行
return false : 常见阻止表单提交等 准确来说干了3件事，阻止默认行为，取消事件冒泡，以及停止回调执行立即返回。(这个不能乱用以后再说)
script>
var a=[11,22,33,44,55];
$.each(a,function (i,v) {
console.log(i,v);
if (v===33){
return false
}
})
</script>
结果:
0 11
1 22
2 33
jQuery方法
each()
each()函数有两种用法:
1.$.each(): 描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组. 主要是用来循环对象和数组,用来获取其中的数据的.
典型事例;
li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//i是索引，v是每次循环的具体标签。 })
结果:
010 120 230 340
2.$(" ").each() : 用来迭代JQuery对象中的每一个DOM元素,遍历JQuery集合中的元素被称为隐式迭代的过程,简单的说是用来循环符合条件的标签然后给标签添加事件
// 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); });
注意在遍历中可以使用return False 提前结束each循环
data()
data() :用于在当前jQuery对象所匹配的所有元素上存取数据注意这里可以存任意类型的数据。
通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。
该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用removeData()函数。
其实是这样的，当我们执行例如这样的语句时 $("#id").data("test"); (简化后的过程)
第一步: jQuery 会获取到 $("#id") 元素，对吧、
第二步: 执行到 data方法 的时候，他会通过 attributes 取我们要的对应值。
第三步: 返回结果给我们，然后 jQuery 把值缓存到内部对象里
第一次取的时候，我们可以得到的 undefined，字符串，数字或者解析后的json。
那有人会说这个和 attr 有什么区别呢？
当我们第二次执行 $("#id").data("test"); 的时候：
第一步: jQuery 会获取到 $("#id") 元素，和上面一样。
第二步: 执行到 data方法 的时候，从 jQuery 的缓存中取值
第三步: 返回结果给我们
发现第二步不同了，对吧，为什么不是从 attributes 取值，而是从缓存中取呢？
缓存其实是js的对象，简单说就类似 var cache = {}; jQuery 在第一次取值之后就会保存到这个缓存对象中，这样我们再次操作的时候就非常快了、
往往性能的损耗都是在 dom 操作上，所以避免重复操作 dom 是非常必要的。
到这，也能看出他和 attr 最大的区别了，比如 <div id="id" data-test="hehe"></div>
$("#id").data("test", "123"); 执行后依然是 data-test="hehe"
$("#id").attr("data-test", "123"); 执行后会是 data-test="123"
那么我们要给一个元素赋值值，或者对象的时候他们有什么区别呢？比如 <div id="id" data-test="hehe"></div>
$("#id").data("test", {str: "hehe"}); 会把 {str: "hehe"} 赋值给 缓存，元素节点上依然是 data-test="hehe"
$("#id").attr("data-test", {str: "hehe"}); 执行后会是 data-test="[object Object]"
这个应该也有不少人遇到，至少群里有不少人问过这个问题。
转载至 https://www.cnblogs.com/52cik/p/jquery-data.html.
例子:在一个div上存取数据
HTML代码: <div></div> jQuery代码 $("div").data("blah"); // undefined $("div").data("blah", "hello"); // blah设置为hello $("div").data("blah"); // hello
$("div").data(); //{blah: "hello"} 把key,value 全部取出来
例子:在一个div上存取名/值对数据
HTML代码: <div></div>
jQuery 代码:
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;例子:存jQuery 对象
var $body=$('body'); 把一个jQuery对象存到一个jQuery变量中,
$('#i1').data('body',$body); 然后把jQuery对象临时存到id=i1的标签中
$('#i1').data('body').html(); 为了证明我们存的是兑现,我们用对象的html方法
结果
" <div id="i1"></div> <script src="../jquery-3.2.1.min.js"></script> <script> </script> "
JQuery入口函数
jQuery的入口函数，是在文档加载完成后，再来执行入口函数里的代码,来达到操作Dom的目的。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
注意绑定事件的时候必须使用入口函数
$(document).ready(function () {
//获取按钮,并且绑定到单击事件
$('#id1').on('click',function () {
alert('我爱中国')
})
})
jQuery扩展插件
为方便扩展插件为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。 我们主要学习jQuery.extend()
jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法.
基本样式
写在javscript 的中的代码 文件名叫extend1
$.extend({
jianchao:function () {
console.log('我喜欢你, 我来自extend1');
},
liyan:function () {
console.log('我不喜欢你 我来自extend1');
}
});
那么在HTML中我们可以这样调用他们
写在HTML 的中的代码
<script src="../jquery-3.2.1.min.js"></script>
<script src="extend1.js"></script>
<script>
//调用我自己的方法
$.jianchao();
$.liyan();
</script>假如我们在extend1中定义一个函数f()
我们新建一个JavaScript的文件extend2中也定义一个函数如下图所示:
extend1 插件中的代码
$.extend({ jianchao:function () { console.log('我喜欢你, 我来自extend1'); f() }, liyan:function () { console.log('我不喜欢你 我来自extend1'); f() } }); function f() { console.log('我是来自extend 中的f函数') }
exten2 插件中的代码
$.extend({ jianchao2:function () { console.log('我喜欢你 我来自extend2'); f() }, liyan2:function () { console.log('我不喜欢你 我来自extend2'); f() } }); function f() { console.log('我是来自extend2 中的f函数') }
然后我们调用下HTML文件,会发生这种情况:
你会发现HTML并没有用extend1中的f()函数,而是用的是extend2中的f函数
当两个插件中有相同的变量时,后来的变量把前边的变量给覆盖了, f()函数是全局变量函数了,
如何解决这个问题.?
把f函数的作用域变为局部作用域,这样就不会发生覆盖了. 把他们都放在一个匿名函数内就可以了
可以这样写?
extend1 插件中的代码
//把它放在一个匿名函数中 var f1=function () { $.extend({ jianchao:function () { console.log('我喜欢你, 我来自extend1'); f() }, liyan:function () { console.log('我不喜欢你 我来自extend1'); f() } }); function f() { console.log('我是来自extend 中的f函数') } } ; //别忘了调用函数 f1();
extend2 插件中的代码
//把它放在一个匿名函数中 var f2=function () { $.extend({ jianchao2:function () { console.log('我喜欢你 我来自extend2'); f() }, liyan2:function () { console.log('我不喜欢你 我来自extend2'); f() } }); function f() { console.log('我是来自extend2 中的f函数') } }; //别忘了调用函数 f2();
调用HTML后的效果为:
结果可以了,
但是我们还可以优化一下,把他放在一个一个自动执行的函数中,这样效率更高些
extend2 插件中的代码
//把它放在自动执行函数中 //把这个jQuery插线中的所有变量都封装在一个自动执行的函数中,这样就不会污染全局作用域 (function ($) { $.extend({ jianchao:function () { console.log('我喜欢你, 我来自extend1'); f() }, liyan:function () { console.log('我不喜欢你 我来自extend1'); f() } }); function f() { console.log('我是来自extend 中的f函数') } })(jQuery);//这个jQuery参数的作用是为了防止某些人把$符号设置为一个全局变量,我们把$符号变成一个动态参数,然后把jQuery穿进去
extend1 插件中的代码
//把它放在自动执行函数中 (function ($) { $.extend({ jianchao2:function () { console.log('我喜欢你 我来自extend2'); f() }, liyan2:function () { console.log('我不喜欢你 我来自extend2'); f() } }); function f(){ console.log('我是来自extend2 中的f函数') } })(jQuery);
浙公网安备 33010602011771号