jQuery基础——样式篇

Posted 2020-07-07 winfredzen

jQuery基础——样式篇

jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化，由于减少了一些代码，使得该版本比 jQuery 1.x 更小且更快。
如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。

$(document).ready 的意思是等页面的文档（document）中的节点都加载完毕后，在执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

DOM对象转化成jQuery对象
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

层级选择器

选择器

基本筛选选择器

注意事项：
+ :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
+ gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

内容筛选选择器

注意事项：

• :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
• 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
• :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

可见性筛选选择器

`:hidden`选择器，不仅仅包含样式是`display="none"`的元素，还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素：

CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式

属性筛选选择器

子元素筛选选择器

注意事项：

• :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
• :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
• 如果子元素只有一个的话，:first-child与:last-child是同一个
• :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
• jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
• nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

表单元素选择器

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

表单对象属性筛选选择器

注意事项：

• 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
• 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

特殊选择器this

相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？

this是javascript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者

下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc

var imooc = {
    name:"慕课网",
    getName:function(){
        //this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //慕课网

当然在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)，具体的大家可以查阅相关资料

同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用

假如给页面一个P元素绑定一个事件:

p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可

 this.style.color = "red"

但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象

换成jQuery的做法：

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了

总体：

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

jQuery的属性与样式

.attr()与.removeAttr()

操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题

attr()有4个表达式

1. attr(传入属性名)：获取属性的值
2. attr(属性名, 属性值)：设置属性的值
3. attr(属性名,函数值)：设置属性的函数值
4. attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

注意的问题：

dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性

例如：html中常用的id、class、title、align等：

<div id="immooc" title="慕课网"></div>

而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等

获取Attribute就需要用attr，获取Property就需要用prop

.val()

jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。

注意事项：

• 通过.val()处理select元素， 当没有选择项被选中，它返回null
• .val()方法多用来设置表单的字段的值
• 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

例子：

    <select id="single">
        <option>慕课网</option>
        <option>博客园</option>
    </select>
    <select id="multiple" multiple="multiple">
        <option selected="selected">imocc</option>
        <option>慕课网</option>
        <option selected="selected">博客园</option>
    </select>
    <input type="text" value="click a button" />
    <p></p>

    <script type="text/javascript">
        //单个select，返回第一个
        $("p").text( $("#single").val() )
    </script>

    <script type="text/javascript">
        //多个select被选择，返回["imocc", "博客园"]
        $("p").text( $("#multiple").val() ) 
    </script>


    <script type="text/javascript">
        //选择一个表单，修改value的值
        $("input[type='text']").val('修改表单的字段') 
    </script>

增加样式.addClass()

.addClass( className )方法

1. .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名

2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

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

注意事项：

.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

删除样式.removeClass()

切换样式.toggleClass()

.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

1. .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
2. .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
3. .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值

4. .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

   //第二个参数判断样式类是否应该被添加或删除
   //true，那么这个样式类将被添加;
   //false，那么这个样式类将被移除
   //所有的奇数tr元素，应该都保留class="c"样式
   $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
   

样式操作.css()

.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

1. .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值

2. .css( propertyNames )：传递一组数组，返回一个对象结果

   <script type="text/javascript">
   //获取尺寸，传入CSS属性组成的一个数组
   //{width: "60px", height: "60px"}   
   var value = $('.first').css(['width', 'height']);
   //因为获取的是一个对象，取到对应的值
   $('p:eq(2)').text( 'widht:' + value.width +  ' height:' +value.height )
   

设置：

1. .css(propertyName, value )：设置CSS

   <script type="text/javascript">
   //合并设置,通过对象传设置多个样式
   $('.seventh').css({
       'font-size'        :"15px",
       "background-color" :"#40E0D0",
       "border"           :"1px solid red"
   })
   

2. .css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理

   <script type="text/javascript">
   //获取到指定元素的宽度，在回调返回宽度值
   //通过处理这个value，重新设置新的宽度
   $('.sixth').css("width",function(index,value){
       //value带单位，先分解
       value = value.split('px');
       //返回一个新的值，在原有的值上，增加50px
       return (Number(value[0]) + 50) + value[1];
   })
   

3. .css( properties )：可以传一个对象，同时设置多个样式

注意事项：

浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
.css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样

元素的数据存储

html5 dataset是新的HTML5标准，允许你在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由JavaScript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中，我们如何实现数据存取? jQuery就提供了一个.data()的方法来处理这个问题

使用jQuery初学者一般不是很关心data方式，这个方法是jquery内部预用的，可以用来做性能优化，比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了，常常用于我们存放临时的一些数据，因为它是直接跟DOM元素对象绑定在一起的

jQuery提供的存储接口

jQuery.data( element, key, value )   //静态接口,存数据
jQuery.data( element, key )  //静态接口,取数据   
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据

2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。

我们把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在循环引用的内存泄漏风险

通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了

同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了

jQuery.removeData( element [, name ] )
.removeData( [name ] )

例子：

<script type="text/javascript">
$('.left').click(function() {
    var ele = $(this);
    //通过$.data方式设置数据
    $.data(ele, "a", "data test")
    $.data(ele, "b", {
        name : "慕课网"
    })
    //通过$.data方式取出数据
    var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
    ele.find('span').append(reset)
})
</script>
<script type="text/javascript">
$('.right').click(function() {
    var ele = $(this);
    //通过.data方式设置数据
    ele.data("a", "data test")
    ele.data("b", {
        name: "慕课网"
    })
    //通过.data方式取出数据
    var reset = ele.data("a") + "</br>" + ele.data("b").name
    ele.find('span').append(reset)
})
</script>