7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件

jQuery简介

宗旨:Write less, do more.
内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器
版本:1.x 2.x 3.x  # 可以使用3.x最新版
是第三方的类库:使用jQuery需要提前导入  # 实际中很容易遗忘了导入

jQuery下载
	压缩之后的版本将很多变量名全部使用英文字母代替了
导入方式
	本地导入
		缺点在于需要提前下载文件
		优点在于不会受到网络的影响
	CDN导入
		# CDN:内容分发网络
		网站:bootcdn  jquery最好使用3.4.1版本

基本使用
	很多时候jQuery都是一行代码搞定所有
	"""
	使用jQuery需要有关键字声明
		jQuery 或者 $ (推荐)
	"""

基本选择器

/*
如何通过变量名来区分指代的是js对象还是jQuery对象
	eg:
		原生的js对象
			var pEle = ...
		jQuery的对象
			var $pEle = ...
*/
$('#d1')  // js：document.getElementById('d1')
$('.c1')  // js：document.getElementsByClassName('d1')
$('p')  // js：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的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器

$('[name]')
$('[name="jason"]')
$('input[name="jason"]')

表单筛选器

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

筛选器方法

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

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

两者对象的转换
	js对象转jQuery对象
		$(js对象)
	jQuery对象转jd对象
		jQuery对象索引取值
*/
.next()
.nextAll()
.nextUntil()
.prev()
.prevAll()
.prevUntil()
.parent()
.parents()
.parentsUntil()
.children()
.siblings()
.find()

节点操作

# 样式类操作
	addClass()  # classList.add()
	removeClass()  # classList.remove()
	hasClass()  # classList.contains()
	toggleClass()  # classList.toggle()

# 样式操作
	css('属性名','属性值')

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });

# 文本操作
	text()  # innerText
	html()  # innerHTML
	val()  # value
	jQuery对象先转js对象之后.files
	'''
	括号内
		不写参数：获取值
		写参数：  设置值
	'''

# 属性操作
	attr()  # setAttribute()
	'''适用于属性为静态的情况(不经常修改动态变化的)'''
	prop()
		$($(':checkbox')[1]).prop('checked',true)
	"""适用于动态变化的情况 尤其是选择类标签"""

# 文档处理
	append()  # 内部的尾部追加元素
	prepend()  # 内部的头部追加元素
	after()  # 同级别下面添加元素
	before()  # 同级别上面添加元素
	remove()  # 移除当前元素
	empty()  # 清空当前元素内部所有的数据
	clone()  # 克隆标签 括号内可以加true来克隆事件

事件

绑定事件的两种方式
	方式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(){...})