Day06-jQuery02

最新推荐文章于 2024-07-17 13:55:08 发布

jjizh

最新推荐文章于 2024-07-17 13:55:08 发布

阅读量229

点赞数

分类专栏： java学习随记文章标签： jquery

本文链接：https://blog.csdn.net/jjizh/article/details/73089280

版权

java学习随记专栏收录该内容

47 篇文章 0 订阅

订阅专栏

昨日要点提点：
1）jQuery的对象有length属性和size属性
这两个属性的效果其实是一样的，都是返回jQuery对象中元素的个数。一般情况可以互换。

2）如果错误提示到了导入的源码，例如我们导入的js文件或者jquery文件中的时候，说明源码错误了，尝试换一换导入源码的版本或其他文件试试。

3）jQuery中的val（）函数只能获取和设置表单中标签的value属性，也就是针对option和input的value才有用。
html（）相当于js中的innerHTML，而text（）相当于js中的innerText；

4）jQuery中事件如果绑定在父标签，那么子标签统统都会绑定这个事件。

5）font标签的strong标签，加粗

6）属性选择器的属性值其实可以不加“”引号的。

7）removeAttr（“属性名” ），移除某种属性，属性名字不可以省略

<script>
     $(function() {
        $("div").css("background-color", "cadetblue");
        $("div").css("color", "red");
        $("img").removeAttr("border");
     })
</script>

<body>
      <div>
         ahhahaha
      <img src="../../img/js/1.jpg" border="2px"/>;
      </div>
</body>

8）$left_select是通过id获取的js对象，然后再通过$符号转换成为的jQuery对象。同时，select也是一个父类的对象，它的下级存在子类option标签。在进行事件绑定的时候，$left_select会为其所有的子类标签都绑定相同的子类事件
而直接用this获取的时候，是获取到的这个select对象本身的js对象，可以用.value直接获取它的属性值，也就是被选中的值。

今日注意要点：
1）jQuery中绑定事件的时候，如果是绑定在父类标签上面，那么父类下的所有子类都会同步获得该绑定事件。

2）js对象中，获取length长度需要注意的点
如果是在select标签中，获取到该选择标签的jQuery对象，直接打印它的长度
js中，select标签中，获取的是数组长度，length打印的是数组长度
获取方式：var test = document.getElementById();
或者通过jQuery对象转化而成，如： $(“#id”)[0]
jQuery中，获取到父类标签的话，就是父类标签本身，length长度为1；

2）在select中，如果用jQuery获取select对象的话，虽然绑定事件可以绑定到select下方的每一个option上，但是在获取长度的时候，长度为1，因此在获取用jQuery获取的select的下方的option元素的时候，要转化为js对象。
一般情况下，选择器能够写的精确一点就写的精确一点，比如上述的$left_select可以写成是$（selectLeft option），这样精确到子类option标签后能避免很多错误。

3）表单属性选择器：
如果select表单中被选中的，也就是存在selected属性的，就会被选择器选择出来。
用法有点类似过滤选择器。

$("#add").click(function() {
     $("#selectLeft option:selected").each(function(index, element) {
            $("#selectRight").append(element);
     });
})
$("#remove").click(function() {
      $("#selectRight option:selected").each(function(index, element) {
            $("#selectLeft").append(element);
      });
})

4）添加事件的时候，选择器能够精确就尽量做到精确。避免错误
虽然父类selectLeft可以遍历添加双击事件，但是最后用层级选择器做到精确一点。

$("#selectLeft").mouseover(function() {
      $("#selectLeft option").dblclick(function() {
      $("#selectRight").append(this);
      })
});

$("#selectRight").mouseover(function() {
     $("#selectRight option").dblclick(function() {
     $("#selectLeft").append(this);
      })
});

事件的切换

toggle()方法

第一种用法：toggle（speed ， callback）
toggle()，显示隐藏的切换开关，切换某个标签的显示与隐藏

 $("#btn").click(function(){
      $("#img").toggle(1000);
 }    //控制图片的显示和隐藏。

第二种用法：toggle（函数1，函数2，函数3 ……）；
toggle里面写多个function（）{}，就相当于一个加强版的click事件，可以设置点击切换多个事件，执行多个函数。（相当于一个加强版的click事件，可以绑定多个function来执行每次点击的操作）
导入jQuery文件的时候导入1.8版本，不然会出错。

          <script>
                  $(function() {
                        $("#test").toggle(
                              function() {
                                    $("body").css("background-color", "green");
                              },
                              function() {
                                    $("body").css("background-color", "red");
                              },
                              function() {
                                    $("body").css("background-color", "yellow");
                              },
                              function() {
                                    $("body").css("background-color", "orange");
                              }
                        );
                  })
            </script>

hover()方法

 hover（函数1，函数2）；
 函数1表示鼠标移入时发生的事件
 函数2表示鼠标移出时发生的事件
 这个就相当于mouseover和mouseout事件的结合。

            $(function(){
                  $("#test").hover(
                        function(){
                              $("body").css("background-color","red");
                        },
                        function(){
                              $("body").css("background-color","aqua");
                        }
                  );
            })
      </script>

jQuery对对象的值进行操作

一、val()，应用在获取和设置表单中的标签的value属性。（其他的标签不内置value属性）

val(),获取对象的value属性。
val(“属性值”)，设置对象的value属性

二、html()，应用在获取和设置非空标签的标签体中的html内容

html(),获取对象标签体中的html内容
html(“html内容”)，设置对象的标签体中的html内容，自动解析html标签

三、text(),应用在获取和设置非空标签的标签体中的文本内容

text(),获取对象标签体中的文本内容
text(“文本内容”)，设置对象标签体中的文本内容，不解析html标签。

jQuery遍历

第一种方法：
循环方法

var $ipts = $("input");
for(var i=0;i<$ipts.length;i++){
     alert($ipts[i].value);
}

第二种方法：each方法
常用写法：

$("#id").each(function(i,o){})

$ipts.each( function(index,element){
     alert(index + ","+ element.value);
)

i(index)表示遍历到的各个对象的下标
o(element)表示遍历到的各个对象、元素
在each中，this代表当前遍历的对象，就是element。（dom对象）

不常用写法（1）

$ipts.each(function(){
     alert(this.value);
)

不常用写法（2）
* $.each(数组对象，function(i,o){})

$.each( $ipts , function(index,element){
     alert(index + ","+ element.value);
)

文档处理(重要)

A.append(B):将B插入到A标签的内部的后面（A标签必须是jQuery对象，而B标签可以是String，Element，jQuery）
A.prepend(B):将B插入到A标签内部的前面（B标签可以是String，Element，jQuery）
A.appendTo(B):将A插入B标签的内部的后面（A标签可以是String，Element，jQuery）
A.prependTo(B):将A插入B标签内部的前面（A标签可以是String，Element，jQuery）
A.insertBefore(B):将A添加到B的前面（A标签可以是String，Element，jQuery）
A.insertAfter(B):将A添加到B的后面（A标签可以是String，Element，jQuery）

详解：
A.append(B)
B为html字符串，String,Element,jQuery对象，A必须是jQuery对象。

B.appendTo（A）
把B添加到A中的最后面。
appendTo是jQuery的方法，只能由jQuery对象进行调用。所以字符串B需要转化为jQuery对象。

A.prepend（B）
将B添加到A的最前面。

B.prependTo(A)
B被添加到A的最前面；

A.insertBefore（B）
a添加到b的前面。js中有一个同名的函数，但是需要传入两个参数。

A.insertAfter（B）
a添加到b的后面。js中没有添加到后面的方法哦

json格式

在Java中我们要描述一个person,就得将Person封装成一个对象，将Person的属性抽取成成员变量。
public class Person{
private String name;
private int age;
}
在js中可以用json来描述一个person

json的语法：key不需要用双引号引起来，value如果是string类型就需要使用双引号，如果不是string类型的话就不用引起来

json的键值对和键值对之间必须要用，分隔开。最后一个可以省略，但是最好添加上去。
{key1:value1 , key2:value2 , key3:value3 };

              var person = {name:"张三",age:18，address:"深圳"}
              person.name;获取name

js中描述一个对象：json格式

js数组中可以存放任何数据，那么自然，js数组中可以存放json格式的数据；

json中的value可以是任意类型，当然也能够使json类型。

validation校验（使用第三方框架validation进行表单校验）

jQuery成熟插件有很多，validation就是其中一个插件。
（插一句：js其他框架推荐：nodejs，react）

下载地址

官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
帮助文档地址：http://jqueryvalidation.org/documentation/

引入

直接拷贝下载好的库文件到js目录中，然后像引入jQuery一样引入
validation要引用之前必须呀先引用jQuery才能够使用，本质上它就是一个js文件。

    <head>
            <meta charset="UTF-8">
            <title>validation表单校验</title>
            <script src="../../js/jquery-1.11.0.js" type="text/javascript"></script>
            <script src="../../js/jquery.validate.js" type="text/javascript"></script>
            <script>
                  $(function(){

                  })
            </script>
      </head>

validate（）找到表单
注意这种写法仅仅只是找到表单，并没有进行校验规则的设定，所以不起到校验功能。

校验：

 validation的校验：
 username和password表示某个标签的name属性的属性值。
 required表示该选项是一定要填的，不能够为空。
 规则：rules
 中文提示：messages
      messages和rules是统一级别，写在同一层。rules怎么写就怎么写messages

 dateISO验证日期格式
 格式为年/月/日

 加出来的label的错误的类是error
 可以手动调整其位置。在代码中自动调整。

This field is required.
性别必须选择

全代码：

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>validation表单校验</title>
            <style>
                  .error {
                        color: red;
                  }    
                    //这个用于设置错误提示信息的格式。
            </style>

            <script src="../../js/jquery-1.11.0.js" type="text/javascript"></script>
            <script src="../../js/jquery.validate.js" type="text/javascript"></script>
            <script>
                  $(function() {
                        $("#myForm").validate({     //找到表格
                              rules: {               //设置校验规则
                                    username: {
                                          required: true,     //表明这个必填
                                          rangelength: [6, 12],     //位数区间
                                          digits: true,               //全是数字
                                    },
                                    password: {
                                          required: true,
                                          //rangelength:[6,12],
                                          maxlength: 12,          //最大的长度
                                          minlength: 6,          //最小长度
                                    },
                                    repassword: {
                                          required: true,
                                          rangelength: [6, 12],
                                          equalTo: "[name='password']",     //和已经输入的项进行比较。
                                    },
                                    sex: "required",          //只有一个校验规则的时候可以直接这样写。
                                    email: {
                                          required: true,
                                          email: true,        //校验邮箱地址。
                                    },
                                    name: {
                                          required: true,
                                    },
                                    birthday: {
                                          required: true,
                                          dateISO: true,     //校验日期格式，iso格式，就是 年/月/日 格式
                                    },
                              },
                              messages: {
                                    username: {
                                          required: "请输入用户名",
                                          rangelength: "用户名长度为{0}-{1}",   //{0}和{1}分别表示第一个元素和第二个元素。
                                          digits: "用户名必须为整数",
                                    },
                                    password: {
                                          required: true,
                                          //rangelength:[6,12],
                                          maxlength: "用户名最大长度为{0}",
                                          minlength: "用户名最小长度为{0}",
                                    },
                                    repassword: {
                                          required: "请再次输入密码",
                                          rangelength: "密码长度为{0}-{1}",
                                          equalTo: "两次输入的密码不一致",
                                    },
                                    sex: "请选择性别",
                                    email: {
                                          required: "请输入邮箱地址",
                                          email: "请输入有效的邮箱格式",
                                    },
                                    name: {
                                          required: "请输入用户名",
                                    },
                                    birthday: {
                                          required: "请输入生日，格式为  年/月/日",
                                          dateISO: "日期格式为 年/月/日",
                                    },
                              },

                        });
                  })
            </script>
      </head>
      <div class="content">
            <div style="position: absolute;left:0px;top:150px;background-color: white;border:5px solid gray;width: 700px;height: 500px;">
                  <h3>用户注册</h3>
                  <form id="myForm" action="#" method="post">
                        <table width="100%" height="100%" border="0" align="center" cellspacing="10">
                              <tr>
                                    <td>用户名</td>
                                    <td><input type="text" id="username" name="username" placeholder="请输入用户名" /></td>
                              </tr>
                              <tr>
                                    <td>密码</td>
                                    <td><input type="password" id="password" name="password" /></td>
                              </tr>
                              <tr>
                                    <td>确认密码</td>
                                    <td><input type="password" name="repassword" /></td>
                              </tr>
                              <tr>
                                    <td>性别</td>
                                    <td><input type="radio" name="sex" value="男" />男
                                          <input type="radio" name="sex" value="女" />女
                                          <label for="sex" style="display: none;" generated="true" class="error">性别必须选择</label></td>
                                          <!--上面手动加上 style = “display：none；”，其他的元素在发生校验不通过的时候自动生成，改变上述代码的位置可以调整显示位置-->
                              </tr>
                              <tr>
                                    <td>Email</td>
                                    <td><input type="text" name="email" /></td>
                              </tr>
                              <tr>
                                    <td>姓名</td>
                                    <td><input type="text" name="name" /></td>
                              </tr>
                              <tr>
                                    <td>生日</td>
                                    <td><input type="text" name="birthday" /></td>
                              </tr>
                              <tr>
                                    <td>籍贯</td>
                                    <td>
                                          <select id="province">
                                                <option value="">-请选择-</option>
                                                <option value="0">吉林省</option>
                                                <option value="1">山东省</option>
                                                <option value="2">河北省</option>
                                                <option value="3">江苏省</option>
                                          </select>

                                          <select id="city">

                                          </select>
                                    </td>
                              </tr>
                              <tr>
                                    <td>验证码</td>
                                    <td><input type="text" name="checkcode" size="10" /></td>
                              </tr>
                              <tr>
                                    <td colspan="2">
                                          <input type="submit" value="注册" />
                                    </td>
                              </tr>
                        </table>
                  </form>
            </div>
      </div>

      <body>
      </body>

</html>

案例1：二级联动

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>jQuery完成省市二级联动</title>
      </head>
      <script src="../../js/jquery-1.11.0.js" type="text/javascript"></script>
      <script>
            // 定义二维数组：
            var datas = [
                  ["长沙市", "岳阳市", "衡阳市", "益阳市", "邵阳市"],
                  ["广州市", "深圳市", "东莞市", "惠州市", "佛山市"],
                  ["文山市", "昆明市", "大理市", "玉溪市", "西双版纳"],
                  ["武汉市", "荆州市", "襄阳市", "黄冈市", "仙桃市"]
            ];
            $(function(){
                  $left_select = $("#province");
                  $right_select = $("#city");

//                $left_select.change(function(){
//                      var cityArr = datas[this.value];
//                      $right_select.html("");
//                      $(cityArr).each(function(index,element){
//                            $right_select.append("<option value="+index+">"+element+"</option>)");
//                      });
//
//                });

                  $left_select.change(function(){
                        var cityArr = datas[this.value];
                        var content = "";
                        $(cityArr).each(function(index,element){
                              content += "<option value="+index+">"+element+"</option>)";
                        });
                        $right_select.html(content);
                  })
            })
      </script>

      <body>
            <select id="province" >
                  <option value="">----请-选-择-省----</option>
                  <option value="0">湖南省</option>
                  <option value="1">广东省</option>
                  <option value="2">云南省</option>
                  <option value="3">湖北省</option>
            </select>

            <select id="city">
            </select>
      </body>

</html>

案例2：左右选择

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>左右选择案例</title>
      </head>
      <script src="../../js/jquery-1.11.0.js" type="text/javascript"></script>
      <script>
            $(function() {
                  $("#selectLeft").mouseover(function() {   //动态为左边的框中的元素添加点击事件，避免新添加的元素无法及时获得点击事件
                        $("#selectLeft option").dblclick(function() {     //选择器能够精确写就精确写最好，避免出现莫名其妙的问题。
                              $("#selectRight").append(this);
                        })
                  });

                  $("#selectRight").mouseover(function() {
                        $("#selectRight option").dblclick(function() {
                              $("#selectLeft").append(this);
                        })
                  });

                  $("#add").click(function() {
                        $("#selectLeft option:selected").each(function(index, element) {
                              $("#selectRight").append(element);
                        });
                  })
                  $("#remove").click(function() {
                        $("#selectRight option:selected").each(function(index, element) {
                              $("#selectLeft").append(element);
                        });
                  })

                  $("#addAll").click(function() {
                        $("#selectLeft option").each(function(index, element) {
                              $("#selectRight").append(element);
                        });
                  })
                  $("#removeAll").click(function() {
                        $("#selectRight option").each(function(index, element) {
                              $("#selectLeft").append(element);
                        });
                  })

            })
      </script>

      <body>
            <table border="1" width="400" align="center">
                  <tr>
                        <td>
                              分类名称
                        </td>
                        <td>
                              <input type="text" name="cname" value="手机数码" />
                        </td>
                  </tr>
                  <tr>
                        <td>
                              分类描述
                        </td>
                        <td>
                              <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
                        </td>
                  </tr>
                  <tr>
                        <td>
                              分类商品
                        </td>
                        <td>
                              <span style="float: left;">
                                    已有商品<br/>
                                    <select id="selectLeft" multiple>
                                          <option>IPhone6s</option>
                                          <option>小米4</option>
                                          <option>锤子T2</option>
                                    </select>
                                    <p><a href="#" id="add">&gt;&gt;</a></p>
                                    <p><a href="#" id="addAll">&gt;&gt;&gt;</a></p>
                              </span>
                              <span style="float: right;">
                                    未有商品<br/>
                                    <select id="selectRight" multiple="multiple">
                                          <option>三星Note3</option>
                                          <option>华为6s</option>
                                    </select>
                                    <p><a href="#" id="remove">&lt;&lt;</a></p>
                                    <p><a href="#" id="removeAll">&lt;&lt;&lt;</a></p>
                              </span>
                        </td>
                  </tr>
                  <tr>
                        <td colspan="2">
                              <input type='submit' value="修改" />
                        </td>
                  </tr>
            </table>
      </body>

</html>

案例3：点击切换页面背景不同颜色。至少三种颜色。

<!DOCTYPE html>
<html>

      <head>
            <meta charset="UTF-8">
            <title>toggle函数里面执行多个函数切换背景颜色</title>
            <script src="../../js/jquery-1.8.3.js" type="text/javascript"></script>
            <script>
                  $(function() {
                        $("#test").toggle(
                              function() {
                                    $("body").css("background-color", "green");
                              },
                              function() {
                                    $("body").css("background-color", "red");
                              },
                              function() {
                                    $("body").css("background-color", "yellow");
                              },
                              function() {
                                    $("body").css("background-color", "orange");
                              }
                        );
                  })
            </script>
      </head>

      <body>
            <input type="button" id="test" value="点击我切换颜色" />
      </body>

</html>