前端（十）

一jQuery修改样式

用原生js去获取或修改css样式，当获取的时候还要判断是行内样式仍是外部class，各类兼容问题扑面而来，jQuery给咱们提供了直接方法：

1.1获取和修改样式

获取：（无论是行内仍是外部class中写的css样式，只要写了就有返回值）

//获取的时候若是有不少个，那么获取jquery对象中的第一个
$("div").css("width");复制代码

设置：(设置的是行内样式，单位能够不写默认是px)

//设置单个样式：  css(属性，值); 
$("div").css("background-color","red");   
//设置多个样式：  css(json);   
$("div").css({"width":100,"height":100,"background-color":"pink"})复制代码

1.2修改class

用原生js修改class 是经过ele.className  = "e"去改变class。固然jQuery也给咱们提供了API:

一、添加类样式：

$(selector).addClass("liItem");  //为指定元素添加类className复制代码

注意：此处类名不带点，全部类操做的方法类名都不带点。

二、移除类样式：

$(selector).removeClass("liItem");  //为指定元素移除类 className
	$(selector).removeClass();          //不指定参数，表示移除被选中元素的全部类复制代码

三、判断有没有类样式：

$(selector).hasClass("liItem");   //判断指定元素是否包含类 className复制代码

此时，会返回true或false。jquery对象中，只要有一个带有指定类名的就是true，全部都不带才是false。

四、切换类样式：

//为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
        $(selector).toggleClass(“liItem”); 复制代码

实际开发中者两种改变css样式的方式应该怎么抉择呢？

• 操做的样式很是少，那么能够经过.css()实现。

• 操做的样式不少，建议经过使用类 class 的方式来操做。

• 若是考虑之后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操做。

二操做节点

2.1原生js建立节点的方式

直接createElement或者是innerHtml的方式去建立，jQuery怎么建立节点呢？

方式一：

var $spanNode1 = $("<span>我是一个span元素</span>");  // 返回的是 jQuery对象复制代码

此方法相似于 原生 js 中的document.createElement("标签名");

方式二：（推荐）

var node = $("#box").html("<li>我是li</li>");复制代码

此方法相似于 原生 js 中的innerHTML。

由于有方式一的存在，必然会有一系列插入，删除的方法，若是直接用方式二，这些API就不必记住了。因此关于节点的操做总结：在js中用innerHTML的方式，在jQuery中用html的方式。

三获取和修改属性

原生js去获取或者修改属性用getAttribute、setAttribute、removeAttribute方法。jQuery使用：

（1）设置属性：

$(selector).attr("title", "生命壹号");复制代码

参数解释：第一个参数表示：要设置的属性名称。第二个参数表示：该属性名称对应的值。

（2）获取属性：

$(selector).attr("title");复制代码

参数为：要获取的属性的名称，返回指定属性对应的值。

总结：两个参数是给属性赋值，单个参数是获取属性值。

（3）移除属性：

$(selector).removeAttr("title");复制代码

四事件

最先采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后，jQuery用on统一了全部的事件处理的方法，此方法兼容zepto(移动端相似于jQuery的一个库)。

格式举例：

$(document).on("click mouseenter", ".box", {"name": 111}, function (event) {
            console.log(event.data);      //event.data获取的就是第三个参数这个json。
            console.log(event.data.name); //event.data.name获取的是name的值。
        });复制代码

参数解释：

• 第一个参数：events，绑定事件的名称能够是由空格分隔的多个事件（标准事件或者自定义事件）。上方代码绑定的是单击事件和鼠标进入事件。

• 第二个参数：selector, 执行事件的后代元素。

• 第三个参数：data，传递给事件处理函数的数据，事件触发的时候经过event.data来使用（也就是说，能够经过event拿到data）

• 第四个参数：handler，事件处理函数。