1. 首页
  2. 文章中心
  3. jQuery

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

59 阅读 0 评论
我是靠谱客的博主 还单身小海豚，最近开发中收集的这篇文章主要介绍jQuery之选择器以及相关基本操作(操作元素属性、操作元素内容、操作元素样式)一、jQuery的选择器二、jQuery操作元素属性三、jQuery操作元素内容四、jQuery操作元素样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery之选择器以及相关操作

  • 一、jQuery的选择器
    • 1、id选择器
    • 2、标签选择器
    • 3、类选择器
    • 4、组合选择器
    • 5、测试子选择器
    • 6、测试层级选择器
    • 7、其它选择器简介
    • 8、注意
    • 9、完整代码
  • 二、jQuery操作元素属性
    • 1、获取元素属性
    • 2、修改元素属性
    • 3、完整代码
  • 三、jQuery操作元素内容
    • 1、获取元素内容
      • 1.1 对象名.html() //返回当前对象的所有内容，包括HTML标签
      • 1.2 对象名.text() //返回当前对象的文本内容，不包括HTML标签
    • 2、修改元素内容
      • 2.1 对象名.html("新的内容") //新的内容会将原有内容覆盖，HTML标签会被解析执行
      • 2.2 对象名.text("新的内容") //新的内容会将原有内容覆盖，HTML标签不会被解析执行
    • 3、完整代码
  • 四、jQuery操作元素样式
    • 1、使用css()
      • 1.1 对象名.css("属性名") //返回当前属性的样式值
      • 1.2 对象名.css("属性名","属性值") //增加、修改元素的样式
      • 1.3 对象名.css({"样式名"；"样式值"，"样式名"；"样式值"...}) //使用json传参，提升代码书写效率。
    • 2、使用addClass()
      • 2.1 对象名.addClass("类选择器名") //追加一个类样式
      • 2.2 对象名.removeClass("类选择器名") //删除一个指定的类样式
    • 3、完整代码

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

最后

以上就是还单身小海豚为你收集整理的jQuery之选择器以及相关基本操作(操作元素属性、操作元素内容、操作元素样式)一、jQuery的选择器二、jQuery操作元素属性三、jQuery操作元素内容四、jQuery操作元素样式的全部内容，希望文章能够帮你解决jQuery之选择器以及相关基本操作(操作元素属性、操作元素内容、操作元素样式)一、jQuery的选择器二、jQuery操作元素属性三、jQuery操作元素内容四、jQuery操作元素样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(39)

相关文章

jquery选择器与常用方法
jquery选择器与常用方法
jquery获取下一个标签的类型
jquery获取下一个标签的类型
jQuery 获取标签名
jQuery 获取标签名
Jquery（二）——DOM篇
Jquery（二）——DOM篇
jQuery之选择器以及相关基本操作(操作元素属性、操作元素内容、操作元素样式)一、jQuery的选择器二、jQuery操作元素属性三、jQuery操作元素内容四、jQuery操作元素样式
jQuery之选择器以及相关基本操作(操作元素属性、操作元素内容、操作元素样式)一、jQuery的选择器二、jQuery操作元素属性三、jQuery操作元素内容四、jQuery操作元素样式
jquery获取相同类标签的所有值
jquery获取相同类标签的所有值
前端学习日记(一)——浅谈JS中的基本类型和引用类型
前端学习日记(一)——浅谈JS中的基本类型和引用类型
基本类型和引用类型的区别
基本类型和引用类型的区别

评论列表共有 0 条评论

立即
投稿
返回
顶部