jQuery_day01

jQuery

jQuery 内部封装了原生的js代码 （还额外添加了很多功能）
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端 模块不叫模块 叫类库

兼容多个浏览器的 你在使用jQuery的时候不需要考虑兼容性的问题

jQuery的宗旨
write less do more
让你用更少的代码完成更多的事情

# jQuery 基本语法
  jQuery(选择器).action()
  秉持着jQuery的宗旨 jQuery简写 $
  jQuery() === $()
 
 # jQuery与js代码对比
 eg：将p标签内部的文本颜色改为红色
 // js代码操作
 	let pEle = document.getElementById('d1')
 	pEle.style.color = 'red'

 // jQuery操作
 	$('p').css('color','blue')

先学如何查找标签

基本选择器

// id选择器
$('#d1')
S.fn.init [div#d1]
// class选择器
$('.c1')
S.fn.init [p.c1, prevObject: S.fn.init(1)]0: p.c1length: 1prevObject: S.fn.init [document]__proto__: Object(0)
// 标签选择器
$('span')
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id=​"d1">​…​</div>​
// 标签对象如何变成jQuery对象
undefined
$(document.getElementById('d1'))
S.fn.init [div#d1]

属性选择器

$('[username]')   # 跟css基本一样 找属性有username的标签

$('[username="jason"]')	# 找属性值为jason的username属性的标签

组合选择器

跟css的一样 css的选择器学好了 这里就熟悉一下就行

表单筛选器

$('input[type="text"]')
S.fn.init [input, prevObject: S.fn.init(1)]0: 
$(':text') 				# 跟上面那个效果一样 但是这种查询只限于form表单查询
S.fn.init [input, prevObject: S.fn.init(1)]


* 表单对象属性
:enabled
:disabled
:checked
:selected
'''特殊情况'''
$(':checked')  # 在页面同时有checked和selected的时候它会将checked和selected都拿到
$('input:checked')  # 自己加一个限制条件就可以规避

基本筛选器

$('ul li:first')    // ul中所有的li 且第一个 俗称大儿子（在拿到li标签后继续筛选）

$('ul li:last')		// 小儿子

$('ul li:eg(2)')	// 放索引

$('ul li:even')		// 偶素索引 0包含在内

$('ul li:odd')		// 奇数索引

$('ul li:gt(2)')	// 索引值大于2的 标签（ul 中的li）都取

$('ul li:lt(2)')	// 同上小于

$('ul li:not("#d1")')// 不要id为d1的li标签 注意要用双引号括起来

$('div:has("p")')	 // 找内部有p标签的div标签
## :has  是选取出一个或多个标签在内的标签 因此双引号里面只能填写标签 填写id class都是筛选不出来的

筛选器方法

$('#d1').next()						# 同级别的下一个
S.fn.init [span, prevObject: S.fn.init(1)]

$('#d1').nextAll()					# 同级别的下面所有
S.fn.init(5) [span, div#d2, span, span.c1, div#xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}.xl-chrome-ext-bar, prevObject: S.fn.init(1)]

$('#d1').nextUntil('.c1')			# 同级别的下面所有直到  有.c1样式的标签之前 不包括这个
S.fn.init(3) [span, div#d2, span, prevObject: S.fn.init(1)]

$('.c1').prev()						# 上一个
S.fn.init [span, prevObject: S.fn.init(1)]
$('.c1').prevAll()					# 上面的全部
S.fn.init(4) [span, div#d2, span, span#d1, prevObject: S.fn.init(1)]

$('.c1').prevUntil('#d2')
S.fn.init [span, prevObject: S.fn.init(1)]
	
$('#d3').parent()					# 获取该标签的父标签
S.fn.init [p, prevObject: S.fn.init(1)]

$('#d3').parents()					# 祖宗 （一直网上去)
S.fn.init(4) [p, div#d2, body, html, prevObject: S.fn.init(1)]

$('#d3').parentsUntil('body')		# 往上直到 body
S.fn.init(2) [p, div#d2, prevObject: S.fn.init(1)]

$('#d2').children()					# 子标签
S.fn.init(3) [span, p, span, prevObject: S.fn.init(1)]

$('#d2').siblings()					# 所有同级别标签
S.fn.init(5) [span#d1, span, span, span.c1,


# 两种找标签的方式  完全等价
$('div p')

$('div').find('p')		# 先划定 div区域 然后find从这片区域找p标签

$('div span:first') == $('div span').first()   # 后者方法更加见名之意一些 下面同理

== 这是对基本筛选器语句的优化 书写的更加便捷 ==
$('div span:last')  == $('div span').first()
$('div span:not("#d3")') == $('div span').not("#d3")