jQuery之选择器以及相关基本操作(操作元素属性、操作元素内容、操作元素样式)

最新推荐文章于 2024-07-25 09:24:40 发布

熊凯瑞

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量711

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端 css3 html5

本文链接：https://blog.csdn.net/qq_46106857/article/details/126756043

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery之选择器以及相关操作

一、jQuery的选择器
二、jQuery操作元素属性
三、jQuery操作元素内容
四、jQuery操作元素样式

一、jQuery的选择器

1、id选择器

//id选择器
function testId(){
     //jQuery--id
     var inp = $("#uname");
     alert(inp.val());
}

2、标签选择器

//标签选择器
function testEle(){
      var inps = $("input");
      alert(inps.length);
}

3、类选择器

//类选择器
function testClass(){
      var inps = $(".common");
      alert(inps.length);
}

4、组合选择器

//组合选择器
function testAll(){
      var eles = $("h3,input");
      alert(eles.length);
}

5、测试子选择器

//测试子选择器
function testChild(){
      var inps=$("#showdiv>input");
      alert(inps.length);
}

6、测试层级选择器

//测试层级选择器
function testCj(){
     var inp = $("input:first");
     alert(inp.val());
}

 function testCj2(){
     var tds=$("td:not(td[width])");
     alert(tds.html());
}

7、其它选择器简介

简单选择器
内容选择器
可见性选择器
属性选择器
子元素选择器
表单选择器

8、注意

jquery中选择器获取的是存储了HTML元素对象的数组。
jQuery获取的元素对象不能够直接用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。
jQuery对我们提供了多种多样的选择器来选择需要操作的HTML元素对象

9、完整代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <script src="js/jQuery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <title>jQuery之选择器</title>
    <script type="text/javascript">
        //id选择器
        function testId(){
            //jQuery--id
            var inp = $("#uname");
            alert(inp.val());
        }
        //标签选择器
        function testEle(){
            var inps = $("input");
            alert(inps.length);
        }
        //类选择器
        function testClass(){
            var inps = $(".common");
            alert(inps.length);
        }
        //组合选择器
        function testAll(){
            var eles = $("h3,input");
            alert(eles.length);
        }
        //测试子选择器
        function testChild(){
            var inps=$("#showdiv>input");
            alert(inps.length);
        }
        //测试层级选择器
        function testCj(){
            var inp = $("input:first");
            alert(inp.val());
        }
        function testCj2(){
            var tds=$("td:not(td[width])");
            alert(tds.html());
        }
    </script>
    <style type="text/css">
        .common{}
        #showdiv{
            width:300px;
            height:300px;
            border:solid 2px orange;
        }
    </style>
</head>
<body>
    <h3>jquery的选择器</h3>
    <hr/>
    <input type="button" name="" id="" value="测试id" onclick="testId()" class="common"/>
    <input type="button" name="" id="" value="测试标签选择器" onclick="testEle()"/>
    <input type="button" name="" id="" value="测试类选择器" onclick="testClass()"/>
    <input type="button" name="" id="" value="测试组合选择器" onclick="testAll()"/>
    <input type="button" name="" id="" value="测试子选择器" onclick="testChild()"/>
    <input type="button" name="" id="" value="测试层级选择器" onclick="testCj()"/>
    <input type="button" name="" id="" value="测试层级选择器2" onclick="testCj2()"/>
    <hr/>
    用户名：<input type="text" name="uname" id="uname" value="张三" class="common"/>
    <div id="showdiv">
        <input type="text" name="" id="" value="" />
        <input type="text" name="" id="" value="" />
        <input type="text" name="" id="" value="" />
        <input type="text" name="" id="" value="" />
    </div>
    <table border="1px" height="200px">
        <tr>
            <td width="100px"></td>
            <td width="100px"></td>
            <td width="100px"></td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>
</html>

二、jQuery操作元素属性

1、获取元素属性

对象名.attr(“属性名”) //返回当前属性值
注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。

function testField(){
      //获取元素对象
      var uname = $("#uname");
      //获取元素属性
      alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}

2、修改元素属性

对象名.attr(“属性名”,“属性值”);

function testField2(){
     //获取元素对象
     var uname = $("#uname");
     uname.attr("type","button");
}

3、完整代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>jQuery操作元素属性</title>
    <script src="js/jQuery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script >
        function testField(){
            //获取元素对象
            var uname = $("#uname");
            //获取
            alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
        }

        function testField2(){
            //获取元素对象
            var uname = $("#uname");
            uname.attr("type","button");
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素属性</h3>
    <input type="button" name="" id="" value="测试获取元素属性" onclick="testField()"/>
    <input type="button" name="" id="" value="测试修改元素属性" onclick="testField2()"/>
    <hr/>
    用户名：<input type="text" name="uname" id="uname" value="哈哈"/>
</body>
</html>

三、jQuery操作元素内容

1、获取元素内容

1.1 对象名.html() //返回当前对象的所有内容，包括HTML标签

 //声明元素对象
function testHtml(){
     //获取元素对象
     var showdiv=$("#showdiv");
     //获取元素的内容
     alert(showdiv.html());
}

1.2 对象名.text() //返回当前对象的文本内容，不包括HTML标签

function testText(){
       //获取元素内容
       var showdiv = $("#showdiv");
       //获取元素内容
       alert(showdiv.text());
}

2、修改元素内容

2.1 对象名.html(“新的内容”) //新的内容会将原有内容覆盖，HTML标签会被解析执行

function testHtml2(){
      //获取元素对象
      var showdiv=$("#showdiv");
       //修改元素内容
       showdiv.html("<b>今天天气很好</b>");
}

2.2 对象名.text(“新的内容”) //新的内容会将原有内容覆盖，HTML标签不会被解析执行

function testText2(){
      //获取元素内容
      var showdiv = $("#showdiv");
      //修改元素内容
      showdiv.text("<b>今天天气很好</b>");
}

3、完整代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>jQuery操作元素内容</title>
    <script src="js/jQuery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //声明元素对象
        function testHtml(){
            //获取元素对象
            var showdiv=$("#showdiv");
            //获取元素的内容
            alert(showdiv.html());
        }
        function testHtml2(){
            //获取元素对象
            var showdiv=$("#showdiv");
            //修改元素内容
            showdiv.html("<b>今天天气很好</b>");
        }
        function testText(){
            //获取元素内容
            var showdiv = $("#showdiv");
            //获取元素内容
            alert(showdiv.text());
        }
        function testText2(){
            //获取元素内容
            var showdiv = $("#showdiv");
            //修改元素内容
            showdiv.text("<b>今天天气很好</b>");
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素内容</h3>
    <input type="button" name="" id="" value="测试获取元素内容--html()" onclick="testHtml()"/>
    <input type="button" name="" id="" value="测试修改元素内容--html()" onclick="testHtml2()"/>
    <input type="button" name="" id="" value="测试获取元素内容--text()" onclick="testText()"/>
    <input type="button" name="" id="" value="测试修改元素内容--text2()" onclick="testText2()"/>
    <hr/>
    <div id="showdiv">
        <b>买菜</b>
    </div>
</body>
</html>

四、jQuery操作元素样式

1、使用css()

1.1 对象名.css(“属性名”) //返回当前属性的样式值

function testCss(){
      //获取元素对象
      var showdiv=$("#showdiv");
       //操作样式--增加
       showdiv.css("background-color","orange");
       //操作样式--获取
       alert(showdiv.css("width"));
}

1.2 对象名.css(“属性名”,“属性值”) //增加、修改元素的样式

function testCss2(){
      //获取元素对象
      var div = $("#div01");
      //操作样式
      div.css("border":"solid 1px");
}

1.3 对象名.css({“样式名”；“样式值”，“样式名”；“样式值”…}) //使用json传参，提升代码书写效率。

function testCss3(){
      //获取元素对象
      var div = $("#div01");
      //操作样式
      div.css({"border":"solid 1px","width":"300px","height":"300px"});
}

2、使用addClass()

2.1 对象名.addClass(“类选择器名”) //追加一个类样式

//jQuery操作样式--addClass()
function testAddClass(){
      //获取元素对象
      var div = $("#div01");
      //操作元素样式
      div.addClass("common");
}

2.2 对象名.removeClass(“类选择器名”) //删除一个指定的类样式

function testRemoveClass(){
       //获取元素对象
       var div = $("#div01");
       //操作元素样式
       div.removeClass("dd");
}

3、完整代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>jQuery操作元素样式</title>
    <style type="text/css">
        #showdiv{
            width:300px;
            height:300px;
            border:solid 1px;
        }
        .common{
            width:300px;
            height:300px;
            border:solid 1px;
            background-color: blueviolet;
        }
        .dd{
            font-size: 30px;
            color: white;
        }
    </style>
    <script src="js/jQuery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function testCss(){
            //获取元素对象
            var showdiv=$("#showdiv");
            //操作样式--增加
            showdiv.css("background-color","orange");
            //操作样式--获取
            alert(showdiv.css("width"));
        }
        function testCss2(){
            //获取元素对象
            var div = $("#div01");
            //操作样式
            div.css({"border":"solid 1px","width":"300px","height":"300px"});
        }

        //jQuery操作样式--addClass()
        function testAddClass(){
            //获取元素对象
            var div = $("#div01");
            //操作元素样式
            div.addClass("common");
        }

        function testAddClass2(){
            //获取元素对象
            var div = $("#div01");
            //操作元素样式
            div.addClass("dd");
        }
        
        function testRemoveClass(){
            //获取元素对象
            var div = $("#div01");
            //操作元素样式
            div.removeClass("dd");
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素样式</h3>
    <input type="button" name="" id="" value="操作样式--css()" onclick="testCss()"/>
    <input type="button" name="" id="" value="操作样式--css--json()" onclick="testCss2()"/>
    <input type="button" name="" id="" value="操作样式--addClass()" onclick="testAddClass()"/>
    <input type="button" name="" id="" value="操作样式--addClass2()" onclick="testAddClass2()"/>
    <input type="button" name="" id="" value="操作样式--removeClass()" onclick="testRemoveClass()"/>
    <hr/>
    <div id="showdiv">
       
    </div>
    <div id="div01">
         Good
    </div>
</body>
</html>

熊凯瑞

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery之选择器以及相关基本操作(操作元素属性、操作元素内容、操作元素样式)

1、id选择器2、标签选择器3、类选择器4、组合选择器5、测试子选择器6、测试层级选择器7、其它选择器简介简单选择器内容选择器可见性选择器属性选择器子元素选择器表单选择器jquery中选择器获取的是存储了HTML元素对象的数组。jQuery获取的元素对象不能够直接用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。jQuery对我们提供了多种多样的选择器来选择需要操作的HTML元素对象二、jQuery操作元素属性1、获取元素属性
复制链接

扫一扫