jquery简介 each遍历 prop attr
一、JQ简介
jQuery是一个快速、简洁的JavaScript框架,它封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
装载的先后次序: jQuery封装库在上,Js代码在下。
二、JQ语法
1.页面加载完成之后:
$(document).ready()=function(){};
$(function(){});
2.选择器
JS:document.getElementById();
JQ: $(选择器)
id选择器:$(“#id名称”);
元素选择器:$(“元素名称”);
类选择器:$(“.类名”);
3.操作内容
Js: 表单 dom.value
非表单 dom.innerHTML
Jq 表单 $.val() $.val(‘值’) 括号里是修改的值 参数是调用的值
非表单$.html() 括号里是修改的值
4.操作属性
JS: setAttribute getAttribute
JQ:attr(‘class’,‘dd’) attr(‘class’)
改多个变量时
$.attr({属性名:属性值,属性名:属性值})
5.操作样式
Js dom.style
Jq $.css(属性名,属性值)
6.事件
Js dom.addElementL
Dom.click = function
Jq $.click(function(){})
$(‘input:checked’)
$(‘input[type=”checkbox”]:checked’)
$(‘input:checkbox:checked’)
7.循环遍历
$().each(function(){ each 是循环
$(this).
})
Jq转dom对象
$(‘#dd’) 变为 $(‘#dd’)[0] 或$(‘#dd’).get(0)
Js 转 jq
Var dom =document.getElementBuId();
$(dom)
下面是JQ控制全选按钮
$(document).ready(function(){
//全选
$('#all').click(function(){
//当全选框选中时
if($("#all").prop('checked')){ //if($('#all:checked')){ 不能得到选中,只得到 1
//循环给多选框选中
$('.more').each(function (){
$(this).prop('checked',true);
})
}else{
//循环给多选框不选中
$('.more').each(function (){
$(this).prop('checked',false);
})
}
});
//多选
$('.more').click(function(){
//定义标志
var $flag = true;
//遍历多选框,找到未选中的元素,标志设为false
$('.more').each(function (){
if($(this).prop('checked') == false){
$flag = false;
return false;
}
});
//标志赋值给全选
$('#all').prop('checked',$flag);
})
});
下面是html代码
<p class="title">考试三 表格复选框全选</p>
<table>
<tr>
<th>
<input id="all" type="checkbox">全选
</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input class="more" type="checkbox"></td>
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td><input class="more" type="checkbox"></td>
<td>李四</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td><input class="more" type="checkbox"></td>
<td>王五</td>
<td>女</td>
<td>23</td>
</tr>
</table>
注意:
prop(‘checked’) 返回true false
attr(‘checked’) 返回checked
each的结束
在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式:
break----用return false;
continue --用return true;
最新文章
- C#读取大文本文件
- 【洛谷P1196】银河英雄传说
- 【poj3422】 Kaka&#39;s Matrix Travels
- yarn 0.9.0 build spark
- eclipse导出Runnable Jar File在Launch Configuration中找不到类
- 框架学习笔记:深度解析StrangeIoC内部运行机制
- Maven for Myeclipse的一个常见错误 Project configuration is not up-to-date with pom.xml
- js构造函数
- ie6兼容性,还需要测试么?迷茫。。。
- The Speed 歌词
- JS(JavaScript)的进一步了解1(更新中&#183;&#183;&#183;)
- 13 form表单
- js函数中写默认值的几种方式(常见的)
- 某些浏览器没有canvas.toBlob 方法的解决方案
- kickstart
- PlayerPrefs Elite v1.4.3
- Ubuntu 16.04 更换阿里源
- Unity关于方法事件生命周期官方文档
- 【java】判断某段字符串的编码方式,并按照新的编码方式输出
- Laravel学习笔记之Session源码解析(上)