Jquery选择器 DOM操作方法大全

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()
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值