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样式。