概念
jQuery是一个快速、简洁的javascript库,宗旨为 Write less. Do more
特点
- 轻量级,文件小
- 跨浏览器兼容
- 链式编程、隐式迭代
- 对事件、样式、动画支持,简化了DOM操作
- 支持插件扩展开发
基本使用
入口函数:等着页面DOM加载完毕后再执行js代码
$(document).ready(function () {
$('div').hide()
})
$(function(){
$('div').css('backgroundColor','green')
})
顶级对象
- $是jQuery的别称
- $同时也是jquery顶级对象,相当于原生javascript中的window,把元素用其封装成jQuery对象,就可以调用jquery对象
DOM对象和jQuery对象转换
- DOM对象:原生js获取的对象,可以使用 javasctipr的属性和方法
- jQuery对象,通过jQuery方法获取,只可以使用jQuery方法
DOM对象
var div = document.querySelector('div')
jQuery对象
$('div')
转换
- DOM对象转换成jQuery对象 : $(DOM对象)
- jQuery对象转换成DOM对象
1. $('div‘)[index]
2. $(‘div’).get(index)
选择器
- 子代选择器: $(“div>li”)
- 后代选择器: $("div li ")
隐式迭代
- 定义:遍历内部DOM元素(伪数组形式储存)的过程叫做 隐式迭代
- 理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环操作
筛选选择器
- :first
$(“li:first”) 获取第一个li元素 - :last
$(“li:last”)获取最后一个li元素 - :eq(index)
$(“li:eq(2)”)获取到的li元素中,索引号为2的元素,索引号从0开始
排他思想
$(function(){
$('button').click(function(){
//当前元素背景颜色更改为黄色
$(this).css('background','yellow')
//其他元素背景颜色改为之前的默认
$(this).siblings('button').css('background','')
})
})
同样效果用原生javascript实现
var button = document.querySelectorAll('button')
for(var i =0;i<button.length;i++){
button[i].onclick = function(){
for(var j=0;j<button.length;j++){
button[j].style.backgroundColor = ""
}
this.style.backgroundColor = "red"
}
}
样式操作
- 参数只写属性名,则返回属性值
$(‘div’).css(“width”) - 参数是属性名和属性值,逗号隔开
$(‘div’).css(“height”,“100px”) - 参数是对象形式,设置多组属性,属性名和属性值用冒号,属性之间用逗号
- 操作类样式
添加类 $(“div”).addClass(“current”)
删除类 $(“div”).removeClass(“current”)
切换类 $(“div”).toggleClass(“toggle”),可配合transition动画使用
jQuery动画效果
- 自定义动画 animte
animate(params,[speed],[easing],[fn])
属性操作
- 自有属性 $(“a”).prop(“href”)
- 自定义属性,类似 js中 getAttribute() 与 setAttribute()
attr(“属性”), attr(“属性”,“属性值”)
$(“index”)
$(“index”,“3”)
内容文本值
- 获取元素内容 html()
- 获取元素文本内容 text()
元素操作
- 遍历元素
1.$(“div”).each(function(index,DOMEle){XXX})
$(function(){
$("div").each(function(index,domEle){
console.log("你真棒");
})
})
注意:domEle是一个dom对象,需要转换成dom对象 ,$(jquery对象)
2.$.each(function(index,DOMEle){xxx}),此方法与上面方法功能一样,此方法更侧重处理数据
$.each(function(index,DOMEle){
console.log("计算请用我")
})
创建、添加、删除元素
- 创建元素
var li = $("<li></li>")
- 内部添加元素
1.前面添加
2.后面添加
$("ul").prepend(li)
$("ul").append(li)
- 外部添加元素
var div = $("<div>后妈生的</div>")
$('.test').after(div)
$('.test').before(div)
- 删除、清空元素
$("ul").remove()
$("ul").empty() = $("ul").html('')
事件注册
- element.事件(function(){})$(“div”).click(function(){})
- element.on(“事件”,[selector],function(){})
$("div").on({
mouseOver:function(){
console.log("over执行了")
},
mouseDown:function(){
console.log("down执行了")
}}
)
- on()注册事件的优势:可以绑定多个事件;可以事件委派操作 ;可以给动态创建的元素绑定事件
$("ul li").onclick(function(){
console.log("绑定在li身上的事件触发了");
})
$("ul").on("click","li",function(){
console.log("绑定在ul身上,实际上li触发的事件执行了")
})
事件解绑
- off()
$("div").off()
div身上所有事件都已解绑- one(),事件只可触发一次
自动触发事件
- 元素.事件()
- 元素.trigger(“事件”)
- 元素.triggerHandler(“事件”),不会触发元素的默认事件
事件对象
- element.on(events,[selector],function(event){})
- 阻止默认事件 event.preventDefault()
- 阻止冒泡事件 event.stopPropogation()
$(document).on("click",function(){
console.log("点击了Document");
})
$("div").on("click",function(event){
console.log("点击了div");
event.stopPropagation()
})