jQ笔记
jQ对象和DOM对象互换
1.DOM->jQ: $(DOM对象)
$('div')
2.jQ对象转换为DOM对象(两种方式):由于[jQ对象是伪数组的形式存储数据的]
(1) $('div')[index],index是0
(2) $('div').get(index) index是索引号
jQ层级层级选择器和css层级选择器是一致的
jQ对象不能使用style,因为它是jQ对象的,不是dom对象
隐式迭代:
jQ内部会把匹配的所有元素内部进行遍历循环,每一个元素都会添加css这个方法
jQ筛选选择器
:first
:last
:eq(index)
:odd
:even
jQ筛选方法
parent() 最近一级的父级
children(selector) 只找最近一级儿子->亲儿子,等价于:ul>li
find(selector) 找全部符合选择器的元素,不写就找全部
siblings(selector) 找兄弟,不包括自身
nextAll() 找之后的所有同辈元素
prevAll() 找之前的所有同辈元素
hasClass(class) 检查当前元素是否含有某个特定的类,如果有,则返回true
eq(index) 相当于$("li:eq(2)"), index从0开始,这个方法更推荐,可以放入变量,不用拼接字符串
jQ排他思想:
使用了隐式迭代实现->siblings(selector) 找兄弟,不包括自身
jQ链式编程
有点像java流式编程,可以一直点
需要注意真正变化的到底是那个,否则容易出错
jQ修改&操作css的方法
$("div").css("width", 300);//跟数字则不用加单位和双引号
$("div").css({
width: 400,
heigth: 400,
backgroundColor: "red"
//如果是符合名字的属性则必须采取驼峰命名法,不是数字则需要加引号
});
jQ修改样式操作类,做到尽量不用操作css文件,直接用jq添加类,非常方便
1.添加类 addClass()
$("div").click(function(){
$(this).addClass("current");
});
2.删除类 removeClass()
...
3.切换类 toggleClass("current") 有则删除,没有则加上
...
补充:
transition: all 0.5s 转换在0.5秒完成
transform: rotate(360deg) 旋转360°
jQ类操作于className区别
原生js中的className会覆盖元素原先里面的类名，jQ只会对指定类进行操作,不影响原先的类名。
jQ效果：封装了很多效果
- 显示隐藏：show() / hide() / toggle() ;
- 划入画出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定义动画：animate() ;
注意：
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。 jQuery为我们提供另一个方法，可以停止动画排队：stop() ;
显示隐藏:show() / hide() / toggle()
1.show([speed,[easing],[fn]])
2.hide([speed,[easing],[fn]])
3.toggle([speed,[easing],[fn]])
speed: slow normal fast 或者毫秒数
easing: 默认swing, 可用 linear
fn:回调函数
一般情况不用,直接隐藏或切换就行
滑动:
slideDown() / slideUp() / slideToggle()
参数与上面三个一摸一样
事件切换:
1.hover 就是鼠标经过和离开的复合写法->查看05.html
动画队列及其停止排队方法
1.动画或效果队列
2.停止排队:停止短时间内重复触发的动画,只执行最后一次 .stop()
淡入淡出效果
fadeIn() / fadeOut() / fadeToggle() / fadeTo() 参数才是和上面的一样...
调整透明度:
fadeTo([[speed],opactity,[easing],[fn]])
opacity 是 0-1之间
自定义动画 animate
animate(params, [speed],[easing],[fn])
1.params: 想要更改的样式属性,以对象形式传递,必须写.属性名可以不带引号
其他与上面一样
案例:王者手风琴案例
jQ属性操作
-
prop(): 获取或设置元素固有属性值,用 prop()
注意: prop()的返回值是 布尔类型
如:<a>里面的href,<input>里面的type *获取: $("a").prop("href"); *设置: $("a").prop("href","www.baidu.com"); 补充: .change([fn])方法:当某个对象发生变化时,则可以调用回调函数 -
attr("属性"): 获取元素的自定义属性 我们通过 attr("属性") //类似原生getAttribute()
设置属性语法: attr("属性","属性值") //似原生setAttribute()还可以获取原H5自定义属性
3.数据缓存 data() 这个里面的数据是存放在元素的内存里面
把元素当作内存一样,存储在浏览器中,但是在html中是找不到的,可以在application中找
这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
jQ全选案例
思路:
-
里面3个小复选框按钮的选中状态跟着全选按钮走
-
checked是复选框的固有属性,则需要prop()方法获取和设置该属性
-
把全选按钮状态赋值给3个小复选框就可以了
-
当我们每次点击小的复选框按钮,就来判断:
-
如果小复选框被选中的个数等于 n(3) 就应该把全选按钮选上,否则全选按钮不选
-
:checked 选择器 :checked查找被选中的表单元素
jQ内容文本值
1.获取/设置->普通元素内容 html() -----> 相当于原生.innerHTML (注意:属性来的)
.html() [获取]内容
.html("内容") [设置]元素的内容
2.获取/设置->普通元素文本内容 text() -----> 相当于原生.innerText
.text() [获取]元素文本内容
.text("文本内容") [设置]元素的文本内容
3.获取/设置->表单的值 val() -----> 相当于原生.value
console.log($("input").val());
$("input").val("123");
jQ案例
购物车,增减商品数量
1.声明一个变量,当点击+号increment,就让这个值++,然后赋值给文本框
2.注:只能增加本商品的数量,就是当前+号的兄弟文本框(itxt)的值
3.修改表单的值是val()方法
4.注:这个变量初始值应该是这个文本框的值,在这个值的基础上++,所以要先获取表单的值再++
5.减号相同,但是不能小于1
细节:
.val()返回值类型是字符串,===是类型都要一样,
要是===就一直是false判断,不会进入if里面执行.
购物车:小计功能
1.每次点击+号或-号,根据文本框的值乘以 当前商品的价格,就是商品的小计
2.只能增加商品的小计,就是当前商品的小计模块(p-sum)
3.修改普通元素的内容是text()方法
4.当前商品的价格,要把￥符号去掉再相乘, 截取字符串substr(1)
4.1.添加内容
5.parents('选择器') 可以返回指定祖先元素 我淦!
6.最后的计算结果可以用 .toFixed(2) 来保留两位小数
7.用户也可以直接修改表单里面的值,同样要计算小计
8.用[最新的表单内的值] 乘以单价即可,但是还是当前商品小计
jQ元素操作
1.遍历元素
$("selector").each()
jQ隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同操作,就需要用到遍历
$("div").each(function(index, domEle){
xxx;
...
});
回调函数中的index是每个元素的索引号,
[domEle是每个DOM元素对象,不是jQ对象,]
所以向要使用jQ方法,需要给这个DOM元素转换为jQ对象: $(domEle)
2.遍历元素 法二, 主要用于遍历数据,和[[处理数据]]
任何对象可以是数组,对象等
$.each(任何对象, function(i, ele){
xxx;
...
});
3.创建元素
$("<li></li>");
动态的创建一个<li>
4.添加元素
内部添加
最后添加 .append()
最前面添加 .prepend()
外部添加:放到目标元素前面&后面
后面添加 element.after("内容")
前面添加 element.before("内容")
内部添加是父子关系
外部添加是兄弟关系
5.删除元素
element.remove()
删除匹配的元素(本身)
element.empty()
删除匹配的元素集合中所有的子杰点
element.html("")
清空匹配的元素内容
jQ案例: 计算总计和金额
1.把所有文本框内的值相加就是总计数量,总额同理
2.文本框内值不同,所以想要相加则用到each遍历,声明一个变量,相加即可
3.点击+-号,都会改变总计和总额的,以上2个操作调用这个函数即可
4.注:
总计是文本框里面的值相加的, 用val();
总额 是普通元素内容,用text();
5.还要注意类型转换
jQ案例: 选中商品添加背景
思路:
1.选中的商品添加背景,不选中移除背景即可
2.全选按钮点击: 如果选中全选,则所有的商品添加背景,否则移除背景
3.小的复选框: 如果是选中状态,则当前商品添加背景,否则移除背景
事件注册
单个事件注册
$("div").click(function(){ 事件处理程序 });
其他事件和原生基本一致
mouseover 鼠标移入、
mouseout 鼠标移出、
blur 失去焦点、
focus 获得焦点、
change 值改变、
keydown 键盘按下、
keyup 键盘回弹、
resize 大小改变、
scroll 滚动条
等
事件处理
jQ使用.on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
事件绑定: 事件处理程序到当前选定的jQuery对象中的元素。on()方法
1.事件原生处理
$("div").click(function () {
$(this).css("background", "pink");
});
2.事件jQ处理 使用.on(),方式多种
每个事件对应不同的函数,则使用这个方式
$("div").on({
mouseenter: function () {
$(this).css("background", "skyblue");
},
click: function () {
$(this).css("background", "purple");
},
mouseleave: function () {
$(this).css("background", "blue");
}
});
3.当触发以下两个(可以或以上)事件的时候,都执行这个回调函数
不同事件,相同函数,可以使用这个方式
$(function () {
$("div").on("mouseenter mouseleave", function () {
$(this).toggleClass("current");
});
});
4.事件委派(委托):把原来加给子元素身上的事件绑定在父元素上,父元素操作子元素,就是把事件委派给父元素
第二个参数一定是它的子元素
$("ul").on("click","li",function(){
alert("hello world!");
});
click是绑定在ul身上的,但是触发的对象是ul里面你的小li
5.on也可以给未来(还没创建)动态创建的元素绑定事件
不使用.on()的话,只能绑定之前加入的li,之后的不会绑定
$("ol li").click(function () {
alert(11);
});
使用.on()可以囊括动态创建的元素
$("ol").on("click", "li", function () {
alert(11);
});
let li = $("<br><li>后来创建的</li>");
$("ol").append(li);
$(function () {
//1.点击发布,动态创建一个小li,放入文本框的内容和删除按钮,并且添加到ul中
$(".btn").on("click", function () {
let li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
});
//2.点击删除按钮可以当前微博的留言,此时使用普通的添加事件,是不能绑定上事件的,需要使用on
//回顾: on只能加在父元素上,来控制子元素, 可以给动态创建的元素绑定事件
/*
on方法的用法:
$("selector").on([event], [element], [fu]);
*/
$("ul").on("click", "a", function () {
//a的父亲是li
$(this).parent().slideUp(function () {
$(this).remove();
});
});
//js函数的特点: 少了参数也没关系,还是可以继续执行
});
事件解绑
$("div").on({
mouseenter: function () {
$(this).css("background","purple");
},
mouseleave: function (){
$(this).css("background","green");
}
},);
$("ul").on("click", "li", function () {
alert(111);
})
//事件解绑 .off()
//1.不传参数则解除所有的事件
//$("div").off();
//2.指定解绑
//$("div").off("click");
//3.解除事件委托
$("ul").off("click", "li");
//4. one()事件只能触发一次
$("p").one("click", function () {
alert(11);
});
