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;
jquery简介 each遍历 prop attr的更多相关文章
- jQuery.attributes源码分析(attr/prop/val/class)
回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和p ...
- jquery源码解析:attr,prop,attrHooks,propHooks详解
我们先来看一下jQuery中有多少个方法是用来操作元素属性的. 首先,看一下实例方法: 然后,看下静态方法(工具方法): 静态方法是内部使用的,我们外面使用的很少,实例方法才是对外的. 接下来,我们来 ...
- 在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr。
在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr. $("#checkAll").prop("checked", true ...
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jQuery 简介
jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中. jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML ...
- jQuery简介<思维导图>
jQuery是继prototype之后有一个优秀的Javascript库,它由John Resig创建于2006年1月.它简化了遍历HTML文档.操作DOM.处理事件.执行动画和Ajax的操作.它独特 ...
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- WEB入门之十二 jquery简介
学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...
随机推荐
- Windows下Word.exe在哪?
在这里: C:\Program Files\Microsoft Office\root\Office16
- QT-自定义信号和槽
前言:信号和槽是一种松耦合机制,或者说是一种分布式机制,信号广播出去,槽会自定义订阅接收. 一.新建工程 二.新建部件 拖入button按钮.修改内容为“发送自定义信号” 三.自定义发送信号 3.1 ...
- 【翻译】前景img-sprites, 高对比模式分析
->译文,原文在这里<- 本文地址: http://www.cnblogs.com/blackmanba/p/img-sprites-high-contrast.html或者http:// ...
- 从零开始学习SVG
1 什么是SVG? MDN中的定义是:SVG即可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用来描述二维矢量图形的 XML 标记语言. 简单地说,SVG 面向图形, ...
- 杭电 2817 A sequence of numbers【快速幂取模】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2817 解题思路:arithmetic or geometric sequences 是等差数列和等比数 ...
- Java并发--安全发布对象
单例模式 懒汉模式:多线程非线程安全,在多线程中,可能会产生多个对象 饿汉模式:线程安全. 类加载的时候初始化,不推荐在构造函数需要做耗时操作的时候使用,因为可能导致类加载缓慢,而且可能初始化后并没有 ...
- Java基础——Servlet
什么是Servlet Servlet是Java Web的三大组件之一,它属于动态资源.Servlet的作用是处理请求,服务器会把接收到的请求交给Servlet来处理,在Servlet中通常需要: l ...
- SASS概览
1.安装: sass需要使用ruby,首先安装ruby,之后: gem install sass 编译: sass input.scss output.css 2.快速入门: 变量: .scss 变量 ...
- 安装idea
1.下载idea https://www.jetbrains.com/idea/download/#section=linux 2.解压 sudo tar -zxvf ideaIC-2018.3.2 ...
- python--(常用模块-2序列化)
python--(常用模块-2序列化) 一.序列化: 把对象打散成bytes或者字符串. 方便存储和传输 序列化 把bytes或者字符串转换回对象. 反序列化 # dumps 序列化. 把对象转化成b ...