Jquery选择器 DOM操作方法大全

最新推荐文章于 2020-06-22 23:11:12 发布

奥申

最新推荐文章于 2020-06-22 23:11:12 发布

阅读量451

点赞数 1

分类专栏： JavaScript 文章标签： jquery javascript js

本文链接：https://blog.csdn.net/qq_44890539/article/details/105567552

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>

小结

选中大于0的tr的偶数行的选择器怎么写？
```
tr:gt(0):even
```
设置某个复选框选中的方法是什么？
```
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()

奥申

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录