jQuery简单练习（1）

最新推荐文章于 2021-12-17 23:16:31 发布

人走丿茶凉

最新推荐文章于 2021-12-17 23:16:31 发布

阅读量391

点赞数

分类专栏： javascript html5+css3 文章标签： jquery 标签 class utf-8

本文链接：https://blog.csdn.net/luck_whr/article/details/78189138

版权

html5+css3 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

javascript

22 篇文章 1 订阅

订阅专栏

* 需要添加jquery工具包*

1. 通过jquery控制到div中的元素

$(“div”) // 标签适配器
$(“#a”) // ID适配器
$(“.a”) // class适配器
$(“div, p”) // 同时使用多个标签适配器
.text(” * * * * * “) // 添加文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
</head>
<body>
<div id="a"></div>
<div></div>
<p class="c"></p>
<div class="c"></div>
<div class="c"></div>

<script>
    $("div").text("bbb"); // 通过TagName获取元素 [<div id="a"></div>, <div id="b"></div>, <div class="c"></div>]
    $("#a").text("aaa"); // 通过ID获取元素
    $(".c").text("ccc"); // 通过Class获取元素
    $("div,p");
</script>
</body>
</html>

2. 通过jquery控制到form表单中的元素

$(“form input”) // form 下所有的 input
$(“form > input”) // form 下第一层 input
$(“form ~ input”) // form 相邻的 input
$(“label + input”) // label 后面相邻的 input
.val(” * * * * * “) // 添加文字


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
</head>
<body>
<form>
    <label></label>
    <input type="text" name="a" value=""/><br/>

    <div>
        <input type="text" name="b" value=""/><br/>
    </div>
</form>
<input type="text" name="c" value=""/><br/>

<script>
    $("form input").val("abc"); // form 下所有的 input
    $("form > input").val("123"); // form 下第一层 input
    $("form ~ input"); // form 相邻的 input
    $("label + input"); // label 后面相邻的 input
</script>
</body>
</html>

3. 通过jquery控制到table表格中的元素

$(“tr:first”) // 获取第一行
$(“tr:last”) // 获取最后一行
$(“tr:even”) // 获取奇数行
$(“tr:odd”) // 获取偶数行
$(“tr:lt(3)”) // 获取小于3的行（0~2）
$(“tr:gt(3)”) // 获取大于3的行（3~N）
$(“:header”) // 获取h1 ~ h6标签
$(“:hidden”); // 获取隐藏的
$(“:visible”); // 获取显示的


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script>
        $(document).ready(function () {
//            $("tr:first").css({"color": "red"});
//            $("tr:last").css({"color": "blue"});

//            $("tr:even").css({"background-color": "yellow"}); // 奇数行
//            $("tr:odd").css({"background-color": "green"}); // 偶数行

//            $("tr:lt(3)").css({"background-color": "yellow"}); // 小于
//            $("tr:gt(3)").css({"background-color": "yellow"}); // 大于

            //$(":header").css({"color": "red"}); // h1 ~ h6
//            $(":hidden"); // 获取隐藏的
//            $(":visible"); // 获取显示的
        });
    </script>
</head>
<body>
<h1 style="display: none">Header 1</h1>

<p style="display: block">Contents 1</p>

<h2>Header 2</h2>

<p>Contents 2</p>

<h3>Header 3</h3>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>19</td>
        <td><input type="button" value="删除"/></td>
    </tr>
    <tr>
        <td>李四</td>
        <td>18</td>
        <td><input type="button" value="删除"/></td>
    </tr>
    <tr>
        <td>王五</td>
        <td>20</td>
        <td><input type="button" value="删除"/></td>
    </tr>
    <tr>
        <td>赵六</td>
        <td>21</td>
        <td><input type="button" value="删除"/></td>
    </tr>
    <tr>
        <td>孙七</td>
        <td>20</td>
        <td><input type="button" value="删除"/></td>
    </tr>
</table>
</body>
</html>

4. 通过jquery控制到文字属性

$(“input[id]”) // 获取有ID的属性
$(“input[name=beijing]”) // 获取name为beijing的属性
$(“input[name!=beijing]”) //获取name不为beijing的属性
$(“input[name^=nan]”) // 以字符开头的属性
// 以字符结尾的属性
$(“input[name*=j]”) // 只要包含j元素的属性
$(“input[id][name*=j]”) // 同时满足多个条件的属性
.attr(“checked”, “true”) // 设置为默认选中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script>
        $(document).ready(function () {
            // $("input[id]").attr("checked", "true"); // 获取有ID属性
            // $("input[name=beijing]").attr("checked", "true");
            // $("input[name!=beijing]").attr("checked", "true");
            // $("input[name^=nan]").attr("checked", "true"); // 以字符开头
            // $("input[name$=ing]").attr("checked", "true"); // 以字符结尾
            // $("input[name*=j]").attr("checked", "true"); // 只要包含
            $("input[id][name*=j]").attr("checked", "true"); // 多个条件，且
        });
    </script>
</head>
<body>
<input type="checkbox" name="beijing"/> 北京1
<input type="checkbox" id="a" name="beijing"/> 北京2
<input type="checkbox" id="b" name="shanghai"/> 上海
<input type="checkbox" name="tianjin"/> 天津
<input type="checkbox" name="chongqing"/> 重庆
<input type="checkbox" name="nanjing"/> 南京
<input type="checkbox" name="nanning"/> 南宁
</body>
</html>

5. 通过jquery控制到ul-li列表中的元素

$(“ul li:first-child”) // 获取第一个li标签
$(“ul li:last-child”) // 获取最后一个li标签
$(“ul li:nth-child(2)”) // 获取第二个li标签
$(“ul li:only-child”) // 设置仅有一个子元素，ul仅有一个li
$(“input:checked”); // 获取input选中框
$(“input:not(:checked)”); // 获取input未选中框
$(“input:disabled”); // 带有一个禁用输入字段的 HTML 表单
$(“select option:selected”); // 在页面加载时预先选定该选项


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script>
        $(document).ready(function () {
//            $("ul li:first-child").css({"color": "red"});
//            $("ul li:last-child").css({"color": "blue"});
//            $("ul li:nth-child(2)").css({"color": "green"});
            // $("ul li:only-child").css({"color": "green"}); // 仅有一个子元素，ul仅有一个li
            // $("input:checked");
            $("input:not(:checked)");
            $("input:disabled");
            $("select option:selected");
        });
    </script>
</head>
<body>
<ul style="display: none;">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
</ul>

<ul style="display: none;">
    <li>重庆</li>
    <li>南京</li>
    <li>杭州</li>
</ul>

<form>
    兴趣爱好：
    <input name="interests" type="checkbox"/>篮球
    <input name="interests" type="checkbox" checked="checked"/>足球
    <input name="interests" type="checkbox"/>羽毛球<br/>
    姓名：
    <input name="name" type="text" disabled="disabled" value="姓名"/><br/>
    邮箱：
    <input name="mail" type="text" value="邮箱"/><br/>
    城市：
    <select name="city">
        <option>北京</option>
        <option>上海</option>
        <option selected="selected">天津</option>
        <option>重庆</option>
        <option>南京</option>
        <option>杭州</option>
    </select>
</form>
</body>
</html>