一.初识jQuery
1.js事件会覆盖.jq事件不会覆盖
2.$(document).ready()简化为$()
3.jq可以省略循环操作
4.jq和原生DOM不能混用
5.html() ==> innerHTML
6.val() ==> value
6.index() 元素在兄弟中的下标
index(“li”) 元素在li元素兄弟中的下标
二.jQuery与原生DOM互转
1.原生DOM转jq对象
var div1 = document.getElementById("div1")
var $div1 = $(div1)
2.jq对象转原生DOM
第一种
var $div1 = $("#div1")
var div = $div1[0]
第二种
var div = $div1.get(0)
三.基本选择器
#id
.class
标签
*
群组
四.层级选择器
1.后代选择器
$("#box input").css("background", "pink")
$("#box").find("input").css("background", "red")
2.子元素选择器
$("#box > input").css("background", "green")
$("#box").children("input").css("background", "red")
3.同级的后面一个指定节点
$("#box + input").css("background", "pink")
$("#box").next("input").css("background", "red")
4.同级的后面所有指定节点
$("#box ~ input").css("background", "pink")
$("#box").nextAll("input").css("background", "red")
5.所有指定的同级节点
$("#box").siblings().css("background", "pink") //所有兄弟节点
$("#box").siblings("input").css("background", "pink") //指定兄弟节点
6.JQ支持链式操作
五.伪类选择器
1:first: 匹配所有li中的第一个li
$("ul li:first").css("background", "pink")
$("ul li").first().css("background", "red")
2:last : 匹配所有li中的最后一个li
$("ul li:last").css("background", "pink")
$("ul li").last().css("background", "red")
3:eq(index) : 匹配第index个
$("ul li:eq(1)").css("background", "blue")
$("ul li").eq(1).css("background", "green")
$("ul li").eq(-2).css("background", "green") //倒数第2个
4:odd : 匹配所有下标为奇数的li
$("ul li:odd").css("background", "pink")
5:even : 匹配所有下标为偶数的li
$("ul li:even").css("background", "green")
6:not() : 除了指定的元素以外
$("ul li:not('.three,#six')").css("background", "green")
$("ul li").not('.three,#six').css("background", "blue")
7:gt(index) : 下标大于index的li
$("ul li:gt(2)").css("background", "pink")
8:lt(index) : 下标小于index的li
$("ul li:lt(2)").css("background", "red")
六.属性操作
attr() : 获取/添加属性/修改属性
removeAttr() : 移除属性
prop(): 一般用在下面三种属性
checked: 是否选中, true表示选中,false表示未选中
disabled: 是否禁用, true表示禁用, false表示未禁用
selected: 是否选择, true表示选择, false表示未选择
$(“input”).prop(“checked”, false) 给值表示设置
addClass(): 添加类
removeClass() : 移除类
toggleClass(): 切换类,没有就添加,有就删除
html() ==>innerHTML
text() ==>innerText
val() ==>value
七.筛选
eq(index) : 第index个节点
first() :第1个节点
last() :最后1个节点
closest(): 从元素本身开始,逐级向父级查找,返回最近符合条件的节点,只找一个
find() : 查找后代节点,可以找多个,子代和子孙代都会被找到
children():所有儿子节点,只对子代有效,孙子代不会被找到
next(): 下一个兄弟
nextAll(): 后面所有兄弟
prev(): 前一个兄弟
prevAll():前面所有兄弟
siblings() : 兄弟节点
parent() : 父元素
parents() : 所有父节点
length: 属性,表示节点的数量
八.DOM操作
1.创建元素节点
var div1 = $("<div><b>你好</b> 王者荣耀</div>")
2.添加节点
append() 父元素后面添加子节点
appendTo() 将子节点添加到父节点后面
prepend() 父元素前面添加子节点
prependTo() 将子节点添加到父节点前面
after() : 同级的后面添加
insertAfter()
before() : 同级的前面添加
insertBefore()
3.删除节点
remove()
4.清空所有子节点
empty()
九.css操作
1.获取css样式属性值
$("div").css("width")
2.设置css样式
$("div").css("background", "pink")
$("div").css({background:"pink", width:200})
$("div").css("opacity", 0.3) //opacity:透明度, 0~1, 1表示不透明, 0表示完全透明
3.相对于页面内容的偏移: offset()
offset().left, offset().top
4.相对于父级定位参照物的偏移: position()
5.滚动偏移量:scrollTop()
6.
width() : 宽度
innerWidth() : 宽度+padding
outerWidth() : 宽度+padding+border
outerWidth(true) : 宽度+padding+border+margin
十.事件
鼠标事件: click, dblclick, mousedown, mouseup,mousemove, mouseenter, mouseleave
键盘事件: keydown, keyup, keypress
HTML事件: focus, blur, change, select, scroll, resize, submit, reset
event对象
e.pageX
e.clientX
e.screenX
e.offsetX
e.button //0表示左键,1表示轮滚, 2表示右键
阻止事件冒泡
e.stopPropagation()
阻止浏览器默认行为
e.preventDefault()
十一.绑定事件
JS中的事件监听器: JQ中的事件是使用JS事件监听器来封装, 这种方式添加的事件不会覆盖
addEventListener() / attachEvent() : 添加事件
removeEventListener() / detachEvent() : 移除事件
绑定事件 $("#box").click()
绑定多个事件 $("#box").bind("mouseenter mouseleave", function(e){})
移除事件
unbind() : 移除事件
$("#box").unbind() //移除所有事件
$("#box").unbind("mouseenter") //移除一个事件
$("#box").unbind("mouseenter mouseleave") //移除多个事件
trigger() : 主动触发事件
triggerHandler() : 主动触发事件, 不会触发浏览器默认行为
one() : 一次性事件
$("#box").one("click", function(){})
on() : 绑定事件
$("#box").on("click", function(){})
绑定多个事件
$("#box").on({
"mouseenter":function(){
console.log("移入")
},
"mouseleave":function(){
console.log("移出")
}
})
off() : 解除事件
$("#box").off() //移除所有事件
$("#box").off("mouseenter") //移除一个事件
$("#box").off("mouseenter mouseleave") //移除多个事件
十二.事件委托
这种添加事件的方式没有事件委托:会导致添加事件之后创建的节点不会触发该事件
$("input").click(function(){
console.log("点击了按钮")
})
事件委托: 把事件交给父元素添加(把事件委托给父元素添加)
$("#box2").on("click", "input", function(){
console.log("点击box2")
})
后创建节点input
点击box添加input按钮节点
$("#box").click(function(){
$('<input type="button" value="按钮" />').appendTo("#box2")
})
十三.效果
show() : 显示元素
$("div").show()
$("div").show("fast") //fast,normal,slow
$("div").show(5000) //动画时长,单位:毫秒
$("div").show(2000, function(){ //回调函数
console.log("动画完成")
})
hide() : 隐藏元素
toggle() : 切换显示或隐藏
slideDown() : 通过高度的变化(高度变大)来显示元素
slideUp() : 通过高度变化(高度减小)来隐藏元素
slideToggle()
fadeIn() : 通过改变透明度来淡入显示元素
fadeOut() : 通过改变透明度来淡出隐藏元素
十四.动画
改变多个属性
$("#box").animate({left:200, top:300})
动画时间和完成回调函数
$("#box").animate({left:200, top:300, width:200, height:300, opacity:0.3}, 4000, function(){
console.log("动画完成")
})
多个动画链式操作需要排队
$("#box").animate({left:200}, 1000) .animate({top:300}, 1000)
stop(): 停止动画,停止当前正在执行的动画
stop(true) : 停止所有动画
finish(): 停止所有动画,并直接变到目标位置
网友评论