jQuery伴随前端走过一段辉煌的时光,虽然现在已经慢慢的走下顶峰,但是过去的很多项目都是用jQuery写的,它的一些封装思想也非常值得借鉴,懂得jQuery是前端必不可少的.
jQuery顶级对象
DOM顶级对象是document
BOM的顶级对象是window
而jQuery的顶级对象是$
凡是对象都要用$()包装起来
jQuery调用的习惯是使用点语法和小括号结合的方式.
页面加载事件
$(window).load(function(){
//该方法要等页面内容全部加载完
})
$(document).ready(function(){
//该方法等标签加完,略快一点
})
$(function(){
//等同第二种方式
})
引入jQuery注意事项
- jQuery当前最高版本不兼容IE的低版本
- 在引入开发的时候一般使用普通版本,打包上线的时候使用压缩版本.
DOM对象和jQuery对象互转
注意点:双方不能使用对方的方法
jQuery对象 ===> DOM对象
- $("#id")[0]
- $("#id").get(0)
jQuery实操
选择器
-
标签选择器
$("标签名") -
类选择器
$(".类名") -
ID选择器
$("#ID名") -
类+标签
$("标签名.类名")//交集选择器 -
多条件选择器
$(",")//和css并集一样,可以多个,用','号隔开. -
层次选择器
$("div p")//后代选择器一样 $("div>p")//子代选择器 $("div+p")//获取后面第一个兄弟元素 $("div~p")//获取后面所有的兄弟元素 -
其他
$("ul>li:even")//选择偶数的标签 $("ul>li:odd")//选择奇数的标签 $("ul>li:eq(4)")//选择索引为4的标签 $("ul>li:gt(4)")//选择索引大于4的标签 $("ul>li:lt(4)")//选择索引小于4的标签
常见方法
.text()//相当于innerText.
.val() //如果不写参数,则是获取值,写就是设置值,就是元素的value属性.
.css()//该方法如果只写一个属性,就只写两个参数.如果是多个属性,就用键值对表示.
.siblings()//当前标签的所有兄弟元素
.next()//当前元素的下一个兄弟元素
.nextAll()//当前元素后面的所有兄弟元素
.prev()//当前元素的上一个兄弟元素
.prevAll()//当前元素的前面的所有的兄弟元素
元素样式设置
//通过这种方式来设置样式
$("#ul>li").css("backgroundColor","red")
//设置类样式
.hasClass("类名")//是否有调用该类
.addClass("类名")//不需要加"."
.removeClass("类名")//如果都不写,则移除全部类
.toggleClass("类名")//自动切换,无则调用,有则移除
链式编程
链上的每一次调用必须返回一个对象才能继续后面的调用.
jQuery动画
.hide()//隐藏,第一个参数可以是毫秒,字符串("slow","normal","fast")
.show()//显示,第一个参数可以是毫秒,字符串("slow","normal","fast")
//还可以用arguments.callee作为第二个参数,类似递归的效果.
.slideUp();//上滑
.slideDown()//下滑
.slidetoggle()//自动上下滑动
//这几个可以写参数,也是毫秒
.fadeIn()//淡入
.fadeOut()//淡出
.fadeToggle()//自动切换
//这几个可以写参数,也是毫秒
.fadeTo(毫秒数,透明度)
.animate()//第一个参数键值对修改,第二个参数是时间(毫秒值),第三个参数是回调函数
.top()停止动画效果
jQuery应用
动态创建元素
//1.
$("标签的代码") ==> $("<p>hhh</p>")
//2.
对象.html("标签的代码")
添加元素
对象.append(元素)//$("#d").append($("<p></p>"))把元素添加到元素中
对象.prepend(元素)//把元素插入到当前元素前面
对象.after(元素)//把元素插入到当前元素的后面
对象.before(元素)//把元素添加当前元素的前面
元素.appendTo()//主动添加到元素中
移除内容
$(元素).html("")//清空元素中内容
$(元素).empty()//清空元素中内容
$(元素).remove();//将自身全部移除
克隆元素
$(元素).clone()//复制元素
自定义属性和值
//如果只写了参数,没写参数值,则是认为在获取参数值.
对象.attr("参数一","参数值")
偏离
$().offset(参数)
元素绑定事件
//鼠标进入
$().mouseover()
//鼠标离开
$().mouseout()
//点击事件
$().click()
//绑定事件
$().bind()
//绑定事件,三个参数,绑定的元素,绑定事件,匿名函数
$().delegate()
//绑定事件,三个参数,事件类型,子级元素,事件处理函数
$().on()
//解绑事件,参数为事件类型
$().off()
$().unbind()
触发事件
//1.
$().click();
//2.
$().trigger("事件类型")
//3.
$().triggerHandler("事件类型")