浅谈Jquery
jQuery概述
- jQuery是一个js库，封装了很多方法和函数
- j是JavaScript；Query是查询，意思是查询js，把js中的dom做封装可以快速使用里面的功能
jQuery的基本使用
jQuery的入口函数
基本语法$(‘xxx’).xxx
1
$('div').hide();
页面执行代码的顺序DOM→js，两种方法解决
1
2
3
4
5
6
7
8
9会等待页面DOM加载完之后在执行js
第一种
$(document).reday(function(){
xxx;
})
第二种
$(function(){
xxx;
})
jQuery的顶级对象
- $是jQuery的顶级对象
- 可以代表jQuery 简而言之写的时候两者可以互换
jQuery对象和DOM对象
用原生js获取过来的对象叫做dom对象，dom对象只能使用原生的js方法
1
var jsduixiang = document.querySelector('div');
用jQuery方法获取过来的对象是jQuery对象，本质是通过$把dom元素进行了包装，且也只能使用jQuery方法
1
$('div');
dom对象转换成jQuery对象
1
2
3直接调用
$(dom对象)
$('video')jQuery对象转换成dom对象
1
2
3
4方法1 $(xxx)[index]
原因是他是伪数组
$('video')[0].play()
方法2 $(xxx).get(0).play()
jQuery 常用API
jQuery基础选择器
获取标准 $(‘选择器’) 里面选择器直接写css选择器
1
2
3
4
5
6id选择器 $("#id")
全选择器 $("*")
类选择器 $(".class")
标签选择器 $("div")
并集选择器 $("div,p,li")
交集选择器 $("li.current")
jQuery层级选择器
例子
1
2子代选择器 $("ul>li")
后代选择器 $("ul li")
jQuery设置样式
例子
1
2$('div').css('属性','值')
$('div').css('background','pink')
隐式迭代
- 遍历内部的DOM元素的过程叫做隐式迭代
jQuery筛选选择器
例子
| 语法 | 用法 | 描述 |
| ————— | ——————- | ——————————————————————— |
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取到的li元素中选择引号为2的元素，索引从0开始 |
| :odd | $(‘li:odd’) | 获取到索引号为奇数的元素 |
| :even | $(‘li:even’) | 获取到索引号为偶数的元素 |注意 其中的：first是获取第一个xx元素 而不是yy元素下面第一个xx元素
jQuery筛选方法
例子
| 语法 | 用法 | 说明 |
| ————————— | ——————————————————————————— | ————————————————————————- |
| parent() | $(“li”).parent() | 查找父级 |
| children(selector) | $(“ul”).children(“li”) |相当于$(“ul>li”)最近一级亲儿子 | |
| find(selector) | $(“ul”).find(“li”) |相当于$(“ul li”) 后代选择器 | |
| siblings(selector) | $(“.first”).siblings(“li”) | 查找兄弟节点不包括自己本身 |
| nextAll([expr]) | $(“.first”).nextAll() | 查找当前元素之后的所有同辈元素 |
| prevAll([expr]) | $(“.last”).prevAll() | 查找当前元素之前的所有同辈元素 |
| hasClass(class) | $(“div”).hasClass(“protected”) | 检查当前元素是否有某个特定的类名 如果有则返回true |
| eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”) index从0开始 | |
jQuery排他思想
- 通过隐式迭代的方式省去循环遍历以及循环绑定事件
- 例子
- 案例淘宝服饰精品 点击哪个 哪个显示 其余的不显示
- 代码
链式编程
为了方便写
1
2
3
4
5// 实现功能：点击其中一个按钮，点中的按钮变色，其他不变
// 隐式迭代
// 新增链式编程
$('button').click(function(){ $(this).css('background','pink').siblings().css('background','');
})
jQuery修改css样式方法
参数只写属性名字则返回属性值
1
console.log($("div").css("color"));
参数的值如果是数字可以不用加引号
参数可以是对象形式 采用中括号的方法 方便设置多组样式 使用的时候属性名和属性值要用引号隔开，且属性名可以不用加引号
1
2
3
4
5
6
7
8
9方式一
$("div").css({width:100,height:100,background:"pink"});
方式二
$("div").css({
width:200,
height:500,
backgroundColor:"blue"
注意如果是复合属性参考原生js采用驼峰命名法，而且此时的属性值记得双引号
})
设置类样式
方法作用等同于以前的classList ，可以用来操作类样式，注意里面的参数不要加点
1
2
3
4
5
61.添加类
$(this).addClass("current")
2.移除类
$(this).removeClass("current")
3.切换类
$(this).toggleClass("current")add和remove都是在原先的基础上追加/删除
动画方法
show() hide() toggle()
1
2
3
4
5
6
7
8
9
10
11
12//1.点击缓慢显示
$("button").eq(0).click(function(){
$("div").show(1000);
})
//2.点击缓慢隐藏
$("button").eq(1).click(function(){
$("div").hide(1000);
})
//3.点击缓慢切换
$("button").eq(2).click(function(){
$("div").toggle(1000);
})slideUp() slideDown() slideToggle()
1
2
3
4
5
6
7
8
9
10
11
12//4.上拉
$("button").eq(3).click(function(){
$("div").slideUp(1000);
})
//5.下拉
$("button").eq(4).click(function(){
$("div").slideDown(1000);
})
// 6.切换拉
$("button").eq(5).click(function(){
$("div").slideToggle(1000);
})mouseover鼠标经过 mouseout鼠标离开
事件切换hover(function(){},function(){}) 两个function相当于mouseover和mouseout，如果只写一个函数则鼠标经过和离开都会触发这个函数
淡入淡出效果fadeIn fadeOut fadeToggle
变化到透明度fadeTo 注意写透明度
1
2
3
4
5
6
7
8
9
10
11$(function(){
$("button").eq(0).click(function(){
$("div").fadeIn(1000);
})
$("button").eq(1).click(function(){
$("div").fadeOut(1000);
})
$("button").eq(2).click(function(){
$("div").fadeToggle(1000);
})
})高亮显示案例
1
2
3
4
5
6
7
8$(function gaoliang() {
$(".container div").hover(function(){
$(this).siblings().stop().fadeTo(1000,0.5);
},function(){
$(this).siblings().stop().fadeTo(1000,1);
})
})
动画停止
动画效果一旦触发就会执行 但如果多次触发就会造成多个动画或者效果排队执行
停止排队的方法stop() 需要写在动画或者效果前面 这样的话相当于停止上一次动画 就不会造成资源上的浪费
1
$(this).stop().slideToggle(1000)
animate使用
animate({属性名,属性值},时间)
1
2
3
4
5
6
7
8
9$(function(){
$("button").click(function(){
$("div").animate({
left:500,
top:500,
opacity:.4
},500)
})
})
获取元素属性值
获取元素固有属性prop()
1
2// 获取a的固有属性值
console.log($("a").prop("href"));给元素的固有属性赋值prop(“属性名”,”属性值”)
1
$("a").prop("title","bbb");
获取元素的自定义属性attr()
1
console.log($("div").attr("index"));
给元素的自定义属性赋值(“属性名”,”属性值”)
1
$("div").attr("index",4);
数据缓存data()
1
2
3
4
5
6
7
8
9
10
11
12假设有
<span>111</span>
<div data-index="1">111</div>
$("span").data("bianliang","aaa");
console.log($("span").data("bianliang"));
则打印出aaa
console.log($("div").data("index"));
则打印出1
data()方法可以缓存数据 但dom里面不会显示出来
data()方法可以直接读取h5的属性 并且参数不用写成data- 读出来的变量也是数字型案例全选按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23点击全选按钮 其他三个按钮的状态随之变化
<input type="checkbox" name="" id="" class="selectAll">全选
<input type="checkbox" name="" id="" class="j-check">商品1
<input type="checkbox" name="" id="" class="j-check">商品2
<input type="checkbox" name="" id="" class="j-check" >商品3
<input type="checkbox" name="" id="" class="selectAll">全选
$(function(){
要想获取checked属性 必须伴随着按钮状态的变化
$(".selectAll").change(function(){
利用并集选择器将其他的selectAll也给绑定上
$("j-checked, .selectAll").prop("checked",$(this).prop("checked"));
})
情况2 如果此时除了全选框之外的复选框都被勾上，全选框也应该变化成为勾上
找出页面中所有选择框的数量
var jchecknum = $(".j-check").length;
$(".j-check").change(function(){
if($(".j-check:checked").length == jchecknum){
$(".selectAll").prop("checked",true);
}else{
$(".selectAll").prop("checked",false);
}
})
})
修改元素文本内容
获取设置元素内容html()
1
2
3
4
5
6
7
8
9获取设置元素内容html()
html()方法是直接修改里面的元素内容并且覆盖原先的
console.log($("div").html());
$("div").html("leb猪啊");
$("div").html("<span>aaa</span>");
$("div").html("<span>aaa</span>");
覆盖了 只会输出一个
console.log($("div").html());获取设置元素文本内容text()
1
2
3
4console.log($("div").text());
$("div").text("bbb");
$("div").text("<p>aa</p>");//无法添加标签 只能对文本进行改变
获取设置表单值val()
1
2console.log($("input").val());
$("input").val("leb dsb");案例增减商品数量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31<div>
<button class="jianhao">-</button>
<input type="text" class="count" value="1">
<button class="jiahao">+</button>
</div>
<div>
<button class="jianhao">-</button>
<input type="text" class="count" value="1">
<button class="jiahao">+</but>
</div>
<script>
// 要点 只增加本商品的数量，就是点击加号之后兄弟文本框count的值
$(function(){
$(".jiahao").click(function(){
var countnum = $(this).siblings(".count").val();
console.log(countnum);
countnum++;
$(this).siblings(".count").val(countnum);
})
$(".jianhao").click(function(){
var countnum = $(this).siblings(".count").val();
countnum--;
if(countnum<1){
countnum=1;
}
$(this).siblings(".count").val(countnum);
})
})
</script>案例修改商品小计
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54<div>
<ul class="singalprice">
<li>单价:</li>
<li>2.13</li>
</ul>
<button class="jianhao">-</button>
<input type="text" class="count" value="1">
<button class="jiahao">+</button>
<ul class="totalprice">
<li>总价:</li>
<li>2.13</li>
</ul>
</div>
<div>
<ul class="singalprice">
<li>单价:</li>
<li>22.1</li>
</ul>
<button class="jianhao">-</button>
<input type="text" class="count" value="1">
<button class="jiahao">+</button>
<ul class="totalprice">
<li>总价:</li>
<li>22.1</li>
</ul>
</div>
<script>
// 要点 只增加本商品的数量，就是点击加号之后兄弟文本框count的值
$(function(){
$(".jiahao").click(function(){
var countnum = $(this).siblings(".count").val();
var sprice = $(this).siblings(".singalprice").find("li").eq(1).text();
countnum++;
sprice *= countnum;
console.log(sprice);
$(this).siblings(".count").val(countnum);
$(this).siblings(".totalprice").find("li").eq(1).text(sprice);
})
$(".jianhao").click(function(){
var countnum = $(this).siblings(".count").val();
var sprice = $(this).siblings(".singalprice").find("li").eq(1).text();
countnum--;
if(countnum<1){
countnum=1;
}
sprice *= countnum;
$(this).siblings(".count").val(countnum);
$(this).siblings(".totalprice").find("li").eq(1).text(sprice);
})
})
</script>
祖先选择器
$(“xxx”).parents(“.zuxian”) 返回指定祖先
1
2
3
4
5
6
7
8
9
10
11
12<div class="one">
<div class="two">
<div class="three">
<div class="four">
</div>
</div>
</div>
</div>
<script>
console.log($(".four").parents(".one"));
</script>
保留小数
toFix(位数)
1
233.336.toFixed(2);
answer = 33.34
遍历元素
each(index,dom)
1
2
3
4
5
6$(function(){
var arr = ["red","green","blue"];
$("div").each(function(i,dom){
$(dom).css("color",arr[i]);
})
})each()遍历数组，遍历对象
1
2
3
4
5
6
7
8
9
10
11
12
13// each遍历数组
$.each(arr,function(i,ele){
console.log(i);
console.log(ele);
})
// each遍历对象
$.each({
name:"leb",
sex:"female",
hobbies:"balabababababa"
},function(i,ele){
console.log(i+":"+ele);
})
添加和删除元素
添加元素 两种方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14在节点内部添加
var li = $(<li>aa</li>);
在节点内部的前面添加
$("ul").prepend(li);
在节点内部的后面添加
$("ul").append(li);
在节点外部添加
var div = $("<div>我是div</div>");
在节点外部的前面添加
$("ul").before(div);
在节点外部的后面添加
$("ul").after(div);删除元素的三种方法
1
2
3remove() 自杀法
empty() 杀掉除了自己之外的
html("") 同上
获取元素大小i
width() 和 height()
1
2可以直接获取
也可以在里面输入数字设置 不用带单位innerWidth() innerHeight() 获取除自身之外的padding
outerWidth() outerHeight() 获取除了自身之外的border
outerWidth(true) outerHeight(true) 获取除自身之外的 padding margin border
参数为空返回数字型 参数为数字修改相应值
元素位置
offset() 获取设置距离文档的位置
1
2console.log($(".son").offset());
console.log($(".son").offset().top);设置偏移量
1
2
3
4$(".son").offset({
top:200,
left:200
});获取距离带有定位父级位置的偏移 position 如果没有定位则以文档为准，且该方法只能获取 不能改变
1
console.log($(".son").position());
被卷去的头部
页面滚动事件
1
2
3$(window).scroll(function(){
})被卷去的头部与被卷去的左侧
1
2
3scrollTop();
scrollLeft();
可以直接设置数字 那么在页面打开的时候就会直接滑动到指定的位置设置一个小功能 当页面移动到某个位置时候显示返回顶部的盒子
1
2
3
4
5
6
7
8
9
10
11
12$(function(){
var boxTop = $(".container").offset().top;
$(window).scroll(function(){
console.log($(document).scrollTop());
if($(document).scrollTop()>=boxTop){
//此时container已经在最顶部
$(".back").fadeIn();
}else{
$(".back").fadeOut();
}
})
})注意 window是整个滚动事件的对象 而scrollTop的对象是document
再做个点击返回顶部的功能
1
2
3$(".back").click(function(){
// $(document).scrollTop(0);
//这样可以实现回到顶部的功能但是没有动画效果于是想到使用animate做动画 但animate是针对==元素==进行操作的方法，所以对象不是document而是body和html
1
2
3$("body,html").stop().animate({
scrollTop:0
})
on绑定事件
利用on绑定多个事件 其输入格式为
1
2
3
4$(".example").on({
mouseenter:function(){ $(this).css("background","blue");
}
})相反的触发方式执行同一函数的方法
1
2
3
4$(".example").on("mouseenter mouseleave",function(){
xxx
})
注意两个事件之间加空格
on事件委派
on还可以实现事件委派：给父元素绑定一个事件，在操作其某个子元素时生效 且this指代的是委托的子元素
1
2
3
4
5
6语法格式是$("父元素").on("事件类型","子元素",function(){
xxx;
})
$("ul").on("click","li",function(){
alert(111);
})
- 与此同时 on委派的事件还可以对动态生成的元素进行操作
off解绑事件
解除某个元素上面的触发事件
1
$("元素").off("click")
解除事件委托
1
2
3
4$("ul").on("click","li",function(){
alert("xxx");
})
$("ul").off("click","li");
one只触发一次事件
和on差不多 但只触发一次
1
2
3$("li").one("click",function(){
alert("xxxxxxx");
})
自动触发事件trigger
自动触发事件的前提是事件有绑定
方式一 元素.事件 会触发元素的默认行为
1
$("div").click()
方式二 元素.trigger(“触发事件”) 会触发元素的默认行为
1
$("div").trigger("click");
方式三 元素.triggerHandler(“触发事件”) 不会触发元素的默认行为
1
$("div").triggerHandler("click")
事件对象
事件触发就会有事件对象
1
2
3
4$("div").on("click",function(event){
console.log(event);
})阻止事件冒泡 stopPropagation()
1
2
3
4
5
6
7
8
9
10$(document).on("click",function(){
cl("点击了xxx");
})
$("div").on("click",function(event){
cl("点击了div");
event.stopPropagation();
})
此时只会cl “点击了div”
而不会cl 点击了xxx
因为阻止了事件冒泡
对象拷贝
浅拷贝 $.extend(“目标对象”,”拷贝对象”)
1
2
3
4
5
6
7
8var obj1 = {
id:0
};
var obj2 = {
id:1,
name:"andy"
};
$.extend(obj1,obj2);浅拷贝会将原来对象里面的复杂数据类型地址拷贝给目标对象
所以如果修改了目标对象的属性 原来对象中的属性也会随之修改
深拷贝$.extend(true,”目标对象”,”拷贝对象”)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17var obj1 = {
id:0,
msg: {
sex:"男"
}
};
var obj2 = {
id:1,
name:"andy",
msg: {
age: 18
}
};
$.extend(true,obj1,obj2);
obj1.msg.age = 20;
console.log(obj2);
console.log(obj1);深拷贝会将原来对象的属性完全拷贝一份给目标对象
但如果目标对象中有不冲突的属性 则会合并该属性
多库共存
因为$符号有时候会导致冲突 所以jquery提供一种方法
1
2
3
4
5将所有的$符号替换成 jQuery
eg
jQuery(function(){
})第二种方法 jquery释放对$的控制权 让用户自己决定
1
var xx = $.noConflict();
jQuery插件
- ex
