Jquery选择器 DOM操作方法大全

最新推荐文章于 2020-06-22 23:11:12 发布
最新推荐文章于 2020-06-22 23:11:12 发布
阅读量453 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： jquery javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44890539/article/details/105567552
版权

1 选择器

1.1 基本选择器

基本选择器语法
ID选择器#ID
类选择器.类名
标签选择器标签名

1.2 层级选择器

层级选择器语法
获取A元素内部所有B元素，B是A的子孙元素A B
获得A元素下面的所有B子元素A>B
获得A元素同级，下一个B元素。(B和A是兄弟关系，A是老二，B是老三)A+B
获取A元素后面所有同级B元素。(B是A后面所有的兄弟，得到一个集合)A~B

1.3基本过滤选择器

基本过滤选择器语法
获得选择的元素中的第一个元素:first
获得选择的元素中的最后一个元素:last
不包括指定内容的元素:not()
偶数，从 0 开始计数:even
奇数，从 0 开始计数:odd
等于第几个:eq()
大于第n个，不含第index个:gt()
小于第n个，不含第index个:lt()

1.4 表单过滤选择器

表单属性选择器语法
可用:enabled
不可用:disabled
选中（单选radio ，多选checkbox）:checked
选择（下列列表<select>中的<option>）:selected

2 DOM操作的方法

html() 类似于以前innerHTML，修改或获取元素内部的HTML的内容，标签是	起作用的。
text() 类似于以前的innerText，标签是不起作用的
val() 类似于以前的value属性，设置或获取值。如：val("值")设置值   val()获取值

与属性有关的方法

attr() 修改，添加或获取元素的属性。
attr("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
attr("属性名") 一个参数就是获取属性的值
prop() 修改，添加或获取元素的属性。
prop("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
prop("属性名") 一个参数就是获取属性的值
removeAttr(),removeProp() 删除指定的属性
jq对象.removeAttr("src")
jq对象.removeProp("href")

在这里插入图片描述

与样式有关的方法

元素.style.样式名=样式值
元素.className=类名

与类名有关的方法

addClass(“类名”) 添加一个类样式，与CSS中第二种写法功能相同，如：addClass(“一个或多个类名”)
removeClass(“类名”) 移除一个类样式，让类样式不起作用
toggleClass(“类名”) 切换类样式，如果有这个class名就移除，如果没有就添加

元素的创建和添加

$("标签内容") 创建一个元素
父元素.append(子元素) 添加到最后一个子元素，与js中appendChild()相同
父元素.prepend(子元素) 添加到第一个子元素
元素.before(元素) 添加到当前元素的前面，这两个元素是兄弟关系
元素.after(元素) 添加到当前元素的后面，这两个元素是兄弟关系

删除元素

元素.remove() 删除本身
父元素.empty() 父元素清空所有的子元素，父元素还在

jQuery中常用的事件

事件方法功能
blur()失去焦点
change()改变事件
click()单击事件
dblclick()双击事件
focus()得到焦点
keydown()键盘按下
keyup()松开键盘
mouseover()鼠标移上
mouseout()鼠标移出
submit()表单提交

案例：表格隔行换色与全选全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试多选表格</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        tr {
            height: 35px;
            text-align: center;
        }

        a:link {
            text-decoration: none;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<table id="tab1" border="1" width="700" align="center">
    <tr style="background-color: #999999;">
        <td><input type="checkbox" id="all"></td>
        <td>分类ID</td>
        <td>分类名称</td>
        <td>分类描述</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="item"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
<script type="text/javascript">
    //隔行换色
    $(function () {
        //除去第一行,隔行换色
        $("tr:gt(0):even").css("background","lightyellow");
        $("tr:gt(0):odd").css("background","lightblue");

        //获取全选框按钮,施加点击事件
        $("#all").click(function () {
            //获取所有all的值是true还是false
            var b = $("#all").prop("checked");
            //点击全选之后,剩下的按钮全部变成被点金状态
            $("input[name=item]").prop("checked",b);
        });


    });
</script>
</body>
</html>

小结

  1. 选中大于0的tr的偶数行的选择器怎么写？

    tr:gt(0):even

  2. 设置某个复选框选中的方法是什么？

    jq对象.prop("checked",true)

案例：实现购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小测试</title>
    <style type="text/css">
        table {
            width: 400px;
            border-collapse: collapse;
            margin: auto;
        }

        td,th {
            text-align: center;
            height: 30px;
        }

        .container {
            width: 400px;
            margin: auto;
            text-align: right;
        }

        img {
            width: 100px;
            height: 100px;
        }

        th {
            background-color: lightgray;
        }

        tr:hover {
            background-color: lightyellow;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="container">
    <table border="1">
        <tbody id="cart">
        <tr>
            <th>
                图片
            </th>
            <th>
                商品名
            </th>
            <th>
                操作
            </th>
        </tr>
        <tr>
            <td><img src="img/dress01.png" /></td>
            <td>
                三星Note7
            </td>
            <td>
                <!--this表示当前按钮-->
                <input type="button" value="删除" onclick="deleteRow(this)">
            </td>
        </tr>
        </tbody>
    </table>
    <br />
    商品名：
    <input type="text" id="pname" value="" />&nbsp;
    <input type="button" value="添加到购物车" onclick="addRow()" />
</div>
<script>
    function addRow() {
        //获取文本框内容
        var name = $("#pname").val();
        //判断
        if(name == ""){
            alert("输入内容不能为空");
            //获取焦点
            $("#pname").focus();
            return;
        }
        //创建内容
        var tr = "<tr>\n" +
            "            <td><img src=\"img/dress01.png\" /></td>\n" +
            "            <td>\n" +
            "            "+name+"    " +
            "            </td>\n" +
            "            <td>\n" +
            "                <!--this表示当前按钮-->\n" +
            "                <input type=\"button\" value=\"删除\" οnclick=\"deleteRow(this)\">\n" +
            "            </td>\n" +
            "        </tr>";
        //获取父元素
        $("#cart").append(tr);
        //清空文本框内容
        $("#pname").val("");
    }

    function deleteRow(obj) {
        if(confirm("宁确定要删除?")){
            $(obj).parent().parent().remove();
        }
    }
</script>
</body>
</html>

小结

1. 创建tr
2. 添加到tbody中
3. 删除元素remove()
4. 获取父元素：parent()
奥申
关注
专栏目录
jQuery选择器大全
Cui6023056的博客
11-21 240
选择器----->>>基本 1:查找ID元素。 // An highlighted block var foo = 'bar'; <div id="div1"> Hello </div> $("#div1").text(); 2:查找一个DIV元素 < div id="div2">jqery< /div> $("div").te...
jQuery选择器大全(48个代码片段+21幅图演示)
dengjie0448的博客
06-02 238
选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。 一、基本选择器 1. id选择器（指定id元素） 将id...
jQuery的DOM选择器
xun__xing的博客
06-22 470
DOM选择器一、class 属性 一、class 属性 .addClass()
Jquery - JQuery 选择器大全
PeersLee的博客
09-20 733
jQuery选择器大全
JQuery 选择器、DOM节点操作练习实例
10-19
JQuery不仅提供了选择器，还提供了丰富的DOM操作方法，如创建、插入、删除节点等。 - 在第二个练习中，展示了如何使用JQuery隐藏和显示元素。`$("li>p").hide();`用于隐藏所有`<li>`元素下的`<p>`子元素，而`$(this...
NodeJS使用jQuery选择器操作DOM
10-24
在NodeJS中使用jQuery选择器操作DOM可以让开发者利用jQuery提供的丰富选择器和操作方法来操作后端的HTML/XML文档，就像在前端浏览器中操作DOM一样。 在NodeJS环境中操作DOM，一个常用的库是cheerio。cheerio专为...
浅谈jQuery 选择器和dom操作
10-22
掌握这些选择器以及相关DOM操作方法，可以让前端开发更加高效，同时也为创建丰富用户交互界面打下坚实基础。需要注意的是，随着技术的发展，jQuery虽依旧广泛使用，但许多现代JavaScript框架提供了更多高级特性。...
jquery对dom的操作常用方法整理
12-13
Jquery对dom的操作也是很总要的。 1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() – 设置或返回所选元素的文本内容 · html() – 设置或返回所选元素的内容（包括 HTML 标记） · val() – 设置或返回...
jQuery 选择器、DOM操作、事件、动画
10-28
在本篇中，我们将详细讨论jQuery选择器、DOM操作、事件处理和动画相关的知识点。 1. jQuery选择器 jQuery选择器用于选择HTML元素，并且能够在这些元素上执行各种操作。基本选择器和过滤选择器是jQuery选择器中最...
Jquery选择器大全
02-11
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
JQuery选择器大全
qq_44193064的博客
05-17 233
一.基本选择器: 它由元素id、class、元素名、多个元素符组成。 eg: <button id="btn" class="btn1">按钮</button> //获取方式: console.log($("#btn")); console.log($(".btn1")); console.log($("*")); console.log($("button")); console.log($("#btn,.btn1,button")); 二.层次选择器: 通过DOM元素间的层次
jquery选择器大全
xue251248603的专栏
12-31 408
一、基本选择器 1. id选择器（指定id元素） 将id="one"的元素背景色设置为黑色。（id选择器返单个元素） $(document).ready(function () { $('#one').css('background', '#000'); }); 2. class选择器（遍历css类元素） 将class="cube"的元素背景色设为
jQuery选择器选择dom元素
HkEndless的专栏
06-06 574
3. 通过子选择器，容器选择器和属性选择器进行选择： 　　*：匹配所有的元素，比如说:$(*)会把页面中的所有元素都返回； 　　E：匹配标签名为E的所有元素，如$("a")返回所有链接元素； 　　E F：匹配父元素E下的标签名为F的所有子元素（F可以为E的子类的子类，甚至更远）； 　　E>F：匹配父元素E下的所有标签名为F的直接子元素； 　　E+F：匹配所有标签名为F的元素，并且
jQuery之选择DOM元素
qq_42837380的博客
10-10 942
jQuery之选择DOM元素 jQuery的选择器非常强大，下面总结了一下jQuery选择器的常用类型。 jQuery选择器的类型 基本选择器 层级选择器 属性选择器 表单元素选择器 基本过滤选择器 子代过滤选择器 内容过滤选择器 可见性过滤选择器 基本选择器 基本选择器包括 *（通配符选择器）、.calss (类名选择器) 、Tag(标签选择器) 、#id（id选择器） jQuer...
jQuery选择器与方法详解：实现高效DOM操作
1. **jQuery选择器**： - `*$("*")`：选择器`*`表示所有元素，可以用来获取页面上的所有HTML节点。 - `#id`：通过id选择器，如`$("#lastname")`，可以直接选取具有指定id（如"lastname"）的元素。 - `.class`：类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值