jQuery基础学习笔记

jQuery是一个JavaScript库

1.基础

顶级对象$

$(function() {
    //语句
})
//等同于
jQuery(function() {
    //语句
})

$也相当于原生js中的window

jQuery对象和DOM对象

DOM对象是原生js获取的对象

//如
var div = document.querySelector('div'); //div就是DOM对象

jQuery对象

$('div'); //就是一个jQuery对象

jQuery对象是对DOM对象包装后的对象，利用伪数组进行存储

• jQuery对象的属性方法和DOM对象的属性方法不能混用

• jQuery对象和DOM对象可以相互转换

DOM对象转换为jQuery对象

$(DOM对象)

jQuery对象转换为DOM对象

$('div')[index]
//或
$('div').get(index)
//index为索引号

2.jQuery常用的API

选择器

基础选择器

$("选择器") //为CSS的选择器

名称	用法
ID选择器	$(“#id”)
全选选择器	$(‘*’)
类选择器	$(“.class”)
标签选择器	$(“div”)
并集选择器	$(“div, p”)
交集选择器	$(“li.current”)

层级选择器

名称	用法
子代选择器	$(“ul>li”)
后代选择器	$(“ul li”)

筛选选择器

语法	用法	描述
:first	$(“li.first”)	选取第一个元素
:last	$(“li:last”)	选取最后一个元素
:eq(index)	$(“li:eq(5)”)	选取索引号为5的元素（从0开始）
:odd	$(“li:odd”)	选取索引号为奇数的元素
:even	$(“li:even”)	选取索引号为偶数的元素

隐式迭代

遍历内部DOM元素的过程

也就是不需要进行for循环遍历

筛选方法

语法	用法	描述
parent()	$(“li”).parent()	查找父级，返回最近的父元素
parents()/parents(selector)	$(“li”).parents()	查找所有的父级
children(selector)	$(“ul”).children(“li”)	查找最近的子元素，相当于ul>li
find(selector)	$(“ul”).find(“li”)	相当于ul li
siblings(selector)	$(“.first”).siblings(“li”)	查找兄弟节点，不包含自己
nextAll([expr])	$(“.first”).nextAll()	查找当前元素之后的所有同辈元素
prevAll([expr])	$(“.last”).prevAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	检查当前元素是否含有某个类名，若有返回true
eq(index)	$(“li”).eq(2)	相当于上面选择器的eq

排他思想

例：

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
    //选取了所有按钮
	$("button").click(function() {
        //当前的元素更改颜色
        $(this).css("background", "deepskyblue");
        //其他元素去掉颜色
        $(this).siblings("button").css("background", "");
    })
</script>

链式编程

简化代码

如上排他思想代码可以改为：

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
    //选取了所有按钮
	$("button").click(function() {
        $(this).css("background", "deepskyblue").sibling().css("background", 		 "");
    })
</script>

样式操作

CSS方法

• 只写属性名，则返回属性值

$(this).css("color");
//console.log()之后返回的是值

• 修改样式

$(this).css("color", "deepskyblue");
//如果后面的值是数字，可以不加单位和引号

• 修改多个样式

$(this).css({
    "color": "deepskyblue",
    "width": "100px"
})
//属性也可以不加引号
//例
$(this).css({
    color: "deepskyblue",
    width: 100
    height: 100
})
//遵循驼峰命名法

设置类样式方法

• 添加样式

单独写一个样式，再用addClass添加上去

//例
$("div").addClass("current")

• 删除样式

//例
$("div").removeClass("current")

• 切换样式

添加样式和删除样式的切换

//例
$("div").toggleClass("current")

*与原生JS的className的区别就是jQuery的方法不会覆盖掉原先的类名

动画效果

显示隐藏切换

show([speed], [easing], [fn])

• 三个参数可以省略
• speed：“slow” / “normal” / “fast” 或者 毫秒数
• easing：切换效果 默认"swing" 慢快慢 或者 “linear” 匀速
• fn：回调函数

hide([speed], [easing], [fn])

参数用法与show()相同

toggle([speed], [easing], [fn])

参数用法与show()相同

滑动

slideDown([speed], [easing], [fn])

slideUp([speed], [easing], [fn])

slideToggle([speed], [easing], [fn])

事件切换

hover([over, ]out)
//over相当于鼠标经过 out相当于鼠标离开
//例
$("div").hover(function() {
    //鼠标经过事件
}, function() {
    //鼠标离开事件
})

//如果只写一个函数，则鼠标经过和离开都会触发这个函数
$("div").hover(function() {
    //语句
})

*当动画被多次触发，则会形成队列，直到都执行完位置

可以在动画前面加stop()来停止

淡入淡出

fadeIn([speed], [easing], [fn])

fadeOut([speed], [easing], [fn])

fadeToggle([speed], [easing], [fn])

• 还可以修改透明度

fadeTo(speed, opacity, [easing], [fn])

opacity表示透明度，必写的参数，取值0-1

speed也必须写

//例
$("div").fadeTo(1000, 0.5)
//表示用1秒钟把div的透明度改成0.5

自定义动画

animate(params, [speed], [easing], [fn])

params：需要更改的样式属性，以对象形式传递，可加不写引号，驼峰命名法

//例
$("div").animate({
    left: 500;
})
//表示div向右移动500px

属性操作

获取固有属性

prop("属性名") //获取属性值

设置固有属性值

prop("属性名", "属性值")

获取自定义属性

attr("属性名")

设置自定义属性值

attr("属性名", "属性值")

数据缓存

data("属性名", "属性值")

在指定的元素上存取数据，并不会修改DOM元素结构，页面刷新后就会消失

*此方法获取的H5自定义属性（如data-index），返回是数字型，而且属性名不需要加data-

内容文本值

html()

相当于innerHTML

html() //获取元素的内容
html("内容") //更改元素的内容

val()

获取表单的值

val()

元素操作

遍历元素

$(selector).each()

$("div").each(function(index, domEle) {
    //语句
})
//index是索引号
//domEle是DOM元素对象

<!--例-->
<div>1</div>
<div>2</div>
<div>3</div>
<script>
	var arr = ["red", "green", "blue"]
    $("div").each(function(index, domEle) {
        $(domEle).css("color", arr[index]) //把DOM元素转化为jQuery元素后修改为不同的颜色
    })
</script>

$.each()

$.each(obj, function(index, ele) {
    //语句
})
//主要用来处理数据，比如遍历数组 对象

创建元素

//例
var li = $("<li>1</li>")

添加元素

内部添加

如ul，就是添加到ul的内部

ele.append("内容")
//例
var li = $("<li>1</li>")
$("ul").append(li)

把元素添加到内部的最后面

ele.prepend("内容")

把元素添加到内部的最前面

外部添加

添加到元素的外部

ele.after("内容")

把元素添加到最后面

ele.before("内容")

把元素添加到最前面

删除元素

ele.remove()

删除元素本身

ele.empty()

删除元素的所有子节点

ele.html("")

清空匹配的元素内容

尺寸、位置操作

宽高

ele.width() / ele.height()
//修改不带单位
ele.width(500)

包含padding的宽高

ele.innerWidth() / ele.innerHeight()

包含padding border的宽高

ele.outerWidth() / ele.outerHeight()

包含padding border margin的宽高

ele.outerWidth(true) / ele.outerHeight(true)

对于文档的偏移

offset() //返回的是一个对象，里面有left值和top值
//获取left或top
offset().left
offset().top
//修改方法
$("div").offset({
    top: 200,
    left: 200
})

对于带有定位的父级的偏移

position() //此方法只能获取 不能设置

被卷去的头部和左侧

scrollTop() / scrollLeft
//例
$(window).scroll(function() {
    console.log($(document).scrollTop())
})

事件

绑定事件

ele.on(事件, [选择器], fn)

事件可以是一个或多个

选择器是绑定事件子元素的选择器

fn为回调函数

//例
$("div").on({
    click: function() {
        
    }, 
    mouseover: function() {
        
    }
})
//若绑定的多个事件代码相同
$("div").on("mouseenter mouseleave", function() {
    
})

*若只想触发一次事件，可以用one()，用法与上述相同

事件委派

把原来给子元素的事件绑定在父元素上

//例
$("ul").on("click", "li", function() {
    
})
//事件委派实际上的作用为提高效率

*on事件绑定还可以给动态添加的元素绑定事件，如上案例，给ul动态创建了li后，添加的li也具有click事件

事件解绑

解绑所有绑定事件

//例
$("div").off()

解绑单个绑定事件

//例
$("div").off("click")

解绑事件委托

//例
$("ul").off("click", "li")

自动触发事件

//例
$("div").on("click", function() {
    //语句
})
//1.
$("div").click()
//2.
$("div").trigger("click")
//3.
$("div").triggerHandler("click")
//第三种不会触发元素的默认行为 如input的focus事件的光标闪烁

事件对象

$("div").on("click", function(e) {
    console.log(e)
})

其他方法

对象拷贝

$.extend([deep], target, object, [objectN])

deep为深浅拷贝 true深false浅

target为拷贝的目标对象

object为被拷贝的对象

浅拷贝会把被拷贝的对象里的复杂数据（如对象）的地址拷贝给目标对象，相当于多个对象中的复杂数据是同一个，所以修改目标对象的对应复杂数据值，被拷贝的对象的值也会改变，会覆盖原来的数据

深拷贝则为完全克隆，直接把复杂数据拷贝给目标对象，不会覆盖原来的数据

多库共存

若其他库也用$，则会出现冲突的情况

解决：

• 把$换成jQuery

• var otherName = $.noConflict()