jQuery简单练习（1）

来源：互联网发布：主题网络框架设计编辑：程序博客网时间：2024/06/06 07:05

* 需要添加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>

阅读全文

0 0