04尚硅谷_jQuery王振国 - 课堂笔记.pdf
    ①dom属性操作之一

    1. <!DOCTYPE html>
    2. <html lang="zh_CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    7.     <script type="text/javascript">
    9.         $(function () {
    10.             // 不传参数，是获取，传递参数是设置
    11.             // alert( $("div").html() );// 获取
    12.             // $("div").html("<h1>我是div中的标题 1</h1>");// 设置
    14.             // 不传参数，是获取，传递参数是设置
    15.             // alert( $("div").text() ); // 获取
    16.             // $("div").text("<h1>我是div中的标题 1</h1>"); // 设置
    18.             // 不传参数，是获取，传递参数是设置
    19.             $("button").click(function () {
    20.                 alert($("#username").val());//获取
    21.                 $("#username").val("超级程序猿");// 设置
    22.             });
    25.         });
    27.     </script>
    28. </head>
    29. <body>
    30.     <div>我是div标签 <span>我是div中的span</span></div>
    31.     <input type="text" name="username" id="username" />
    32.     <button>操作输入框</button>
    33. </body>
    34. </html>

    ②val()设置表单项的选中状态

    1. <!DOCTYPE html>
    2. <html lang="zh_CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    7.     <script type="text/javascript">
    9.         $(function () {
    10. /*
    11.             // 批量操作单选
    12.             $(":radio").val(["radio2"]);
    13.             // 批量操作复选框的选中状态
    14.             $(":checkbox").val(["checkbox3","checkbox2"]);
    15.             // 批量操作多选的下拉框选中状态
    16.             $("#multiple").val(["mul2","mul3","mul4"]);
    17.             // 操作单选的下拉框选中状态
    18.             $("#single").val(["sin2"]);
    19. */
    20.             $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
    21.         });
    23.     </script>
    24. </head>
    25. <body>
    26. <body>
    27.     单选：
    28.     <input name="radio" type="radio" value="radio1" />radio1
    29.     <input name="radio" type="radio" value="radio2" />radio2
    30.     <br/>
    31.     多选：
    32.     <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    33.     <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    34.     <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    35.     <br/>
    37.     下拉多选 ：
    38.     <select id="multiple" multiple="multiple" size="4">
    39.         <option value="mul1">mul1</option>
    40.         <option value="mul2">mul2</option>
    41.         <option value="mul3">mul3</option>
    42.         <option value="mul4">mul4</option>
    43.     </select>
    44.     <br/>
    46.     下拉单选 ：
    47.     <select id="single">
    48.         <option value="sin1">sin1</option>
    49.         <option value="sin2">sin2</option>
    50.         <option value="sin3">sin3</option>
    51.     </select>
    52. </body>
    53. </body>
    54. </html>

    运行结果：
    image.png
    ③dom属性操作之二

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. <title>Insert title here</title>
    6. <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    7. <script type="text/javascript">
    8. /**
    9. HTML代码/文本/值
    10. html([val|fn])    a.html()取出a的html值    a.html(val)  让a的html值变为val
    11. text([val|fn])       a.text()取出a的text值    a.text(val)  让a的文本值变为val
    12. val([val|fn|arr]) a.val()  取出a的val值（input）   a.val(v)  设置a的value值为v 
    14. 属性
    15. attr(name|pro|key,val|fn)  
    16.  1、a.attr('name')取出a的name值   2、a.attr("name","username")把a的name值设置为username
    18. removeAttr(name) 
    19. a.removeAttr('class')    移除a的class属性
    22. prop(name|pro|key,val|fn)1.6+ 
    23. 1、a.prop('id')  取出a的id值   2、a.prop('id',"bj")  设置a的id值为bj
    24. removeProp(name)1.6+
    25. a.removeProp('class') 移除a的class属性
    29.  */
    31. </script>
    32. <script type="text/javascript">
    33. $(function(){
    34.     $("#btn1").click(function(){
    36.     })
    37. })
    38. </script>
    40. </head>
    41. <body>
    42. <button id="btn1">获取文本框的name值</button>
    43. <form action="#" id="form1">
    44.     文本框:<input  name="a" value="abc" type="text"/><br/>
    45.     多选框:<input type="checkbox" name="interest" value="篮球">
    46.     <input type="checkbox" name="interest" value="zuqiu">
    47.     <input type="checkbox" name="interest" value="乒乓">
    48.     <input type="checkbox" name="interest" value="御马">
    49. </form>
    51. </body>
    52. </html>

    ④dom的增删改

    1. <!DOCTYPE html>
    2. <html lang="zh_CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    7.     <script type="text/javascript">
    9.         $(function () {
    10.             //attr
    11.             // alert( $(":checkbox:first").attr("name") ); // 获取
    12.             // $(":checkbox:first").attr("name","abc") ; // 设置
    14.             // $(":checkbox").prop("checked",false );// 官方觉得返回undefined是一个错误
    16.             // $(":checkbox:first").attr("abc","abcValue");
    17.             // alert( $(":checkbox:first").attr("abc") );
    19.             // $("<h1>标题</h1>").prependTo( $("div") );
    20.             // $("<h1>标题</h1>").insertAfter("div");
    22.             // $("<h1>标题</h1>").insertBefore( $("div") );
    24.             // $("<h1>标题</h1>").replaceWith("div");
    26.             // $("div").replaceWith( $("<h1>标题</h1>") );
    28.             // $("<h1>标题</h1>").replaceAll( "div" );
    30.             $("div").empty();//标签 内容都不在
    31.             $("div").empty();//标签还在，内容不在
    33.         });
    36.     </script>
    37. </head>
    38. <body>
    39. <body>
    40.     <br/>
    41.     多选：
    42.     <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
    43.     <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    44.     <br/><br/>
    45.     <div>1234</div>
    46.     <div>1234</div>
    47. </body>
    48. </body>
    49. </html>

    ⑤练习之全选 全不选 反选

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. <title>Insert title here</title>
    6. <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    7. <script type="text/javascript">
    9.     $(function(){
    10.         // 给全选绑定单击事件
    11.         $("#checkedAllBtn").click(function () {
    12.             $(":checkbox").prop("checked",true);
    13.         });
    15.         // 给全不选绑定单击事件
    16.         $("#checkedNoBtn").click(function () {
    17.             $(":checkbox").prop("checked",false);
    18.         });
    20.         // 反选单击事件
    21.         $("#checkedRevBtn").click(function () {
    22.             // 查询全部的球类的复选框
    23.             $(":checkbox[name='items']").each(function () {
    24.                 // 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
    25.                 this.checked = !this.checked;
    26.             });
    28.             // 要检查 是否满选
    29.             // 获取全部的球类个数
    30.             var allCount = $(":checkbox[name='items']").length;
    31.             // 再获取选中的球类个数
    32.             var checkedCount = $(":checkbox[name='items']:checked").length;
    34.             // if (allCount == checkedCount) {
    35.             //     $("#checkedAllBox").prop("checked",true);
    36.             // } else {
    37.             //     $("#checkedAllBox").prop("checked",false);
    38.             // }
    40.             $("#checkedAllBox").prop("checked",allCount == checkedCount);
    42.         });
    44.         // 【提交】按钮单击事件
    45.         $("#sendBtn").click(function () {
    46.             // 获取选中的球类的复选框
    47.             $(":checkbox[name='items']:checked").each(function () {
    48.                 alert(this.value);
    49.             });
    50.         });
    52.         // 给【全选/全不选】绑定单击事件
    53.         $("#checkedAllBox").click(function () {
    55.             // 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
    56.             // alert(this.checked);
    58.             $(":checkbox[name='items']").prop("checked",this.checked);
    59.         });
    61.         // 给全部球类绑定单击事件
    62.         $(":checkbox[name='items']").click(function () {
    63.             // 要检查 是否满选
    64.             // 获取全部的球类个数
    65.             var allCount = $(":checkbox[name='items']").length;
    66.             // 再获取选中的球类个数
    67.             var checkedCount = $(":checkbox[name='items']:checked").length;
    69.             $("#checkedAllBox").prop("checked",allCount == checkedCount);
    70.         });
    72.     });
    74. </script>
    75. </head>
    76. <body>
    78.     <form method="post" action="">
    80.         你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
    82.         <br />
    83.         <input type="checkbox" name="items" value="足球" />足球
    84.         <input type="checkbox" name="items" value="篮球" />篮球
    85.         <input type="checkbox" name="items" value="羽毛球" />羽毛球
    86.         <input type="checkbox" name="items" value="乒乓球" />乒乓球
    87.         <br />
    88.         <input type="button" id="checkedAllBtn" value="全　选" />
    89.         <input type="button" id="checkedNoBtn" value="全不选" />
    90.         <input type="button" id="checkedRevBtn" value="反　选" />
    91.         <input type="button" id="sendBtn" value="提　交" />
    92.     </form>
    94. </body>
    95. </html>

    运行结果：
    image.png