前端(十)

319 阅读2分钟

一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:

1、添加类样式:

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

注意:此处类名不带点,所有类操作的方法类名都不带点。

2、移除类样式:

	$(selector).removeClass("liItem");  //为指定元素移除类 className
	$(selector).removeClass();          //不指定参数,表示移除被选中元素的所有类

3、判断有没有类样式:

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

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

4、切换类样式:

//为指定元素切换类 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,事件处理函数。