03-jQuery操作DOM

文本主要内容

  • 样式和类操作

  • 节点操作

样式操作和类操作

作用:设置或获取元素的样式属性值。

样式操作

1、设置样式:

    //设置单个样式:  css(属性,值);
    $("div").css("background-color","red");

    //设置多个样式:  css(json);
     $("div").css({"width":100,"height":100,"background-color":"pink"});

2、获取样式:

    //获取样式:css(属性);
    //获取的时候如果有很多个,那么获取jquery对象中的第一个
    alert($("div").css("width"));

举例如下:

类操作(className)

1、添加类样式:

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

2、移除类样式:

3、判断有没有类样式:

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

举例:

4、切换类样式:

解释:为指定元素切换类 className,该元素有类则移除,没有指定类则添加。

如果采用采用正常的思路实现上面这句话,代码是:

现在有了toggleClass()方法,一行代码即可实现。

举例:

实现的效果:

样式操作和类操作的比较

  • 操作的样式非常少,那么可以通过.css()实现。

  • 操作的样式很多,建议通过使用类 class 的方式来操作。

  • 如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。

举例:addClass+removeClass

代码实现:

上方代码中,我们注意,tab栏和下方图片栏的index值,一一对应,这里用得很巧妙。

效果:

jQuery 的节点操作

动态创建元素

原生 js 有三种动态创建元素arrow-up-right的方式。这里我们学一下 jQuery 动态创建元素。注意,创建的是 jQuery 对象

方式一:

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

方式二:(推荐)

此方法类似于 原生 js 中的innerHTML

举例:

添加元素

jQuery 添加元素的方法非常多,最重要的方法是append()。格式如下:

作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以)。

通俗的解释:在盒子里的最末尾添加元素

  • 如果是页面中存在的元素,那调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了。

  • 如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去。

举例:

效果:

其他的添加元素的方法:

方法2:

作用:同append(),只不过是反着写的。

方法3:

作用:在元素的第一个子元素前面追加内容或节点。

方法4:

作用:在被选元素之后,作为兄弟元素插入内容或节点。

方法5:

作用:在被选元素之前,作为兄弟元素插入内容或节点。

清空元素

方式一:没有参数

解释:清空指定元素的所有子元素(光杆司令)。

方式二:

//

解释:“自杀” 。把自己以及所有的内部元素从文档中删除掉。

复制元素

格式:

解释:复制$(selector)这个元素。是深层复制。

总结

推荐使用 html("<span></span>") 方法来创建元素或者 html("") 清空元素。

案例:选择水果

完整版代码:

效果:

案例:动态添加表格项

代码如下:

实现的效果:

代码解释:每次生成字符串str之前,记得先把之前的str清空,不然每次点击按钮,都会继续添加表格项。

将上一个案例进一步提升:点击按钮,添加数据

暂略。

jQuery 设置和获取属性

jQuery 无法直接操作节点的属性和src等,我们需要借助attr()方法。下面介绍。

属性操作

(1)设置属性:

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

(2)获取属性:

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

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

(3)移除属性:

参数为:要移除的属性的名称。

(4)form表单中的 prop()方法:

针对checked、selected、disabled属性,要使用 prop()方法,而不是其他的方法。

prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属性。例如:input和button的disabled特性,以及checkbox的checked特性。

总结:细节可以参考:http://api.jquery.com/prop/arrow-up-right

以上四项的代码演示:

效果:

案例:表格案例全选反选

完整版代码:

val()方法和 text()方法

作用:设置或返回 form 表单元素的value值,例如:input、select、textarea 的值。

作用:设置或获取匹配元素的文本内容。不带参数表示,会把所有匹配到的元素内容拼接为一个字符串,不同于其他获取操作。

作用:设置的内容包含html标签,那么text()方法会把他们当作纯文本内容输出。

总结:

  • text() 不识别标签。

  • html() 识别标签。

举例:

打印结果:

Last updated