08-jQuery

一.初识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(): 停止所有动画，并直接变到目标位置