上期回顾
就绪函数
jQuery(document).ready(function(){
});
$(function(){});//简写
事件：和js 比较jQuery要去掉on
//取值
document.getElementById().value;
$(”选择器”).val();
//赋值
document.getElementById().value = ?;
$(”选择器”).val(?);
“我是空格” 获取跨层级子孙元素。
基本选择器
ID
CLASS
标签
层级选择器
> 子标签
+ 同级下的下一个兄弟标签
~ 同级下的所有兄弟标签
过滤选择器
:first
:last
:eq(index)
:lt(index) <
:gt(index) >
:even 偶数
:odd 奇数
属性选择器
[属性名=’属性值’]
[属性名！=’属性值’]
[属性名$=’我是字符串’] 后缀包含
表单选择器
禁用：disabled
激活：enabled
被点击：checked
被选择：selected
jQuery特效
show(time,fn) | hide(time,fn) 单位 毫秒
fadeIn() | fadeOut | fadeToggle
slideDown() | slideUp | slideToggle
jQuery 操作css
对象.css(”属性名”,”属性值”)
对象.addClass()
对象.removeClass()
this关键字
关于this关键字的使用。https://www.cnblogs.com/diantao/p/4514238.html
$(this) | this
两个获取的都是对象但是不同，使用的时候必要时可相互转换。
var obj1 = document.getElementById(?);
var obj2 = $(”#?”);
$(this)这个是jQuery读取对象的方式，所以后面只能书写jQuery的形式
this 的形式是直接从循环或者事件中读取JavaScript对象。 操作的时候必须使用JavaScript的形式进行操作
案例：表格的全选/全不选功能
- 给按钮绑定点击事件
- 获取除表头中选框之外的所有选框对象
- 分别给一下获取的选框修改属性 checked
- 想办法保证表头的选择的状态和下面的选框状态一致。
- attr和prop的使用：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
//实现表格的全选全不选功能
$(function(){//就绪函数一定要写
$(".firstcheck").click(function(){//通过类名获取对象，绑定click事件，事件中再写一个匿名函数来实现该事件的功能
var s1=this.checked;//获取click绑定的标签的是否选中的状态,this是js中的，可以直接调用属性，返回的是true或false，也可以写成jQuery形式，如下
// var s1 = $(this).prop("checked");//不能用attr，这两个是有点差别的
$("[name='subcheck']").prop("checked",s1);//把这个状态赋值给获取到的所有子标签的checked属性
//实现获取到选中标签的值的效果
});
//定义事件，点击标签之后执行后续操作，获取值的操作必须放到该事件里面，否则会报错
$("#bu").click(function(){
//获取所有name=checked并且为状态为checked的标签的对象，不能直接获取val()，因为他是一个值的数组，只会显示第一个的值，
var s2=$("[name='subcheck']:checked");
var s3="";
s2.each(function(){//遍历s2这个对象数组
s3+=","+$(this).val();//字符串拼接或者这种写法s3+=","+this.value;
});
s3=s3.substring(1);//字符串截取，可以只写开始，意味着从这个位置开始截取到最后一个；
alert(s3);
});
});
</script>
</head>
<body>
<center>
<table border="2px" cellspacing="0" cellpadding="5px">
<tr>
<input type="button" id="bu" value="batchDelete" /><br /><br />
<th><input type="checkbox" name="firstcheck" class="firstcheck" value="0" /></th>
<th>角色</th>
<th>技能</th>
</tr>
<tr>
<td><input type="checkbox" name="subcheck" id="subcheck1" value="悟空" /></td>
<td align="center">孙悟空</td>
<td>龟派气功，元气弹，瞬间移动，超级赛亚人4</td>
</tr>
<tr>
<td><input type="checkbox" name="subcheck" id="subcheck2" value="贝吉塔" /></td>
<td align="center">贝吉塔</td>
<td>超级赛亚人4，超级赛亚人3</td>
</tr>
<tr>
<td><input type="checkbox" name="subcheck" id="subcheck3" value="克林" /></td>
<td align="center">克林</td>
<td>元气斩</td>
</tr>
<tr>
<td><input type="checkbox" name="subcheck" id="subcheck4" value="比克" /></td>
<td align="center">比克</td>
<td>魔贯光杀炮</td>
</tr>
<tr>
<td><input type="checkbox" name="subcheck" id="subcheck5" value="悟饭" /></td>
<td align="center">悟饭</td>
<td>潜力股</td>
</tr>
</table>
</center>
</body>
</html>案例：联动效果
对象.html() //以HTML形式获取或者填充
对象.text() //以文本形式获取或者填充
对象.each(匿名函数) //可以遍历对象
$.each(数组，function（index，value）) 循环的使用 // 可以直接循环数组
思路
- 两个数组 省级数组一维，市级信息是二维的。
- 将省级信息填充到省级下拉列表中
- 省级下拉列表绑定change事件
- 获取省级当前选中的value值
- 根据value值取到对应的市级数组
- 将找到的市级信息填充到市级下拉列表中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<style type="text/css">
select{
width: 200px;
}
div{
font-family: "楷体";
font-size: 20px;
color: blue;
}
</style>
<script>
$(function(){
//1.创建省市数组
var province_arr=["内蒙古自治区","广东省","河北省","北京市"];
var city_arr=[["呼和浩特市","包头市","赤峰市","锡林郭勒盟"],["东莞市","佛山","珠海","深圳","中山"],["石家庄","保定","邯郸","唐山"],["朝阳区","海淀区","丰台区","大兴区"]];
//2.绑定省中的内容
var province_arr_str="<option value=''>===请选择===</option>"; //网页一加载默认显示的内容，注意在双引号里面不能再出现双引号，如需要，用单引号代替
/*$.each(arr,function(index,value))方法，可直接遍历数组，内含两个参数，一个是要遍历的数组，一个是回调的函数，
回调函数中又包含了两个参数，一个是下标索引，一个是该索引对应的值*/
$.each(province_arr,function(index,value){
province_arr_str+=("<option value='"+index+"'>"+value+"</option>");//输出的效果是 “<option value="index">value<option>”
});
$("#province").html(province_arr_str);//把option标签的内容添加到selected下
/*3.给省级标签绑定事件，思路是当省级标签被选择后内容发生改变要用change，click也可以，当发生改变时就获取当前
发生改变的这个索引,然后去二维数组中获取该下表的值,显示在市级标签上,这就完成了联动*/
$("#province").change(function(){
var province_current_index=$(this).val();
city_arr_detail=city_arr[province_current_index];//根据当前省级下标获取对应的二维市级数组中的一维数组
/*4.使用获得的省级标签的下标调用对应的市级标签之后，遍历该一维数组并拼接字符串放到市级标签下*/
var city_arr_str="<option value=''>===请选择===</option>";
$.each(city_arr_detail,function(index,value){
city_arr_str+=("<option value='"+index+"'>"+value+"</option>");
});
//5.填充进市级标签中
$("#city").html(city_arr_str);
});
});
</script>
</head>
<body>
<center>
<div>省市联动</div>
<select id="province" value="省"></select>
<select id="city" value="市">
<option value=''>===请选择1===</option><!--会被覆盖掉-->
<!--这里必须得写，为什么第一个不用写呢？因为第一个在加载之后就默认显示了不用什么东西来调用它，而这里的请
选择是需要change事件来调用他的所以必须在这里就写出来，否则网页加载出来后第二个下拉框是没有默认值的-->
</select>
</center>
</body>
</html>
表单校验（jQuery插件）validate.js
validate校验的意思 validate.js是jQuery的一个插件，帮助我们快速的检查当前表单中的内容是否合法。
注意1：插件使用的时候依赖jQuery.js 并且引入时必须放在jQuery.js之后。顺序：jQuery--validate--汉化包
注意2：为了能够让validate生效，必须在就绪函数中书写。
给当前表单添加验证插件
案例代码
总结
jQuery循环遍历操作
- $对象.each(function(){}); //有jquery对象时用
- $.each(arr,function(index,value){}); //数组时使用
$(this) | this 的异同
相同点：都是对象
不同点
$(this) 返回的是jQuery对象，之后的操作只能是jquery语法，this返回的是JavaScript，只能使用js语法操作。
转化
jquery 转 js：$对象[*]
js 转 jquery$：(js对象)
案例：全选全不选
使用jquery操作属性
attr[attribute] 1.6之前方法，存在兼容性问题
prop[properties] 主流
$对象.prop(”属性名”); //获取属性
$对象.prop(”属性名”,”属性值”); //赋值
案例：复选框获取选中的值
substring(beginIndex，endIndex);从begin到end之间的字符串，可以简化为substring(beginIndex)
案例：联动效果
$对象.text()
$对象.html()
插件：
就绪函数中书写 ： $(”表单”).validate();
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
