Day06-jQuery02
来源：互联网 发布：传奇霸业法师武魂数据 编辑：程序博客网 时间：2024/06/09 06:23
昨日要点提点：
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;获取namejs中描述一个对象：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 可以手动调整其位置。在代码中自动调整。
全代码：
<!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">>></a></p> <p><a href="#" id="addAll">>>></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"><<</a></p> <p><a href="#" id="removeAll"><<<</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>阅读全文
0 0
- Day06-jQuery02
- jquery02
- jquery02
- day06
- Day06
- day06
- day06
- day06
- day06
- day06
- day06
- day06
- day06
- Day06
- day06
- day06
- Jquery02选择器
- jquery02总结
- MySQL的几个概念：主键，外键，索引，唯一索引
- Git的详细使用
- HMM学习最佳范例：维特比算法（Viterbi Algorithm）
- 原生js封装获取上/下一个兄弟节点
- jq淡入淡出轮播图
- Day06-jQuery02
- 数据库设计
- Python-生成器
- jQuery<5.2>
- Android studio 编译过程中 遇到的gralde文件编译的问题
- vue学习：编辑器Atom配置语法高亮
- DRUID- Historical节点数据高可用配置
- 代码运行 出现 use of unresolved identifier“xxxxVC”
- Java编程思想第四版-第四章（控制执行流程 ）笔记
