jquery
主要内容:
选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 （each data Ajax）
引入方式 ：1，本地导入 2，网络倒入
<script src="jquery-3.4.1.js"></script>
<script>
jQuery代码
原生js可以写
</script>
二.jQuery和dom对象的转换方法:
var $variable = jQuery对像var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以了
转到jq:$(document.getElementById('d1'))
转到DOM:$('#d1')[0]
jQuery 基础语法
查找标签
$('#d1') $('.c1') $('tagname') $('div.c1')
所有元素选择器：$('*') 组合选择器：$('#id,.classname,tagname')
三.选择器
基本选择器
基本筛选器:
$('li:even')
jQuery.fn.init(3) [li, li, li, prevObject: jQuery.fn.init(1)]0: li1: li2: lilength: 3prevObject: jQuery.fn.init [document]__proto__: Object(0)
$('li:odd')
jQuery.fn.init(3) [li#l2, li#l4, li, prevObject: jQuery.fn.init(1)]
层级选择器（同css）
$('x y');//x的所有后代y（子子孙孙）
属性选择器
父级选择器
$('span')
jQuery.fn.init [span.c4, prevObject: jQuery.fn.init(1)]0: span.c4length: 1prevObject: jQuery.fn.init [document]__proto__: Object(0)
$('span').parent()
jQuery.fn.init [div.c3, prevObject: jQuery.fn.init(1)]0: div.c3length: 1prevObject: jQuery.fn.init [span.c4, prevObject: jQuery.fn.init(1)]__proto__: Object(0)
$('span').parents()
jQuery.fn.init(4) [div.c3, div.c2, body, html, prevObject: jQuery.fn.init(1)]0: div.c31: div.c22: body3: htmllength: 4prevObject: jQuery.fn.init [span.c4, prevObject: jQuery.fn.init(1)]__proto__: Object(0)
$('span').parentsUntil('body')
jQuery.fn.init(2) [div.c3, div.c2, prevObject: jQuery.fn.init(1)]0: div.c31: div.c2length: 2prevObject: jQuery.fn.init [span.c4, prevObject: jQuery.fn.init(1)]__proto__: Object(0)
绑定点击事件
// 标签对象.onclick = function
$('.c1').click(function () {
// this是dom对象
$(this).css('background-color','red');
})
今日内容回顾
jQuery的两种引入方式
本地文件引入 CDN引入(网络资源引入)
DOM对象和jquery对象的互相转换
dom---jquery $(dom)
jquery--dom jquery对象[0]
选择器
基本选择器
ID选择器:$('#id值')
类选择器:$('.类值')
标签选择器:$('标签名')
层级选择器
$('div p') 找后代
...
基本筛选器
$('div:first')
:last
:eq(索引)
:has(选择器)
:not(选择器)
:even 索引为偶数的
:odd 索引为奇数的
:gt(索引) 大于
:lt(索引) 小于
属性选择器
[属性]
[属性 = '值']
[属性 != '值']
input[type='text']
表单筛选器
:text $(':text')
...
表单属性
:disabled $(':disabled')
:checked
:selected
:enabled
筛选器方法
$('div').find('p') 找到的是p标签,找的是div后代中所有的p标签
$('div p')
filter
$('div').filter('.c1') 找的是带有class=c1的div标签
下一个: 平级找
$('#d1').next()
$('#d1').nextAll()
$('#d1').nextUntil('#d2')
上一个
$('#d1').prev()
$('#d1').prevAll() #注意找到的标签的顺序,倒叙
$('#d1').prevUntil('#d2')
父亲元素
$('#d1').parent()
$('#d1').parents()
$('#d1').parentsUntil('body')
儿子:
$('#d1').children('#d2') 找所有的:$('#d1').children()
兄弟
$('#d1').siblings('.d2')
$('.d1').first()
$('.d1').last()
...
绑定点击事件
$('#d1').click(
function(){
...
}
)
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器：
:text :password
:file
:radio
:checkbox
:submit
:reset
:button
例子：$(":checkbox")
表单对象属性;
:enabled
:disabled
:checked
:selected
筛选器方法：（筛选出来的都是对象 ）
下一元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
上一元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素
$("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 不包含自己
查找：
$("div").find("p")等价于$("div p")
筛选：等价于 $("div.c1")
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
find()会在div元素内寻找class为rain 的元素，是对它的子集操作
filter()则是筛选div的class为rain的元素，是对它自身集合元素筛选(兄弟辈)
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
$('.c1').addClass(c1)
.c1 是class值为c1的对象 后面的c1为style下的.c1样式。
