前端-jQuery

内容概要

• 前端类库之jQuery
• jQuery查找标签
• jQuery操作节点
• jQuery绑定 时间
• jQuery知识补充

内容详细

jQuery简介

宗旨:Write less, do more.
内部封装了js代码 使编程更加简单并且兼容所有的主流浏览器
版本:1.x 2.x 3.x # 可以使用3.x最新版
第三方类库:使用它需要提前导入 # 很容易遗忘
    
    
jQuery下载
	压缩之后的版本将很多变量名全部使用英文字母代替了
本地导入
	缺点:在于需要提前下载文件
    优点:在于不会收到网络的影响
CDN导入
	# CDN:内容分发网络
    网站:bootcdn	jQuery最好使用3.4.1版本
        
基本使用
	很多时候jQuery都是一行代码搞定所有
    """
    使用jQuery需要有关键字声明
    	jQuery === $
    """

基本选择器

"""
如何通过变量名来区分指代的是何种对象
	eg:
		如果是原生的js对象
			var pEle = ...
		如果是jQuery的对象
			var $pEle = ...
"""
$('#d1')	# document.getElementById('d1')
$('.c1')	# document.getElementsByClassName('c1')
$('p')		# document.getElementsByTagName('p')
$('div.c1')	# 查找class含有c1的div标签
$("#d1, .c1, p") # 并列查找
$("x y")	// x所有的后代y(子子孙孙)
$("x > y")	// x所有的儿子y(儿子)
$("x + y")	// 找到所有紧挨在x后面的y
$("x ~ y")	// x之后所有的兄弟y

基本筛选器

: first	// 第一个
: last	// 最后一个
:eq(index)	//索引等于index的那个元素
:eq(index)	// 索引等于index的那个元素
:even	// 匹配所有索引值为偶数的元素,从 0 开始计数
:odd	// 匹配所有索引值为奇数的元素,从 0 开始计数
:ge(index)	// 匹配所有大于给定索引值的元素
:lt(index)	// 匹配所有小于给定索引值的元素
:not(元素选择器)	// 溢出所有满足not条件的标签
:has(元素选择器)	// 选取所有保安一个或多个标签在内的标签(指的是从后代元素找)

属性选择器

$('[name]')	# 查找包含name属性的
$('[name = "jason"]')	# 查找包含name属性的并且为jason的
$('input[name = "jason"]')	# 查找input中包含name属性的并且为jason的

例:
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器

$(':text')	# 查找属性值是text的form表单内的标签
$(':checked')	# 会连同option默认的selected一起找到

筛选器方法

"""
使用原生js代码批量查找到标签之后 结果是一个数组
需要索引取值之后才可以调用标签的一些方法

使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)
不需要索引取值 就可以直接调用封装的方法

两者对象的转换
	js对象转jQuery对象
		$(js对象)
	jQuery对象转js对象
		jQuery对象索引取值
"""

下一个元素:
.next()
.nextAll()
.nextUntil()
例:$("#id").next()
上一个元素:
.prev()
.prevAll()
.prevUntil()
例:$("#id").prev()
父亲元素:
.parent()
.parents()	// 查找当前元素的所有的父辈元素
.parentsUntil()	// 查找当前元素的所有父辈元素,直到遇到匹配的那个元素为止
例:$("#id").parent()
儿子和兄弟元素:
.children()	// 儿子们
.siblings()	// 兄弟们
例:$("#id").children()
查找:
$("div").find("p") // 搜索所有与指定表达式匹配的元素

节点操作

# 样式类操作
	addClass()	# classList.add() // 添加指定的CSS类名
    removeClass()	# classList.remove // 移除指定的CSS类名
    hasClass()	# classList.contains() // 判断样式是否存在
    toggleClass()	# classList.toggle() // 切换CSS类名,如果有就移除,如果没有就添加
    
# 样式操作
	css('属性名','属性值')
    
# 回顶部    
$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });

# 文本操作
	text()	# innerText	例:$('body').text
    html()	# innerHTML	例:$('body').html
    val()	# value
    jQuery对象先转js对象之后.files
    '''括号内不写参数就是获取值 写参数就是设置值'''
    
# 属性操作
	attr	# setAttribute()
    '''适用于属性为静态的情况(不经常修改动态变化的)'''
    prop()
    	$($(':checkbox')[0]).prop('checked',true)  # 通过代码选择属性
        """适用于动态变化的情况 尤其是选择类标签"""
        
# 文档处理
	append()	# 内部的尾部追加元素
    例:$(A).append(B)// 把B追加到A
       $(A).appendTo(B)// 把A追加到B
    prepend()	# 内部的头部追加元素
    例:$(A).prepend(B)// 把B前置到A
	   $(A).prependTo(B)// 把A前置到B
    after()		# 同级别下面添加元素
    例:$(A).after(B)// 把B放到A的后面
    	$(A).insertAfter(B)// 把A放到B的后面
    before()	# 同级别上面添加元素
    例:$(A).before(B)// 把B放到A的前面
		$(A).insertBefore(B)// 把A放到B的前面
    remove()	# 移除当前元素
    例:remove()// 从DOM中删除所有匹配的元素。
		empty()// 删除匹配的元素集合中所有的子节点。
    empty()		# 清空当前元素内部所有的数据
    clone()		# 克隆标签 括号内可以加布尔值来明确是否克隆事件

事件

绑定事件的两种方式
	方式1
    	jQuery对象.事件名(function(){})
        	$('#d1').click(function(){alert(123)})
	方式2
    	jQuery对象.on('事件名',function(){})
        	$('d1').on('click',function(){alert(123)})
            
"""
有时候绑定事件可能没有效果 这个时候可以考虑切换绑定方式
	方式1不行就方式2
	方式2不行就方式1
"""

click(function(){...})	# 单机
hover(function(){...})	# 悬浮
blur(function(){...})	# 移除
focus(function(){...})	# 聚焦
change(function(){...})	# 文本域
keyup(function(){...})	# 某个按键抬起
keydown(function(){...})	# 某个按键按下