Web | jQuery快速上手

jQuery伴随前端走过一段辉煌的时光,虽然现在已经慢慢的走下顶峰,但是过去的很多项目都是用jQuery写的,它的一些封装思想也非常值得借鉴,懂得jQuery是前端必不可少的.

jQuery顶级对象

DOM顶级对象是document

BOM的顶级对象是window

而jQuery的顶级对象是$

凡是对象都要用$()包装起来

jQuery调用的习惯是使用点语法和小括号结合的方式.

页面加载事件

$(window).load(function(){
    //该方法要等页面内容全部加载完
})
$(document).ready(function(){
    //该方法等标签加完,略快一点
})
$(function(){
    //等同第二种方式
})

引入jQuery注意事项

1. jQuery当前最高版本不兼容IE的低版本
2. 在引入开发的时候一般使用普通版本,打包上线的时候使用压缩版本.

DOM对象和jQuery对象互转

注意点:双方不能使用对方的方法

jQuery对象 ===> DOM对象

1. $("#id")[0]
2. $("#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("事件类型")