一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,事件处理函数。