• 阶段五-Day02-jQuery

    一、jQuery入门

    1. 定义和特点

    • 目前最流行的JavaScript函数库之一，对JavaScript进行了封装。

    • 并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。

    • JavaScript的缺点

      • 选择器功能弱

      • DOM操作繁琐至极

      • 浏览器兼容性不好

      • 动画功能弱

    • jQuery的优点

      • 强大的选择器

      • 出色的DOM封装

      • 出色的浏览器兼容性

      • 强大的动画功能

      • 体积小，压缩后只有100KB左右

      • 可靠的事件处理机制

      • 使用隐式迭代简化编程

      • 丰富的插件支持

    2.jQuery实现:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script type="text/javascript" src="jquery.js">script>
    7.  
    8.     <style>
    9.         table{
    10.             border: 1px solid red;
    11.             width: 500px;
    12.             border-collapse: collapse;
    13.             text-align: center;
    14.         }
    15.  
    16.         tr，th，td{
    17.             border: 1px solid red;
    18.         }
    19.     style>
    20.  
    21.     <script type="text/javascript">
    22.         $(function(){
    23.             $('tr:odd').css('background-color'， 'gold');
    24.             $('tr:even').css('background-color'， 'skyblue');
    25.         })
    26.     script>
    27. head>
    28. <body>
    29. <table>
    30.     <tr>
    31.         <th>编号th>
    32.         <th>姓名th>
    33.         <th>性别th>
    34.         <th>年龄th>
    35.     tr>
    36.     <tr>
    37.         <td>1td>
    38.         <td>明玉td>
    39.         <td>女td>
    40.         <td>28td>
    41.     tr>
    42.     <tr>
    43.         <td>2td>
    44.         <td>吕布td>
    45.         <td>男td>
    46.         <td>38td>
    47.     tr>
    48.     <tr>
    49.         <td>3td>
    50.         <td>貂蝉td>
    51.         <td>女td>
    52.         <td>18td>
    53.     tr>
    54.     <tr>
    55.         <td>4td>
    56.         <td>西施td>
    57.         <td>女td>
    58.         <td>16td>
    59.     tr>
    60.     <tr>
    61.         <td>5td>
    62.         <td>曹操td>
    63.         <td>男td>
    64.         <td>60td>
    65.     tr>
    66. table>
    67. body>
    68. html>

    3. jQuery的使用

    • 关于jQuery的使用需要先导入jQuery的js文件，发现jQuery本身就是一个JS文件。

    • $是jQuery使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。 作用1：$(function(){})

      • 相当于 window.οnlοad=function(){}，功能比window.onload更强大

      • window.onload一个页面只能写一个，但是可以写多个$() 而不冲突

      • window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早

      • 完整形式是$(document).ready(…….);

        jQuery(document).ready(…….);

      作用2： $(selector)

      • 选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍

    • jQuery的基本语法：$(selector).action

      获取页面内容:$(selector)

      操作页面的内容：action(一般都是方法)

      • 控制页面样式

      • 访问和操作DOM元素

      • 事件处理功能

      • 动画功能

      • Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）

    4. jQuery对象和DOM对象

    在学习jQuery的过程中，经常出现调用函数出错的情况。究其原因，很多是因为还是对jQuery对象和DOM对象理解不清楚了，出现了函数互调的情况，当然出错了。

    DOM对象和jQuery对象分别拥有一套独立的属性和函数，不能混用所以我们在这里先来将搞清楚这两个概念吧。

    • DOM对象：直接使用JavaScript获取的节点对象 className innerHTML value

    • jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法 addClass() html() val()

    • DOM对象转换成jQuery对象 $(DOM对象)

    • jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index)

    二、jQuery选择器

    1. 概述

    jQuery提供了丰富的选择器功能，jQuery选择器比JavaScript选择器更加的强大。

    回顾：JavaScript是如何直接获取元素节点

    • getElementById( ) ：返回一个元素节点对象

    • getElementsByName( )：返回多个元素节点（节点数组）

    • getElementsByClassName( ) ：返回多个元素节点对象（节点数组）

    • getElementsByTagName( ) ：返回多个元素节点对象（节点数组）

    2. 基本选择器

    1. 标签选择器 $("a")

    2. ID选择器 $("#id") $("p#id")

    3. 类选择器 $(".class") $("h2.class")

    4. 通配选择器 $("*")

    5. 并集选择器$("elem1， elem2， elem3")

    6. 后代选择器$(ul li)(所有后代)

    7. 父子选择器 $(ul > li)(直接子元素)

    8. 后面第一个兄弟元素节点 prev + next

    9. 后面所有的兄弟元素节点 prev ~ next

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script type="text/javascript" src="jquery.js">script>
    7.  
    8.     <script type="text/javascript">
    9.  
    10.         $(function(){
    11.  
    12.             //标签选择器
    13.             // $('h3').css('background-color'， 'red');
    14.  
    15.             //id选择器
    16.             // $('#p1').css('font-size'， '30px');
    17.  
    18.             //类选择器
    19.             // $('.p2').css('color'， 'red');
    20.  
    21.             //通配选择器
    22.             // $('*').css('background-color'， 'blue');
    23.  
    24.             //并集选择器
    25.             // $('span，h2').css('color'， 'green');
    26.  
    27.             //后代选择器
    28.             // $('#div1 p').css('color'， 'red');
    29.  
    30.             //子元素选择器
    31.             // $('#div1 > p').css('color'， 'red');
    32.  
    33.             //后面的第一个元素
    34.             // $('h2+p').css('color'， 'red');
    35.  
    36.             //后面的所有兄弟元素
    37.             $('h2~p').css('color'， 'red');
    38.         })
    39.  
    40.     script>
    41. head>
    42. <body>
    43.  
    44.     <p id="p1">我是段落1.p>
    45.     <p class="p2">我是段落2.p>
    46.     <p class="p2">我是段落3.p>
    47.  
    48.     <div id="div1">
    49.         <span>我是div中span的内容！span>
    50.         <h2>我是div中的h2标题内容1！h2>
    51.         <p>我是div中的段落1.p>
    52.         <p>我是div中的段落2.p>
    53.         <div>
    54.             <p>我是div中的div中的段落.p>
    55.         div>
    56.         <h2>我是div中的h2标题内容2！h2>
    57.     div>
    58.  
    59.     <h3>我是h3内容1h3>
    60.     <h3>我是h3内容2h3>
    61.     <h3>我是h3内容3h3>
    62.  
    63. body>
    64. html>

     3.属性选择器

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery.js">script>
    7.     
    8.     <script>
    9.         $(function () {
    10.             //1.根据指定的属性名获取元素节点
    11.             //有type属性的节点都获取
    12.             var $type = $("[type]");
    13.             console.log($type);
    14.  
    15.             var $type1 = $("[type][value]"); //同时有两个属性
    16.             console.log($type1);
    17.  
    18.             var $name = $("input[name][id]");
    19.             console.log($name);
    20.  
    21.             //2.根据指定的属性名和属性值获取元素节点
    22.             //type属性值为text的元素节点
    23.             var $type2 = $("[type='text']");
    24.             console.log($type2);
    25.             //type属性值不为text的元素节点
    26.             var $type3 = $("[type!='text']");
    27.             console.log($type3);
    28.             //td标签中type属性不为text的元素节点
    29.             var $type4 = $("td[type!='text']"); //同时满足
    30.             console.log($type4);
    31.             //td标签的后代标签的type属性不为text的元素节点
    32.             var $type5 = $("td [type!='text']"); //后代选择器
    33.             console.log($type5);
    34.             //td标签的儿子标签的type属性不为text的元素节点
    35.             var $type6 = $("td>[type!='text']"); //子选择器
    36.             console.log($type6);
    37.             //td的儿子中的input节点中type不等于text的元素节点
    38.             var $type7 = $("td>input[type!='text']");
    39.             //input节点中name属性值以h开头的所有节点
    40.             console.log($type7);
    41.             var $input = $("input[name ^= 'h']");
    42.             console.log($input);
    43.             //input节点中name属性值以e结尾的所有节点
    44.             var $input1 = $("input[name $= 'e']");
    45.             console.log($input1);
    46.             //input节点中name属性值包含o的所有节点
    47.             var $input2 = $("input[type *= 'o']");
    48.             console.log($input2);
    49.  
    50.         });
    51.     script>
    52. head>
    53. <body>
    54. <form action="">
    55.     <table>
    56.         <tr>
    57.             <td>用户名：td>
    58.             <td><input type="text" name="username" id="username">td>
    59.         tr>
    60.         <tr>
    61.             <td>密码：td>
    62.             <td><input type="password" name="hpassworde" id="password">td>
    63.         tr>
    64.         <tr>
    65.             <td>爱好：td>
    66.             <td>
    67.                 <input type="checkbox" name="hobby" value="Java">Java
    68.                 <input type="checkbox" name="hobby" value="C++">C++
    69.                 <input type="checkbox" name="hobby" value="PHP">PHP
    70.             td>
    71.         tr>
    72.         <tr>
    73.             <td>职业：td>
    74.             <td>
    75.                 <select name="professional" id="professional">
    76.                     <option value="程序员">程序员option>
    77.                     <option id="p2" value="公务员">公务员option>
    78.                     <option value="律师">律师option>
    79.                     <option value="医生">医生option>
    80.                 select>
    81.             td>
    82.         tr>
    83.         <tr>
    84.             <td colspan="2"><input type="submit" value="注册">td>
    85.         tr>
    86.     table>
    87. form>
    88. body>
    89. html>

    4.位置选择器

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery.js">script>
    7.     <script>
    8.         $(function () {
    9.             //1.获取第一个元素节点
    10.             var $p = $("p:first");
    11.             console.log($p);
    12.  
    13.             //2.div的后代所有p中的第一个
    14.             var $div = $("div p:first");
    15.             console.log($div);
    16.  
    17.             //3.获取最后一个元素节点
    18.             var $p1 = $("p:last");
    19.             console.log($p1);
    20.  
    21.             //第一个div中的所有直接子元素p的最后一个
    22.             var $div1 = $("div:first>p:last");
    23.             console.log($div1);
    24.  
    25.  
    26.             var $div2 = $("div:first>div:first>p");
    27.             console.log($div2);
    28.  
    29.             //3.获取指定索引位置的元素节点（从0开始）
    30.             var $p2 = $("p:eq(0)");
    31.             console.log($p2);
    32.  
    33.             var $div3 = $("div:first p:eq(4)");
    34.             console.log($div3);
    35.  
    36.             //4.获取奇数索引位置的元素节点（从0开始）0是偶数
    37.             var $div4 = $("div:first p:odd");
    38.             console.log($div4);
    39.  
    40.             var $div5 = $("div:first>p:odd");
    41.             console.log($div5);
    42.  
    43.             //5.获取偶数索引位置的元素节点（从0开始）0是偶数
    44.             var $div4 = $("div:first p:even");
    45.             console.log($div4);
    46.  
    47.             //6.获取大于执行索引位置的元素节点
    48.             var $p3 = $("p:gt(1)");  //Greater Than
    49.             console.log($p3);
    50.  
    51.             //7.获取小于执行索引位置的元素节点
    52.             var $p4 = $("p:lt(3)"); //Less than
    53.             console.log($p4);
    54.  
    55.             //获取到所有后代中的第一个子元素
    56.             var $div6 = $("div:first :first-child");
    57.             console.log($div6);
    58.  
    59.             //获取到第一个直接子元素
    60.             var $div7 = $("div:first>:first-child");
    61.             console.log($div7);
    62.  
    63.             //获取div中第一个p子元素节点
    64.             var $div8 = $("div:first>p:first-child");
    65.             console.log($div8);
    66.  
    67.         });
    68.     script>
    69. head>
    70. <body>
    71. <p>我是段落0.p>
    72. <div>
    73.     <p>我是段落1.p>
    74.     <p>我是段落2.p>
    75.     <p>我是段落3.p>
    76.     <p>我是段落4.p>
    77.     <h4>标题1h4>
    78.     <h4>标题2h4>
    79.     <h4>标题3h4>
    80.     <div>
    81.         <h3>我是h3标题h3>
    82.         <p>我是段落！p>
    83.     div>
    84.     <div>
    85.         <p>唯一的儿子段落！p>
    86.     div>
    87. div>
    88. body>
    89. html>

    5.表单选择器

    注意：$("input")和$(":input")的区别

    1. $("input")：标签选择器，只匹配input标签

    2. $(":input")： 匹配所有 input， textarea， select 和 button 等元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery.js">script>
    7.     
    8.     <script>
    9.         $(function () {
    10.  
    11.             //表单选择器, 将属性选择器进行了简化 [type="xxx"]
    12.             var $text = $(":text");
    13.             console.log($text);
    14.             console.log($("form input:text"));
    15.  
    16.             var $input = $("input:password");
    17.             console.log($input);
    18.             console.log($("form input:password"));
    19.  
    20.             var $input1 = $("input[type='radio']");
    21.             console.log($input1);
    22.             var $input2 = $("input:radio");
    23.  
    24.             var $input2 = $("input:checkbox");
    25.  
    26.             var $input2 = $("input:file");
    27.  
    28.             var $input2 = $("input:submit");
    29.  
    30.             var $input2 = $("input:hidden");
    31.  
    32.             //表单元素选择器
    33.             //所有的input标签
    34.             var $input3 = $("input");
    35.             console.log($input3);
    36.  
    37.             //获取所有表单元素（input, select, textarea, button）
    38.             var $input4 = $(":input");
    39.             console.log($input4);
    40.  
    41.             //用法三：表单状态选择器
    42.             var $selected = $(":selected");//只获取selected
    43.  
    44.             var $checked = $(":checked"); //checked 和 selected 都可以获取到
    45.             console.log($checked);
    46.  
    47.             var $checked1 = $("input:radio:checked");
    48.             console.log($checked1);
    49.  
    50.             var $disabled = $(":disabled");
    51.             console.log($disabled);
    52.         });
    53.     script>
    54. head>
    55. <body>
    56. <form action="" id="form1">
    57.     <input type="hidden" name="id" value="123">
    58.     账号: <input type="text" name="username">
    59.     <br>
    60.     密码: <input type="password" name="password">
    61.     <br>
    62.     生日: <input type="date" name="birthday"><br>
    63.     工资: <input type="text" name="salary"><br>
    64.     性别：<input type="radio" name="sex" value="男">男
    65.     <input type="radio" name="sex" value="女" checked="checked">女 <br>
    66.  
    67.     爱好：<input type="checkbox" name="hobby" value="篮球">篮球
    68.     <input type="checkbox" name="hobby" value="足球">足球
    69.     <input type="checkbox" name="hobby" checked="checked" value="排球">排球
    70.     <input type="checkbox" name="hobby" value="网球">网球 <br>
    71.  
    72.     头像：<input type="file" name="photo"><br>
    73.     <input type="file" name="photo" class="aaa"><br>
    74.     <input type="file" name="photo"><br>
    75.  
    76.     职业：<select name="" id="">
    77.     <option value="程序员">程序员option>
    78.     <option value="公务员" selected="selected">公务员option>
    79.     <option value="律师">律师option>
    80. select>
    81.     <br>
    82.     <button type="reset">重置button>
    83.     自我介绍：<textarea>textarea>
    84.     <br>
    85.     <input type="checkbox"> 勾选同意  <br>
    86.     <input type="submit" value="注册" disabled>
    87. form>
    88. body>
    89. html>

    6. 事件(都是方法)

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery.js">script>
    7.     
    8.     <script>
    9.         $(function () {
    10.             /*
    11.             *  注意:
    12.             *   jQuery中使用事件,需要将js中事件名的on去掉
    13.             *   获得元素节点对象(jQuery对象), 调用事件监听的函数
    14.             *   驱动执行的函数为调用事件函数时传递的函数参数
    15.             * */
    16.             //单击事件
    17.             $("button:first").click(function () {
    18.                 console.log("单击事件触发了")
    19.             });
    20.             //双击事件
    21.             $("button:eq(1)").dblclick(function () {
    22.                 console.log("双击事件触发了")
    23.             });
    24.             //鼠标移入事件
    25.             $("div:first").mousemove(function () {
    26.                 console.log("鼠标移入事件")
    27.             });
    28.             //鼠标移动事件
    29.             $("div:first").mousemove(function () {
    30.                 console.log("鼠标移动事件")
    31.             });
    32.             //鼠标移出事件
    33.             $("div1:first").mouseout(function () {
    34.                 console.log("鼠标移出事件")
    35.             });
    36.             //获得焦点事件
    37.             $("input:first").focus(function () {
    38.                 console.log("获得焦点事件")
    39.             });
    40.             //失去焦点事件
    41.             $("input:first").blur(function () {
    42.                 console.log("失去焦点事件")
    43.             });
    44.             //表单提交事件
    45.             $("form").submit(function () {
    46.                 alert("aa");
    47.                 /*return false会直接结束该事件*/
    48.                 return false;
    49.             });
    50.             //提交按钮监听单击事件
    51.             $("input:submit").click(function () {
    52.                 alert("bb");
    53.                 return true;
    54.             });
    55.         });
    56.     script>
    57. head>
    58. <body>
    59. <button>单击button>
    60. <br>
    61. <button>双击button>
    62. <br>
    63. <div style="height: 100px; width: 100px; background-color: lightblue">div>
    64. <br>
    65. <form action="http://www.baidu.com">
    66.     用户名：<input type="text" name="uname"> <br>
    67.     <input type="submit" value="提交">
    68. form>
    69. body>
    70. html>

    7.动画

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery.js">script>
    7.     
    8.     <script>
    9.         //页面加载自动执行的函数
    10.         $(function () {
    11.             /*隐藏和显示*/
    12.             $("button:eq(0)").click(function () {
    13.                 $("img").hide(3000);
    14.             });
    15.             $("button:eq(1)").click(function () {
    16.                 $("img").show(3000);
    17.             })
    18.             $("button:eq(2)").click(function () {
    19.                 //隐藏时显示,显示时隐藏
    20.                 $("img").toggle(3000);
    21.             })
    22.             //滑动
    23.             $("button:eq(3)").click(function () {
    24.                 $("img").slideUp(3000);
    25.             })
    26.             $("button:eq(4)").click(function () {
    27.                 $("img").slideDown(3000);
    28.             });
    29.             $("button:eq(5)").click(function () {
    30.                 $("img").slideToggle(2000);
    31.             });
    32.             /* 淡入 淡出 */
    33.             $("button:eq(6)").click(function () {
    34.                 $("img").fadeOut(3000);
    35.             });
    36.             $("button:eq(7)").click(function () {
    37.                 $("img").fadeIn(3000);
    38.             });
    39.             $("button:eq(8)").click(function () {
    40.                 $("img").fadeToggle(2000);
    41.             });
    42.             $("button:last").click(function () {
    43.                 if (confirm("是否删除？")) {
    44.                     //...
    45.  
    46.                     $("div:last").slideDown(2000);
    47.                     setTimeout(function () {
    48.                         $("div:last").slideUp(1000);
    49.                     }, 5000)
    50.                 }
    51.             });
    52.  
    53.             $("#go").click(function(){
    54.                 //多长时间内变成什么属性
    55.                 $("#block").animate({
    56.                     width: "500px",
    57.                     height: "500px",
    58.                     fontSize: "10em"
    59.                 }, 3000);
    60.             });
    61.         });
    62.     script>
    63. head>
    64. <body>
    65. <div>
    66.     <img src="2.jpg" alt="" style="height: 150px;width: 150px">
    67. div>
    68. <button>隐藏button>
    69. <button>显示button>
    70. <button>显示|隐藏button>
    71. <hr>
    72. <button>向上滑动button>
    73. <button>向下滑动button>
    74. <button>向上滑动|向下滑动button>
    75. <hr>
    76. <button>淡出button>
    77. <button>淡入button>
    78. <button>淡出|淡入button>
    79. <hr>
    80. <button id="go">Runbutton>
    81. <div id="block">Hello!div>
    82. <br>
    83. 1 zs 18 <button>删除button>
    84. <div hidden style="height: 25px;background-color: lightgray; text-align: center; color: green; font-weight: bold">删除成功div>
    85. <hr>
    86. <span>小说span>
    87. <ol hidden>
    88.     <li>玄幻小说li>
    89.     <li>修真小说li>
    90.     <li>言情小说li>
    91. ol>
    92. <hr>
    93. body>
    94. html>

    8.操作文本节点

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery.js">script>
    7.     
    8.     <script>
    9.         $(function () {
    10.             /* js的方式 */
    11.             var elementById = document.getElementById("d1");
    12.             //innerText(仅操作文本内容)
    13.             var innerText = elementById.innerText;
    14.             console.log(innerText);
    15.             // elementById.innerText = "修改后的内容";
    16.             //innerHtml (操作文本和html)
    17.             var innerHTML = elementById.innerHTML;
    18.             console.log(innerHTML);
    19.             //可以修改文本样式
    20.             /*elementById.innerHTML = "
      修改后的内容
      "*/
    21.  
    22.             /* jQuery方式的操作*/
    23.             var  $d1 = $("#d1");
    24.             //text()方法(仅操作文本内容)
    25.             var text = $d1.text();//获取文本内容(调用text()方法)
    26.             //也可以将jQuery对象转换为dom对象再使用innerText方法获取
    27.             //或者修改
    28.             $d1.text("修改后的"); //修改
    29.  
    30.             //html()（操作文本 和 html）
    31.             var html = $d1.html();
    32.             console.log(html);
    33.  
    34.             $d1.html("
      好
      "      )
    35.  
    36.         });
    37.     script>
    38. head>
    39. <body>
    40. <div id="d1">
    41.     <p>我是p标签p>
    42. div>
    43. body>
    44. html>

    9.操作属性节点

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery.js">script>
    7.     
    8.     <script>
    9.         $(function () {
    10.             /* js 方式操作属性节点*/
    11.             var elementById = document.getElementById("a1");
    12.             //方式一
    13.             //直接获取href属性
    14.             var href = elementById.href;
    15.             console.log(href);
    16.             //修改
    17.             elementById.href = "http://www.4399.com";
    18.             //方式二
    19.             //获取href属性指
    20.             var attribute = elementById.getAttribute("href");
    21.             console.log(attribute);
    22.             //修改
    23.             elementById.setAttribute("href","http://www.baidu.com");
    24.  
    25.             /*  jQuery方式操作属性节点 */
    26.             //方式一: attr()-> 返回属性值,没有属性返回undefined
    27.             var $a1 = $("#a1");
    28.             //获取
    29.             var jQuery = $a1.attr("href");
    30.             console.log(jQuery);
    31.             //修改
    32.             $a1.attr("href", "http://www.baidu.com");
    33.  
    34.             //方式二 : prop() -> 返回属性值.
    35.             //与attr的不同点:获取时 disabled，checked，readonly，selected，... 返回布尔值
    36.             //设置时 disabled，checked，readonly，selected，... 设置布尔值
    37.             var prop = $a1.prop("href"); //获取
    38.             console.log(prop);
    39.             $a1.prop("href", "http://www.jd.com"); //修改
    40.  
    41.  
    42.             var attr1 = $("input:eq(0)").attr("checked"); //checked
    43.             console.log(attr1);
    44.  
    45.             var prop1 = $("input:eq(0)").prop("checked"); //true
    46.             console.log(prop1);
    47.  
    48.             $("input:eq(2)").click(function () {
    49.                 //判断按钮形状
    50.                 if ($("input:eq(3)").prop("disabled")){
    51.                     //激活
    52.                     $("input:eq(3)").prop("disabled",false);
    53.                 }else {
    54.                     //禁用
    55.                     $("input:eq(3)").prop("disabled",true);
    56.                 }
    57.             });
    58.             /* 移除属性值 */
    59.             //$("input:eq(0)").removeAttr("type");
    60.             //$("input:eq(1)").removeProp("type");
    61.  
    62.             //方式三：专用于value属性的操作
    63.             var val = $("input:eq(0)").val();
    64.             console.log(val);
    65.             $("input:eq(0)").val("不详");
    66.             console.log(val);
    67.         })
    68.     script>
    69. head>
    70. <body>
    71. <a id="a1" href="http://www.baidu.com">跳转a>
    72. <hr>
    73. <input type="radio" name="sex" value="男" checked> 男
    74. <input type="radio" name="sex" value="女"> 女
    75. <hr>
    76. <input type="checkbox"> 勾选同意 <br>
    77. <input type="submit" disabled>
    78. body>
    79. html>

    10.操作元素节点

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery.js">script>
    7.     
    8.     <script>
    9.         var i = 1;
    10.         $(function () {
    11.             $("button:eq(0)").click(function () {
    12.                 //1.创建元素节点
    13.                 var $a = $("百度");
    14.                 //2.添加到指定位置
    15.                 //添加为子元素
    16.                 //在div的末尾添加
    17.                 $("div").append($a);
    18.                 $a.appendTo($("div"));
    19.                 //在div的前面添加
    20.                 $("div").prepend($a);
    21.                 $a.prependTo($("div"));
    22.  
    23.                 //添加为平级元素,前置
    24.                 $("div").before($a);
    25.                 /*$a.insertBefore($("div"));*/
    26.                 //添加为平级元素,后置
    27.                 $("div").after($a);
    28. /*
    29.                 $a.insertAfter($("div"));
    30. */
    31.  
    32.                 //获取父节点
    33.                 //parent()
    34.                 $("button:eq(1)").click(function () {
    35.                     var parent = $("div").parent();
    36.                     console.log(parent);
    37.                 });
    38.             })
    39.         })
    40.  
    41.         function f1() {
    42.             //删除一整个
    43.             $("p:eq(0)").remove(); //删除元素节点
    44.         }
    45.  
    46.         function f2() {
    47.             //只删除子节点
    48.             $("p:eq(0)").empty(); //删除子元素节点
    49.         }
    50.     script>
    51. head>
    52. <body>
    53. <button>添加一个超链接button>
    54. <button>获取父元素节点button>
    55. <button onclick="f1()">删除元素节点button>
    56. <button onclick="f2()">删除子元素节点button>
    57. <hr>
    58. <div style="height: 100px; background-color: lightblue">
    59.     <span>我是divspan>
    60. div>
    61. <hr>
    62. <p>
    63.     <span>sp1span>
    64.     <span>sp2span>
    65.     <span>sp3span>
    66. p>
    67. <p >
    68.     <span>sp4span>
    69.     <span>sp5span>
    70.     <span>sp6span>
    71. p>
    72. body>
    73. html>

    11.操作css样式

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery.js">script>
    7.     <style>
    8.         .aa{
    9.             height: 150px;
    10.             width: 150px;
    11.             border: 1px solid black;
    12.         }
    13.         .bb{
    14.             height: 350px;
    15.             width: 350px;
    16.         }
    17.     style>
    18.     <script>
    19.         $(function () {
    20.             $("img:eq(1)").mouseover(function () {
    21.                 $(this).removeClass("aa");
    22.                 $(this).addClass("bb");
    23.             })
    24.             $("img:eq(1)").mouseout(function () {
    25.                 $(this).removeClass("bb");
    26.                 $(this).addClass("aa");
    27.             })
    28.         })
    29.     script>
    30. head>
    31. <body>
    32. <img id="img" src="2.jpg" class="aa">
    33. <hr>
    34. <img src="2.jpg" class="aa" alt="">
    35. body>
    36. html>

    12.表单验证

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script src="js/jquery.js">script>
    8.     <style>
    9.         .err{
    10.             font-size: 12px;
    11.             color: red;
    12.             font-weight: bold;
    13.         }
    14.         .ok{
    15.             font-size: 12px;
    16.             color: green;
    17.             font-weight: bold;
    18.         }
    19.     style>
    20.     <script>
    21.         $(function () {
    22.             $(".inp:eq(0)").blur(function () {
    23.                 /*
    24.                 正则表达式
    25.                 中文,字符,_,数字
    26.                 长度7~9位
    27.                 必须是大写字母开头
    28.                 */
    29.                 var reg = /^[A-Z][\w\u4e00-\u9fa5]{6,8}$/;
    30.                 //获取用户输入的内容
    31.                 var val = $(this).val();
    32.                 if (val == "" || val == null){
    33.                     $(this).parent().next().html("用户名不能为空")
    34.                 }else if (!reg.test(val)){
    35.                     $(this).parent().next().html("用户名不合法")
    36.                 }else {
    37.                     $(this).parent().next().html("用户名合法")
    38.                 }
    39.             })
    40.             $(".inp:eq(1)").blur(function () {
    41.                 var val = $(this).val();
    42.                 if (val == "" || val == null){
    43.                     $(this).parent().next().html("密码不能为空")
    44.                 }
    45.             })
    46.             $(".inp:eq(2)").blur(function () {
    47.                 var val = $(this).val();
    48.                 if (val == "" || val == null){
    49.                     $(this).parent().next().html("手机号不能为空")
    50.                 }
    51.             })
    52.             $(".inp:eq(3)").blur(function () {
    53.                 var val = $(this).val();
    54.                 if (val == "" || val == null){
    55.                     $(this).parent().next().html("邮箱不能为空")
    56.                 }
    57.             })
    58.  
    59.             $("#ck").click(function () {
    60.                 var jQuery = $("#btn").prop("disabled");
    61.                 if (jQuery){
    62.                     $("#btn").prop("disabled",false);
    63.                 }else {
    64.                     $("#btn").prop("disabled",true);
    65.                 }
    66.             })
    67.  
    68.  
    69.         })
    70.     script>
    71. head>
    72. <body>
    73. <div style="text-align: center">
    74.     <h2>注册页面h2>
    75.     <hr>
    76.     <form action="https://www.baidu.com" method="get">
    77.         <table align="center">
    78.             <tr>
    79.                 <td>用户名：td>
    80.                 <td><input class="inp" type="text" name="username" id="username">td>
    81.                 <td>td>
    82.             tr>
    83.             <tr>
    84.                 <td>密码：td>
    85.                 <td><input class="inp" type="password" name="password" id="password">td>
    86.                 <td><span id="sp2" class="err" hidden>密码不合法span>td>
    87.             tr>
    88.             <tr>
    89.                 <td>手机号：td>
    90.                 <td><input class="inp" type="text" name="phone" id="phone">td>
    91.                 <td><span id="sp3" class="err" hidden>手机号不合法span>td>
    92.             tr>
    93.             <tr>
    94.                 <td>邮箱：td>
    95.                 <td><input class="inp" type="text" name="email" id="email">td>
    96.                 <td><span id="sp4" class="err" hidden>邮箱不合法span>td>
    97.             tr>
    98.  
    99.             <tr>
    100.                 <td>性别：td>
    101.                 <td align="left">
    102.                     <input type="radio" name="sex" checked> 男
    103.                     <input type="radio" name="sex"> 女
    104.  
    105.                 td>
    106.             tr>
    107.             <tr>
    108.                 <td>爱好：td>
    109.                 <td align="left">
    110.                     <input  type="checkbox" name="hobby" checked> 学习
    111.                     <input type="checkbox" name="hobby" checked> 整天学习
    112.                 td>
    113.             tr>
    114.             <tr>
    115.                 <td colspan="2"><input id="ck" type="checkbox"> 同意协议td>
    116.                 <td>td>
    117.             tr>
    118.             <tr>
    119.                 <td colspan="2">
    120.                     <input type="submit" id="btn" value="注册" disabled>
    121.                     <input type="reset">
    122.                 td>
    123.             tr>
    124.         table>
    125.     form>
    126. div>
    127. body>
    128. html>

  • 相关阅读:
    二、数据库查询语句(多表查询篇)
    高压放大器在软体机器人领域的应用
    ElasticSearch之Windows中环境安装
    软件测试基础——功能测试，软件测试提升完整指南
    LeetCode热题100——动态规划
    体验亚马逊的 CodeWhisperer 感觉
    解密前端三巨头：HTML、CSS和JavaScript的关系
    SpringCloud 服务治理：Eureka、Consul、Nacos
    （动手学习深度学习）第13章 实战kaggle竞赛：狗的品种识别
    1200*C. Make It Good（二分 || 贪心）
  • 原文地址：https://blog.csdn.net/m0_59163770/article/details/133580656