jquery基础学习之样式篇（一）

一.安装与使用

官网下载，然后引入 <script src="js/jquery-3.3.1.js"></script>，这是生产版本，开发版本替换成min的那个

二.转换

jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素,

jq转dom转换

console.log( $('div')[0]);//选出来的是dom元素
console.log( $('div').get(0));//选出来的是dom元素

dom转jq
通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了
let divs=document.getElementsByTagName('div');
let $div=$(divs);
console.log($div)//jq对象
$div.css('background','pink')

二.选择器们

1.基本选择器

$('#div1') id选择器

$('.div1') 类选择器

$('div') 元素选择器

$('*') 所有选择器

2.层选择器

$('form input') 选择form 下所有的input，包括子孙后代的input

$("#main > *") 选择id为mian 的所有子元素

$(".div1 + input") 选择紧跟着.div1的下一个input,只选一个，如果不紧跟着就没有

$("#prev ~ div") 选择#prev元素下面的所有兄弟div,

$("#prev ~ siblings") 选择#prev元素下面的所有兄弟

3.过滤选择器

$("p:first") 第一个p 元素
$("p:last") 最后一个p 元素
$("p:not(.p1)") 选取所有class不是p1的p元素
：even 奇数行，0开始
：odd 偶数行，0开始
<div class="div6">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
</div>
<div class="div8">
<div class="div7"></div>
</div>
eq(index) 选取索引为index的元素，从0开始，$('.div6 div:eq(0)') 第一个div6 下的第一个div,如果有多个符合条件，只选择一个
gt(index) 大于索引的，1开始，gt(0)是第一个元素，即选择大于1的， $('.div6 div:gt(0)') // 2,3,4,5

lt(index) 小于索引的，lt(1) 是第二个元素，$('.div6 div:lt(1)') //1
：header 所有的标签元素

：animated 正在执行的动画
：focus 当前获取焦点的元素

4.内容过滤选择器

：contains(text):选取文件内容包含text的元素 $('.div6 div:contains("1")') //div1 这个有可能选择出多个来
:empty :选取没有子元素或文本内容的元素 $(' div:empty') //div7
：has(selector) : 选取包含选择器的元素 $(' div:has(.div7)') //div8
：parent 选取含有资源是或者文本的元素

5.可见性过滤选择器

：hidden 选取所有不可见的元素 包括display:none,opacity=0,visibility:hidden,input的type=hidden
：visible 选取所有可见的元素

6.属性过滤器

input[name] 选取所有拥有name塑形的input
input[name=xiaofang] 选取所有name=xiaofang的input
input[name!=xiaofang]选取所有name属性的值不是xiaofang的input
input[name^=xiaofang]选取所有name属性的值以xiaofang开头的input
input[name$=xiaofang]选取所有name属性的值以xiaofang结尾的input
input[name|=xiaofang]选取所有name属性以xiaofang为前缀或者就是xiaofang的input
input[name~=xiaofang]选取所有name属性的值以空格隔开包含xiaofang的input
[attribute1][attribute2]..[attributen]用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围。

7.子元素过滤选择器

div：nth-child(index/even/odd/eq(0)) 选取第一个index个div,奇偶位的div,注意中间如果有别的元素，也是占据index数的，但是odd/even只计算div
:last-child ,同上，从最后一个选
:only-child 有独生子的元素

8.表单对象属性过滤选择器

：enable 所有可用的元素
：disable 不可用的元素
：checked 所有被选中的元素
：selected 被选中的option元素

9.表单选择器

：input 基本上所有的表单元素
：text 单文本
：password 密码框
：button 按钮
：radio 单选框
：checkbox 多选框
：submit 提交按钮
：image 图片按钮
：reset 重置按钮
：file 所有的上传域
：hidden 不可见的元素
这一堆都可以用input[type=text/password/button]来替代

三.样式的操作

1.html()
相当于innerHTML

2.text()
返回一个字符串，包含所有匹配元素的合并文本

3.val()

获取input 的值

4.css()
1.两个参数，第一个是属性，第二个是要设置的属性,第二个属性可以是一个回调函数，return出来要传递的值

2.一个参数：获取该属性的值
3.设置值的时候，可以传入一个对象，批量设置
4，获取的时候，可以传入一个数组，最后会返回一个对象

5.addClass()

当一个节点含有多个class,dom元素响应的className属性不是数组，而是含有空格的字符串
addClass(".div1")为每个元素增加.div1,增加多个用数组$('div').addClass(['div1','div2'])
addClass属于追加，不是替换
addClass(function(index,currentClass){}),返回一个或多个用空格隔开的要增加的样式名
.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名,不填写全部移除
.removeClass( function(index, class)) ： 一个函数，返回一个或多个将要被移除的样式名

6.toggleClass()
toggleClass用于解决互斥的切换（比如addClass,removeClass），一次相当于addClass,再一次相当于removeClass

7.attr与property的区别

attr是dom自带的属性，例如id class title align等
property是这个dom元素作为对象，其附加的内容，tabName,nodeName,nodeType，使用prop()方法进行取值或赋值
获取attribute 用attr ,获取property用prop
设置value 为 苹果 $('input:first').attr('value','苹果');，只有一个参数时为获取

//可以根据该元素上的其它属性值返回最终所需的属性值
//例如，我们可以把新的值与现有的值联系在一起：

$('form input:nth-child(3)').attr('value',function(i, val){
return '通过function设置' + val
})

removeAttr() 删除某个属性