JQuery 元素操作 each循环
参考：http://jquery.cuishifeng.cn/css.html
1.属性操作
--------------------------属性
$("").attr(); 查属性 自己定义属性
$("").removeAttr();
$("").prop(); 一个值查属性 两个值赋值 返回布尔值类型 固有属性
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr]) 一般用于text
---------------------------
$("").css("color","red")
2.循环each
//方式一
$.each(arr,funcion(index,obj){
console.log(index);
console.log(obj)
}) //方式二
$(selector).each(function(index,element){
console.log($(this))
})
eg.正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script> function selectall(){ $("table :checkbox").prop("checked",true)
}
function cancel(){ $("table :checkbox").prop("checked",false)
} function reverse(){ // var idlist=$("table :checkbox")
// for(var i=0;i<idlist.length;i++){
// var element=idlist[i];
//
// var ischecked=$(element).prop("checked")
// if (ischecked){
// $(element).prop("checked",false)
// }
// else {
// $(element).prop("checked",true)
// }
//
// }
// jquery循环的两种方式
//方式一
// li=[10,20,30,40]
// dic={name:"yuan",sex:"male"}
// $.each(li,function(i,x){
// console.log(i,x)
// }) //方式二
// $("tr").each(function(){
// console.log($(this).html())
// }) $("table :checkbox").each(function(){ $(this).prop("checked",!$(this).prop("checked")); // if ($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else {
// $(this).prop("checked",true)
// } // 思考:如果用attr方法可以实现吗? });
} </script>
</head>
<body> <button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button> <table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table> </body>
</html>
3.文档处理
//创建一个标签对象
$("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除
$("").empty() 清空内容 不删除标签元素
$("").remove([expr]) 标签和内容全部删除 //复制 $("").clone([Even[,deepEven]])
eg：复制克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div> <script src="jquery-1.11.3.min.js"></script>
<script>
//var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗?
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){ $(self).parent().remove() } </script>
</body>
</html>
4.css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
4.事件
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){}) 事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件； [selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如： //$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
//li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件 [data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
https://www.cnblogs.com/yuanchenqi/articles/6070667.html
JQuery 元素操作 each循环的更多相关文章
- jQuery元素操作1
元素操作 1.2.1 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 1. ...
- 测开之路一百零二：jquery元素操作
jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...
- jQuery元素操作
jQuery中创建元素及追加元素 DOM中可以动态创建元素:document.createElement(“标签的名字”); jQuery中同样可以创建元素标签,并且返回的就是jQuery对象,可以直 ...
- javascript(JQuery)元素操作
html代码如下: <div id="picK"> <ul> <li style="float:left;width:90px;" ...
- javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）
主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...
- jquery/js iframe 元素操作
1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- jquery元素节点操作
jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...
- 深度解析JQuery Dom元素操作技巧
深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...
随机推荐
- linux内核模块的安全
linux可以动态的加载内核模块,在很多场合可能需要确保加载内核的安全性.如果被攻击者加载恶意内核模块,将会使得内核变得极其危险. 当然,稳妥的做法就是给内核模块进行签名,内核只加载能正确验证的签名. ...
- 【Java并发编程】：volatile变量修饰符
volatile用处说明 在JDK1.2之前,java的内存模型实现总是从主存(即共享内存)读取变量,是不需要进行特别的注意的.而随着JVM的成熟和优化,现在在多线程环境下volatile关键 ...
- JavaScript -- Constructor、Prototype
----- 012-constructor.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv ...
- HttpClient和HttpGet 参数的优先级
http://www.cnblogs.com/LBSer/p/3295584.html 一般在使用HttpClient时,我们提前设置好参数,比如超时时间(一般socket超时和连接超时) priva ...
- php中文转拼音2
<?php /** * strtopinyin.php * * @name 汉字字符转拼音 * @author Kudosharry * @version v1.0 * */ class Str ...
- 在没有jre环境下运行jar
1.首先将程序打包(这一步可以通过eclipse的导出完成). 2.为项目添加第三方jar包.在第1步打好的jar包的同级目录下,新建一个lib(名字可以自取)文件夹.用winrar等解压文件打开第1 ...
- Java 获取汉字串首字母并大写和获取汉字的全拼，英文字符不变
在开发中我们难免会遇到需要提出汉字中的拼音的首字母.提出汉字的拼音,接着便介绍一个工具类 pinyin4j.jar,首先需要下载 jar 包. Pinyin4j是一个功能强悍的汉语拼音工具包,是sou ...
- java Html 转 PDF
Html 转 PDF 使用 flying-saucer 插件来完成 导入flying-saucer依赖 <dependency> <groupId>org.xhtmlrende ...
- 玩转Git之初识Git
git是什么 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目 Git 和 svn 有什么区别 它们之间的主要区别是Git是分布式的,而svn是集中式. 当然Git也可 ...
- [转]ASP.NET MVC4中@model使用多个类型实例的方法
本文转自:http://blog.csdn.net/hulihui/article/details/48199897 有时需要在ASP.NET MVC4的视图的@model中使用多个类型的实例,.NE ...