jQuery入门

https://www.cnblogs.com/clschao/articles/10093264.html

中文文档

http://jquery.cuishifeng.cn/

简化编程

　原生DOM的写法就是写JS代码，而以后我们多数都用jQuery来写，因为jQuery的优势很多，看上面，并且查找标签的方式有很多，比原生的DOM丰富的多，很便利，还有重要的一点就是不需要考虑浏览器的兼容性，因为jQuery做到了各大浏览器兼容的功能。

jQuery内容：

1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax

jquery 对象和dom对象

原生js 找到的 --dom对象
jquery 找到的对象--jQuery对象

dom对象只能使用dom对象方法.
jQuery对象只能使用自己的方法

装换:
	1. dom 对象转jquery对象--jQuery对象[0]
	
	$(‘#d1‘)[0]
	
	2. jquery对象 转 dom 对象
	
	$(dom对象)
	
	$($(‘#d1‘)[0])

$(‘#d1‘).text(‘aaa‘)

基础语法

基本选择器（同css）

id选择器：

$("#id")  #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容

标签选择器： id

$("tagName")       $(‘div‘)

class选择器：

$(".className")    $(‘.c1‘)

配合使用：

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器：

$("*")  

组合选择器：

$("#id, .className, tagName")

层级选择器：（同css）

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

********************************

<div>
    <h1>打打</h1>
    <h1>打打</h1>
    <h1>打打</h1>
</div>
*******************************
$(‘div h1‘)
$(‘div>h1‘)
$(‘h1+h1‘)
$(‘h1~h1‘)

基本筛选器（选择之后进行过滤）：

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

例子

$(‘h1:first‘)
$(‘h1:last‘)

$(‘h1:eq(0)‘)  索引   支持负数
$(‘h1:eq(-1)‘)  倒数第一格

not  $(‘h1:not(#hh)‘)   不包含id=hh 的

has

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标签


后代有什么标签(后面)的 什么标签(前面)

选择器

选择器找到的是多个对象, 会放到数组里面, 但还是jquery 对象  能够直接使用jquery方法 但是这个是 设置的所有的

如果要单独设置某一个,  就把他摘出来(这时候拿到的是dom对象),   加一个$(‘‘)单独设置


例子 $($(‘.c1‘)[1]).text(‘bbb‘)

属性

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于


$(‘[tittle=‘xx‘]‘)

input

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type=‘checkbox‘]");// 取到checkbox类型的input标签
$("input[type!=‘text‘]");// 取到类型不是text的input标签

表单筛选器

找到的是input标签中 type对应的属性
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

例子

$(":checkbox") 
$(":password") 

表单对象属性筛选器

$(‘:disabled‘)

:enabled
:disabled
:checked
:selected

找到选中的option

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

$(":selected").text()  打印出来选中的文字

筛选器方法（将来用的很多）

向后找

$("#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();// 兄弟们，不包含自己，.siblings(‘#id‘)，可以在添加选择器进行进一步筛选

查找 find 找子子孙孙

　　　　搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")
　　　　等价于$("div p")

筛选 找所有div 标签

　　　　筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class=‘c1‘属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签

和筛选一样 筛选在括号里面 下面的在括号外面

　　补充（和前面使用冒号的一样  :first等，只不过冒号的那个是写在选择器里面的，而下面的这几个是方法，如此而已，就不说啦）：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

第四十八天

原文：https://www.cnblogs.com/xueba/p/12740736.html