jQuery框架之Style(一)

一、jQuery

jQuery相信前端开发者，再熟悉不过了。它是一个快速，简洁的Javascript框架。jQuery的宗旨：write Less，Do More！对于正在学习Html5的我来说，学习jQuery是必经之路。下面，就把学到的一些知识点与大家共勉。

二、Selector(选择器)

在jQuery中，我们会用到提供的一些选择器，以至于帮助我们更快找到指定的节点。不管什么选择器都是 $(xx)

1）id选择器

id就是用来查找元素的唯一标志，即元素的id属性。id是唯一的，每个页面只能有一个id值。

$("#id")

其实这个选择器内部实现，就是调用了js的原生代码 document.getElementById()

2）class选择器

class选择器就是通过class样式来获取元素节点。它不像id选择器那样，class选择器可以多选，所以效率就会第一点，有利有弊吧。

$(".class")

其实它就是原生js中getElementsByClassName()函数来实现的。

3）element选择器

元素选择器就是根据Html标记名称来获取所有元素的。

$("element")

它会查询到指定元素标签名下的所有节点，同样的 也可以用原生js方法来获取getElementsByTagName()

4）* 选择器

*号的意思 作为程序员 基本都能 想到吧，就是所有的意思：所有的元素

$(" * ")

其实 通过js的方法 document.getElementsByTagName() 中传递"*"也可以拿到。

5）层级选择器

层级选择器我理解的意思其实就是父子，兄弟姐妹，祖孙的关系。
即：子元素 后代元素 兄弟元素 相邻元素。

1. 后代选择器 (空格标示)

// 后代选择器  即选中元素的 ： 所有后代元素（儿子 孙子 曾孙子）
$("p  descendant") 

2. 子选择器 （>）

// 子选择器 选择所有父元素的 指定的 直接  child元素
$("parent > child")

3. 相邻兄弟选择器 （+）

// 选择所有 紧邻 在 pre元素后的 第一个 兄弟元素
$("pre + next")

4. 一般兄弟选择器 （~）

// 选择所有 pre元素后的 所有 兄弟姐妹元素 必须具有相同的父辈。
$("pre ~ sibling")

PS:(这里我列举了一些常用的选择器 筛选选择器和css中的伪元素相识 即 以 : 开头。jQuery中的合集索引都是从 0 开始的 )

6）筛选选择器

1. 选择第一个元素

// 选择第一个元素
$(":first")

2. 选择最后一个元素

$(":last")

3. 选择所有元素去除 不匹配 给定的选择器元素

//选择 没有选中属性的 input标签
$("input:not(:checked)")

4. 选择匹配集合索引为index 的元素

$("p:eq(index)")

5. 选择所有大于给定index的元素

$("p:gt(index)")

6. 选择所有小于给定index的元素

$("p:lt(index)")

7. 索引为偶数的元素 从index为0开始

$("p:even")

8. 索引为奇数的元素 从index为0开始

$("p:odd")

9. 选择所有标题元素 h1 - h2 -h3 .....

$(":header")

10. 选择所有执行动画的元素

$(":animated")

7) 内容筛选选择器

1. 选择所有包含 指定文本的元素

$(":contains(text)")

2. 选择至少包含指定元素的元素

$(":has(ele)")

3. 选择所有 包含 子元素或者文本的元素

// 子元素文本不能为空的元素
$(":paraent")

4. 选择所有 不包含子元素的元素（包含文本节点）

// 无子元素 或者 有文本 的元素
$(":empty")

8) 属性选择器

1. 选择指定属性是给定值的元素

//查找所有div中，属性name=p1的div元素
$("div[name = 'p1']")

2. 选择指定属性包含一个给定字符串的元素 （或选择给定的属性是以包含某些值的元素）

//查找所有div中，有属性name中的值包含一个test字符串的div元素
$("div[name *= "test"]")
$("div[name *= "xx-test-xx"]")

9) 子元素筛选选择器

1. 选择所有父级元素下的第一个子元素

// 它和 选择器 :frist 的区别就是  :first-child 即为每个父级元素匹配第一个子元素。  而:first只匹配一个元素
$(":first-child")

2. 选择所有父级元素下的最后一个子元素

//// 它和 选择器 :last 的区别就是  :last-child 即为每个父级元素匹配最后一个子元素。  而:last只匹配一个元素
$(":last-child")

3. 唯一子元素选择器

//如果某元素是唯一的子元素 它就会被选中
$(":only-child")

4. 选择他们所有父元素的第n个子元素

//$(".last-div a:nth-child(2)") 查找class为last-div 下的第二个子元素
$(":nth-child") 

5. 选择他们所有父元素的第n个子元素 计数从最后一个开始计数

//$(".last-div a:nth-last-child(2)") 查找class为last-div 下的倒数第二个子元素
$(":nth-last-child") 

10) 表单元素选择器

1. 选择所有 input textarea select button 元素

$(":input") 

2. 匹配所有文本框

$(":text")

3. 匹配所有单选按钮

$(":radio")

4. 匹配所有复选框

$(":checkBox")

5. 匹配所有按钮

$(":button")

6.选取可用的表单元素

$(":enabled")

7.选取不可用的表单元素

$(":disabled")

8. 选取被选中的<input>元素

$(":checked")

9. 选取被选中的<option>元素

$(":selected")

三、属性、样式

1) attr设置属性

在jQuery中可以用attr()设置元素属性。

1. attr(proName):获取属性的值
   2.attr(proName,vlaue)：设置属性的值
   3.attr(proName,函数值):设置属性的函数值
   4.attr(attributes):设置多个属性 ：{name ： vlaue，name2：vlaue}

2) removeAttr移除属性

$("p").removeAttr(attName) // 移除p元素的某属性

3) 修改元素的html结构 或者文本 html() / text()

• html()
  1.html() 不传参数 ：即获得第一个匹配元素的html文档结构
  2.html(htmlstring): 设置每一个匹配元素的html内容
  3.html(function(index,oldHtml)):返回设置html内容的一个函数

  $("p").html(function(index,text){
            return '增加内容' + text
        })

• text()
  获取每个匹配元素的文本内容，包括他的后代，也可以设置匹配元素的文本内容。其结果返回一个字符串，包含所有匹配元素的合并文本。
  1.text():获取匹配元素集合中每个元素的合并文本
  2.text(string) : 用于设置匹配元素的文本
  3.text(function(index,text))
• html() 与 text() 异同
  1.html()处理的是元素内容，而text()处理的是文本内容
  2.html()只能用在html文档中 text()可用在xml和html中

4) val()

这个方法主要用于获取表单元素的值 ：input、textarea、select
1.val()无参数 ：获取匹配元素集合中第一个元素的当前值
2..val(v)：设置匹配元素中每个元素的值
3.val(function)：用来返回设置值的函数
当select有多个组时，.val()返回一个包含选择项的值的数组。
.val() .html() .text() 三个方法都可以用来读取指定元素的内容 ，html()读取的是html内容或者html标签 ，.text()只是获取纯文本包括其后代 ,.val()只是获取表单元素的值 并且只能用于表单。若html()用在多个元素上 只是获取第一个元素的值 .val()也是如此。但是.text()用在多个元素上时 是获取的所有元素文本的内容

5）增加样式addClass() 移除样式removeClass()

• addClass()
  在html中 多个class样式 可以用空格隔开 addClass可以动态增加class名字,它并不会替换一个样式名，只是简单的添加一个样式到元素上
  1.addClass(className):为每个匹配元素增加一个或者多个样式名
  2.addClass(function(indecx,currentClass)):

        //通过className(fucntion)方法
        //这个函数返回一个或更多用空格隔开的要增加的样式名。
        //接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容
 $("div").addClass(function(index,className) {

            //找到类名中包含了name的元素
            if(-1 !== className.indexOf('name')){
                //this指向匹配元素集合中的当前元素
                $(this).addClass('xxClass')
            }
        });

• removeClass()
  移除一个元素上的class样式
  1.removeClass(className):移除一个 或者 多个用空格隔开的样式名
  2.removeClass(function(index,class)):返回一个 或者 多个将要移除的样式名字

6) 切换样式toggleClass()

即在addClass和removeClass之间的切换，存在就移除，不存在就添加
1.toggleClass(className):在匹配的元素集合中的每个元素切换一个或者多个样式类名
2.toggleClass(className,switch)：switch布尔值，用于判断是否应该添加或者删除
3..toggleClass( function(index, class, switch) [switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

7) 切换操作css()

.css()获取元素样式属性或者设置元素css属性

• 获取
  1.css(proName):获取匹配元素的属性
  2.css(propertyNames):传递一个数组
• 设置

1. css(proName,vlaue)
   2.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
   3.css( properties )：可以传一个对象，同时设置多个样式
   css({ 'font-size' :"15px", "background-color" :"#40E0D0", "border" :"1px solid red" })

四、总结

jQuery还有好多方法，我这里总结了一下jQuery一下操作样式的方法，后续会总结一些，jQuery事件，jQuery动画等。最近学前端学的感觉入门了不少，如果你想学一门新的语言，那就应该去了解实践它，不是你看看就可以学会的。在上篇文章中，我推荐的那本JavaScript的书，写的很好，我基本每天中午午睡前都看那么几页，在我看完后，会写一下心得，到时候会分享出来一起学习。
如果觉得我的文章写的不错，给个小❤️吧。