jQuery之DOM属性

1.  .addClass()方法:为每个匹配的元素添加指定的样式类名。值得注意的是设个方法不会替换一个样式类名。他只是简单的添加一个样式类名到元素上。对所有匹配的元素可以一次添加多个用空格隔开的样式类名。像这样:

1 $("p").addClass("myClass yourClass");

     这个方法通常个.removeClass()方法一起使用,用来切换样式,像这样:

1 $("p").removeClass("myClass noClass").addClass("yourClass");

     这是一个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
        <style type="text/css">
            .colorBlue{
                color: blue;
            }
            .colorRed{
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="p1">这是段落1</p>
        <p id="p2">这是段落2</p>
        <p id="p3">这是段落3</p>
    </body>
    <script type="text/javascript">
        $(function(){
            $("#p2").addClass("colorBlue");
            $("#p3").addClass("colorRed");
        })
    </script>
</html>

     例子显示图片:

2.  .attr()方法:获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性。注意: 除少数属性意外,属性值都是字符串,如value和tabindex。

     当属性值没有被设置的时候(这里的设置是在元素里面必须有声明这个属性,而且属性可以自己定义,例如给一个input元素一个“ahref”属性),.attr()方法将返回undefined。还有一个方法是.prop()方法,这个方法可以获取元素的的属性(property)值,一般.prop()方法里面说的是元素的特性,也就是说这里的属性是元素本来就有的,用户自己定义的使用这个方法会返回undefined,下面举一个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    </head>
    <body>
        <input type="checkbox" id="swim" ahref="111" value="111"/>游泳<br />
        <input type="button" id="getVal" value="确定" />
        <div id="textDiv"></div>
    </body>
    <script type="text/javascript">
        $(function(){
            $("#getVal").click(function(){
                $("#textDiv").html("<table border=‘1px solid black‘>"
                +"<tr><th>属性名</th><th>.attr()方法</th><th>.prop()方法</th></tr>"
                +"<tr><td>checked</td><td>"+$("#swim").attr("checked")+"</td><td>"+$("#swim").prop("checked")+"</td></tr>"
                +"<tr><td>ahref</td><td>"+$("#swim").attr("ahref")+"</td><td>"+$("#swim").prop("ahref")+"</td></tr>"
                +"<tr><td>value</td><td>"+$("#swim").attr("value")+"</td><td>"+$("#swim").prop("value")+"</td></tr>"
                +"</table>");
            });
        })
    </script>
</html>

     例子显示图片:

3.  .hasClass(className)方法:确定任何一个匹配的元素是否有被分配的类。存在就返回true,反则会犯false。这个方法很简单,就不写例子了。

4.  .html()方法:这个方法可以获取匹配元素中的HTML内容或者是这只匹配元素的HTML内容,在前面的.attr()方法中的例子代码中用到了这个方法,这个也是看以下就会使用的。

5.  .prop()方法:在之前跟.attr()方法做了比较。

时间: 2024-10-27 03:42:53

jQuery之DOM属性的相关文章

jQuery(五) jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个

使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta htt

jQuery属性操作之DOM属性操作

DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, 则返回第一个匹配元素的值. 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>prop() Demo

jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DOM属性的静态方法接口如下: prop(elem, name, value)    ;设置或读取DOM属性,有两种用法,如下 ·$.prop(elem,name,value)      ;传入第三个参数表示设置elem元素的name属性值为value ·$.prop(elem,name,)      

juqery笔记 jquery操纵DOM元素属性 attr()

jQuery操纵元素属性方法: attr():读或者写匹配元素的属性值. removeAttr():从匹配的元素中溢出指定的属性. attr()方法 读操作 attr()读操作,读取的是匹配元素中第一个元素的指定属性值. 格式:.attr(attributeName),返回值类型:String,读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值. 例子: 1 <!DOCTYPE html> 2 <html> 3

jquery 选择器(name,属性,元素)大全

jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象属性过滤选择器.选择器是jQuery最基础的东西,下面向大家介绍jquery+%D1%A1%D4%F1%C6%F7/" target="_blank">jquery 选择器的用法 选择器是jQuery的核心组成部分,因为使用jQuery操作DOM时所做的每件事都和选择器密切

原生JS与jQuery操作DOM有什么异同点?

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

jQuery Event.which 属性详解

jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对DOM原生的event.keyCode和event.charCode进行了标准化. 适用的事件类型主要有键盘事件:keypress.keydown.keyup,以及鼠标事件:mouseup.mousedown. 该属性属于jQuery的Event对象(实例). 语法 jQuery 1.1.3 新增该