jQuery达成获取选中复选框的值实例详解,函数用法实例详解

接纳场景:

正文实例讲述了jQuery中attr()与prop()函数用法。分享给大家供大家参照他事他说加以考察,具体如下:

jQuery中attr()与prop()函数用法实例详解(附用法分别),jqueryattr

本文实例讲述了jQuery中attr()与prop()函数用法。分享给大家供大家参照他事他说加以调查,具体如下:

一、jQuery的attr()方法

jquery中用attr()方法来获得和装置成分属性,attr是attribute(属性)的缩写,在jQuery
DOM操作中会常常利用attr(),attr()有6个表达式。

  1. attr(属性名)
    //获取属性的值(获得第2个相称成分的属性值。通过那么些主意能够壹本万利地从第3个匹配成分中得到二个属性的值。假使成分未有对应属性,则赶回
    undefined )

  2. attr(属性名, 属性值) //设置属性的值
    (为有着相称的因素设置3个属性值。)

  3. attr(属性名,函数值) //设置属性的函数值 
    (为有着相称的成分设置3个总结的属性值。不提供值,而是提供三个函数,由那个函数计算的值作为属性值。)

四.attr(properties) //给钦命成分设置多个属性值,即:{属性名1: “属性值一”
, 属性名2: “属性值贰” , … …
}。(那是一种在具备匹配成分中批量安装重重属性的特等方式。
注意,假若你要安装对象的class属性,你无法不选拔’className’
作为属性名。可能你能够平素动用’class’恐怕’id’。)

演示代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

1.attr(name)//获取属性的值

1.1使用attr(name)获取title值:

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

结果:

澳门葡京 1

1.2使用attr(name)获取alt值:

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

结果:

澳门葡京 2

  1. attr(name,value)   //设置属性的值

2.一采纳attr(name,value)修改title值为:不吃柑果

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

结果:

澳门葡京 3

  1. attr(name,fn)  //设置属性的函数值

三.一把alt属性的值设置为title属性的值。

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

结果:

澳门葡京 4

四.attr(properties)  //将二个“名/值”方式的指标设置为有着匹配成分的本性

4.1获取<ul>里第2个<li>设置title和alt属性。

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>

结果:

澳门葡京 5澳门葡京 6

4.2获取<ul>里第2个<li>设置class。

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

结果:

澳门葡京 7

4.3获取<ul>里第2个<li>设置id。

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

结果:

澳门葡京 8

4.4获取<ul>里第2个<li>设置style。

<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

结果:

澳门葡京 9

在li中增添alt是漏洞非常多的,它只可以用在img、area和input元素中(包含applet成分)。对于input成分,alt属性意在用来替换提交按键的图纸。在此间为了很详细表明attr()方法,未有确切的习性,全体用了alt举行举个例子,只供就学参考attr()方法用法。

在此表达下alt和tite的分别。

alt:那是用以描述图形的文字,当图片不能够展示时,那个文字会替代图片而被突显。当鼠标移至图片上该些文字亦会显示。
title:是鼠标放上去之后,会展现出来的文字。

那么怎么删除属性呢?

jquery中剔除属性的注重词是: removeAttr 注意A是大写的. 看看怎么用的:
如出壹辙是用法一中的html代码, 小编想删掉li的title属性, 那么就那样:

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

就如此轻便, attr 其实正是原生js中 getAttribute 的简化完成, 而removeAttr
正是 removeAttribute 的简写了。

那正是说是或不是有跟attr()相似的习性呢?

jquery中val()与之临近
$(this).val();获取有个别成分节点的value值,也正是$(this).attr(“value”);
$(this).val(value);设置有些成分节点的value值,约等于$(this).attr(“value”,value);

二、jQuery的prop()方法:

prop()函数用于安装或再次来到当前jQuery对象所相配的成分的属性值。

该函数属于jQuery对象(实例)。若是急需删除DOM成分的性质,请使用removeProp()函数。

jQuery达成获取选中复选框的值实例详解,函数用法实例详解。语法

jQuery 一.陆 新扩张该函数。prop()函数有以下三种用法:

用法一:

jQueryObject.prop( propertyName [, value
] )
安装或重返钦赐属性propertyName的值。假若内定了value参数,则意味设置属性propertyName的值为value;假使未有一点名value参数,则象征回去属性propertyName的值。

参数value还足以是函数,prop()将基于相称的有所因素遍历推行该函数,函数中的this指针将对准对应的DOM成分。prop()还有大概会为函数字传送入四个参数:第二个参数正是该因素在相称成分中的索引,第2个参数正是该因素propertyName属性当前的值。函数的再次回到值正是为该因素的propertyName属性设置的值。

用法二:

jQueryObject.prop( object )
以指标方式相同的时候设置放肆5特性子的值。对象object的各种属性对应propertyName,属性的值对应value。

注意:prop()函数的有着”设置属性”操作针对的是当下jQuery对象所相称的每多个因素;全部”读取属性”的操作只针对第四个门道相当的成分。
参数

请依照前面语法部分所定义的参数名称查找对应的参数。

参数 描述
propertyName String类型指定的属性名称。
value 可选/Object/Function类型指定的属性值,或返回属性值的函数。
object Object类型指定的对象,用于封装多个键值对,同时设置多项属性。

参数value能够是包罗对象和数组在内的随机档次。

返回值

prop()函数的再次回到值是随便等级次序,重回值的品类取决于当前prop()函数实施的是”设置属性”操作照旧”读取属性”操作。

假若prop()函数实践的是”设置属性”操作,则赶回当前jQuery对象自己;即使是”读取属性”操作,则赶回读取到的属性值。

若果当前jQuery对象相称两个因素,再次回到属性值时,prop()函数只以中间第二个门户大约的元素为准。假诺该因素未有一点名的天性,则重返undefined。

prop()和attr()的根本差别:prop()函数针对的是DOM成分(JS
Element对象)的特性,attr()函数针对的是DOM成分所对应的文书档案节点的性质。详细的情况请查看jQuery函数attr()和prop()的区分。

注意事项

一、若是由此prop()函数改变<input>和<button>成分的type属性,在大多浏览器师长会抛出三个谬误,因为该属性一般不容许在中期改变。

贰、假使采用prop()函数操作表单成分的checked、selected、disabled等天性,假设该因素被选中(或剥夺),则赶回true,不然(意即HTML中并未有该属性)再次回到false。

3、prop()函数还能设置或回到DOM成分的Element对象上的一些品质,例如:tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等质量。

肆、在IE九及更早版本中,要是使用prop()函数设置的属性值不是贰个简便的原始值(String、Number、Boolean),并且在对应的DOM成分被灭绝从前,该属性没有被移除,则或然会产生内部存款和储蓄器泄漏难题。倘令你只是为了存款和储蓄数据,建议你接纳data()函数,以制止内存泄漏难题。

示例&说明

以上面这段HTML代码为例:

<div id="n1">
  <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
  <input id="n3" name="order_id" type="checkbox" value="1">
  <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>

咱们编辑如下jQuery代码:

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined
document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function
// prop()设置的属性也是针对元素(Element对象),因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer
// 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.bkjia.com/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.bkjia.com/
// 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

附:jquery中attr和prop的区别

在高版本的jquery引入prop方法后,哪一天该用prop?哪一天用attr?它们四个以内有哪些界别?那一个主题素材就出现了。

至于它们八个的分别,网络的答案繁多。这里谈谈本身的体验,笔者的体会相当粗略:

对此HTML成分本身就含有的原来属性,在拍卖时,使用prop方法。
对此HTML成分大家同舟共济自定义的DOM属性,在拍卖时,使用attr方法。

地方的叙说也有一些模糊,举多少个例证就知晓了。

<a href=”” target=”_self”
class=”btn”>百度</a>

本条例子里<a>成分的DOM属性有“href、target和class”,这个属性正是<a>成分本人就含有的个性,也是W3C标准里就隐含有那多少个属性,恐怕说在IDE里能够智能提醒出的性质,这么些就叫做固有总体性。管理那一个属性时,提出使用prop方法。

<a href=”#” id=”link1″ action=”delete”>删除</a>

以此例子里<a>成分的DOM属性有“href、id和action”,很显眼,前多少个是原有属性,而前边3个“action”属性是大家温馨自定义上去的,<a>成分本人是未曾这几个特性的。这种正是自定义的DOM属性。管理那一个属性时,提议使用attr方法。使用prop方法取值和装置属性值时,都会再次来到undefined值。

再举2个例证:

<input id=”chk一” type=”checkbox” />是或不是可知
<input id=”chk二” type=”checkbox” checked=”checked” />是或不是可知

像checkbox,radio和select那样的成分,选中属性对应“checked”和“selected”,这个也属于固有属性,由此须求选拔prop方法去操作工夫收获不错的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

一经上边使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

但愿本文所述对我们jQuery程序设计有着支持。

jQuery针对种种要素操作基础教程,jquery基础教程

本文实例讲述了jQuery针对成分的操作,包涵基础操作、采用要操作的成分及管理DOM成分等。对jQuery的就学有很好的借鉴价值。分享给咱们供大家参照他事他说加以调查之用。具体分析如下:

1、基础

jquery对象集:

$():jquery对象会集

获得jquery对象聚焦的因素:

行使索引获取包装器中的javascript成分:

var temp = $('img[alt]')[0]

应用jquery的get方法得到jquery对象聚焦的javascript成分:

var temp = $('img[alt]').get(0)

动用jquery的eq方法赢得jquery对象聚集的jquery对象成分:

$(‘img[alt]’).eq(0)
$(‘img[alt]’).first()
$(‘img[alt]’).last()

jquery对象集转变来javascript数组:

var arr = $('label+button').toArray()

label前边全部同级button成分,调换来javascript数组

jquery对象集的目录:
var n = $(‘img’).index($(‘img#id’)[0])
注意:index()参数是javascript元素
var n = $(‘img’).index(‘img#id’) 等同于上壹行 找不到再次回到-一
var n = $(‘img’).index() 得到img在同级成分中的索引

向jquery对象聚焦增加更加多的jquery对象集:   
选择逗号:

$('img[alt],img[title]')

使用add方法:

$('img[alt]').add('img[title]')

对两样的jquery对象集中使用分裂的方法:

$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');

向jquery对象聚集加多新创制的成分:

$('p').add('<div></div>');

除去jquery对象聚集的因素:

$('img[title]').not('[title*=pu]')
$('img').not(function(){return !$(this).hasClass('someClassname')})

过滤jquery对象集:
$(‘td’).filter(function(){return
this.innerHTML.match(^\d+$)})过滤包罗数字的td

赢得jquery对象集的子集

$(‘*’).slice(0,四) 包涵前多少个因素的新的jquery对象集
$(‘*’).slice(四) 包罗前多少个成分的新的jquery对象集
$(‘div’).has(‘img[alt]’)

改换jquery对象集中的因素:

var allIds = $('div').map(function(){
 return (this.id==undefined) ? null : this.id;
}).get();

上述示范可透过get方法转换来javascript数组。

遍历jquery对象聚集的因素:

$('img').each(function(n){
 this.alt = '这是第['+n+']张图片,图片的id是' + this.id;
})
$([1,2,3]).each(function(){alert(this);})

利用要素间关系获取jquery对象集:

$(this).closest(‘div’)比方触发的按键在哪个div中发生
$(this).siblings(‘button[title=”Close”]’)全部同级成分,不包罗作者
$(this).children(‘.someclassname’)全数子节点成分,不带有重复子节点
$(this).closest(”)邻近祖先成分
$(this).contents()由元素内容结合的jquery对象集,譬如能够博得<iframe>成分内容
$(this).next(‘.someclassname’)下一个同级成分
$(this).nextAll()后边全部的同级成分
$(this).nextUntil(‘.someclassname’)后边全数的同级成分直到遇到指标成分
$(this).offsetParent()离jquery对象集近日的父辈成分
$(this).parent()直接父成分
$(this).parents()全部父成分
$(this).parrentsUntil()全部父成分,直到指标父成分
$(this).prev()上二个同级成分
$(this).prevAll()此前的有所同级成分
$(this).prevTntl()在此之前的保有同级成分,直到目的成分

其余获取jquery对象集的主意:

$(this).find(p span)

剖断是还是不是是有些jquery对象集:

var hasImg = $('*').is('img');

jquery方法:

$().hide()
$().addClass(”)
$().html(”)
$(‘a’).size()成分数量

jquery选择器:

$(‘p:even’)  
$(‘tr:nth-child(1)’)
$(‘body > div’)直接子成分
$(‘a[href=$=’pdf’]’)依照属性选拔
$(div:has(a))过滤

jquery函数:

$.trim()
jquery实践时间:
$(document).ready(function(){});
$(function(){});

创建DOM元素:

$('<p></p>').insertAfter();
$('<img>',{
 src: '',
 alt: '',
 title: '',
 click: function(){}
}).css({
 cursor:'pointer',
 border:'',
 padding:'',
 backgroundColor:'white'
}).append('');

jquery扩展:

$.fn.disable = function(){
 return this.each(function(){
 if(this.disabled != null) this.disabled = true;
 })
};
$('').disable();

jquery测试成分是还是不是存在:

if(item)(){}else{} 宽松测试
if(item != null) 推荐测试,能把null和undefined不一样开

二、选拔要操作的因素

依赖标具名:$(‘a’)  
根据id:$(‘#id’)
依靠类名:$(‘.someclassname’)
满意几个规范:$(‘a#id.someclassname’) 或 $(‘div,span’)
某些成分的全体子节点:$(p a.someclassname)
某些成分的直接子节点:$(ul.myList > li)
依照属性名:
$(a[href^=’]) 以…开头
$(href$=’.pdf’)以…结尾
$(form[method])包含method属性的form
$(intput[type=’text’])
$(intput[name!=”])
$(href*=’some’)包含

某成分后的率先个要素:$(E+F)相称的是F,F是E前边的第多个因素

某成分后的某2个要素:$(E~F)相配的是F,F是E后边的某多个成分

经过岗位:

$(li:first)第一个li
$(li:last)最终3个li
$(li:even)偶数行li
$(li:odd)奇数行li
$(li:eq(n))第n个元素,索引从0开始
$(li:gt(n))第n个要素之后的要素,索引从0起头
$(li:lt(n))第n个因素此前的因素,索引从0初叶
$(ul:first-child)列表中的第叁个li
$(ul:last-child)列表中的最终多个li
$(ul:nth-child(n))列表中的第n个li
$(ul:only-child)未有兄弟li的ul
$(ul:nth-child(even))列表中的偶数行li,odd为计数行li
$(ul:nth-child(五n+一))列表中被伍除余一的li

因此过滤器:

$(input:not(:checkbox))
$(‘:not(img[src*=”dog”])’)
$(‘img:not([src*=”dog”])’)
$(div:has(span))
$(‘tr:has(img[src$=”pu.png”])’)
$(tr:animated)处于动画状态的tr
$(input:button)包括type类型为button,reset,submit的Input
$(input:checkbox)等同于$(input[type=checkbox])
$(span:contains(food))包涵文字food的span
$(input:disabled)禁用
$(input:enabled)启用
$(input:file)等同于$(input[type=file])
$(:header)h1到h6
$(input:hidden)
$(input:image)等同于$(input[type=image])
$(:input)包括input, select, textarea, button元素
$(tr:parent)
$(input:password)等同于$(input[type=password])
$(input:radio)等同于$(input[type=radio])
$(input:reset)等同于$(input[type=reset])或$(button[type=reset])
$(‘.clssname:selected’)
$(input:submit)等同于$(input[type=submit])或$(button[type=submit])
$(input:text)等同于$(input[type=text])
$(div:visible)

3、处理DOM元素  

操作成分的属性:

$('*').each(function(n){
 this.id = this.tagName + n;
})

获得属性值:

$('').attr('');

安装属性值:

$('*').attr('title', function(index, previousValue){
 return previousValue + ' I am element ' + index + ' and my name is ' + this.id;
}) //为一个属性设置值
$('input').attr({
 value: '',
 title: ''
}); //为多个属性设置值

剔除属性:

$('p').removeAttr('value');

让具有链接都在新窗口中开采:

$('a[href^="http://"]').attr('target',"_blank");

制止表单多次提交:

$("form").submit(function(){
 $(":submit", this).attr("disabled","disabled");
})

增加类名:

$('#id').addClass('')

删去类名:

$('#id').removeClass('')

切换类名:

$('#id').toggleClass('')

留存就删除类名,不设有就加多类名
剖断是不是含有类名:

$('p:first').hasClass('') $('p:first').is('')

以数组情势重临类名列表:

$.fn.getClassNames = function(){
 var name = this.attr('someclsssname');
 if(name != null){
 return name.split(" ");
 }
 else
 {
 return [];
 }
}

设置样式:

$('div.someclassname').css(function(index, currentWidth){
 return currentWidth + 20;
});
$('div').css({
 cursor: 'pointer',
 border: '1px solid black',
 padding: '12px 12px 20px 20x',
 bacgroundColor: 'White'
});

至于尺寸:

$(div).width(500)
$(‘div’).height()
$(‘div’).innerHeight()
$(‘div’).innerWidth()
$(‘div’).outerHeight(true)
$(‘div’).outerWidth(false)

至于定位:

$(‘p’).offset()相对于文书档案的参阅地点
$(‘p’).position()偏移父成分的相持地点
$(‘p’).scrollLeft()水平滚动条的偏移值
$(‘p’).scrollLeft(value)
$(‘p’).scrollTop()
$(‘p’).scrollTop(value)

至于因素内容:

$(‘p’).html()
$(‘p’).html(”)
$(‘p’).text()
$(‘p’).text(”)

日增内容

在要素末尾追加1段html:

$('p').append('<b>some text</b>');

在要素末尾dom中现成的要素:

$('p').append($(a.someclassname))

在要素初步追加:

$("p").prepend()

在要素的前头追加:

$("span").before()

在要素的前边扩大:

$("span")after()

把内容扩充到结尾:

appendTo(targets)

把内容充实到开始:

prependTo(targets)

把内容充实到成分前边:

insertBefore(targets)

把内容扩充到成分前面:

$('<p></p>').insertAfter('p img');

卷入成分:

$(‘a.someclassname’).wrap(“<div class=’hello’></div>”)
$(‘a.someclassname’).wrap($(“div:first”)[0])
$(‘a.someclassname’).wrapAll()
$(‘a.someclassname’).wrapInner()
$(‘a.someclassname’).unWrap()

剔除成分:

$(‘.classname’).remove()删除成分,绑定到成分上的轩然大波和数码也会被去除
$(‘.classname’).detach()删除成分,但保留事件和多少
$(‘.classname’).empty()不删除成分,但清空成分内容

复制成分:

$('img').clone().appendTo('p.someclassname')

$('ul').clone().insertBefore('#id')

轮换到分:

$('img[alt]').each(function(){
 $(this).replaceWith('' + $(this).attr('alt') + '');
})
$("p").replaceAll("<b></b>")

有关表单元素的值:

$('[name="radioGroup"]:checked').val()获取单选按钮的值,如果没有选中一个,返回undefined
var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
 return $(this).val();
}).toArray(); //获取多选框的值

对于<select id=”list”
multiple=”multiple”>使用$(‘#list’).val()重临值的数组
$(‘input’).val([‘one’,’two’,’three’])假如单选框或复选框与数组中的成分相称,则当选状态

相信本文所述对我们的jQuery程序设计有早晚的借鉴价值。

大家应该时时看到系统中出现列表,会有3个对列表数据的操作(如剔除, 修改,查看等)。大家得以在每一种列表项后边加二个刨除按键,把列表项的相干参数(如
id)post到后台实行删减。当然倘诺您每趟只要删除一两条数据那样子做并从未什么样难题,然而假使你须要三次性删
除100条,你还去一条 条的删减吗?每贰回删除10条会不会越来越好些呢?

一、jQuery的attr()方法

您只怕感兴趣的篇章:

  • jquery判定复选框选中状态以及界别attr和prop
  • jQuery中 prop() attr()使用详解
  • jquery中attr和prop的分别深入分析
  • jQuery中attr()和prop()在修改checked属性时的分别
  • jQuery学习之prop和attr的分别示例介绍
  • jQuery的attr与prop使用介绍
  • jquery中prop()方法和attr()方法的分别浅析
  • jquery获取自定义属性(attr和prop)实例介绍
  • jquery 获取自定义属性(attr和prop)的落到实处代码

本文实例讲述了jQuery中attr()与prop()函数用法。分享给大家供我们参照他事他说加以考查,具体如下…

动用jQuery操作HTML元素的主意

jQuery 选择器

jQuery 成分采取器和总体性采取器允许你通过标具名、属性名或内容对 HTML
成分进行采纳。
选取器允许你对 HTML 成分组或单个成分进行操作。
在 HTML DOM 术语中:
选拔器允许你对 DOM 成分组或单个 DOM 节点进行操作。

选择器  实例  选取

*  $(“*”)  全数因素
#id  $(“#lastname”)  id=”lastname” 的元素
.class  $(“.intro”)  所有 class=”intro” 的元素
element  $(“p”)  所有 <p> 元素
.class.class  $(“.intro.demo”)  所有 class=”intro” 且 class=”demo”
的元素
     
:first  $(“p:first”)  第一个 <p> 元素
:last  $(“p:last”)  最后2个 <p> 成分
:even  $(“tr:even”)  全部偶数 <tr> 成分
:odd  $(“tr:odd”)  全体奇数 <tr> 成分
     
:eq(index)  $(“ul li:eq(3)”)  列表中的第多个因素(index 从 0
起初)
:gt(no)  $(“ul li:gt(3)”)  列出 index 大于 3 的元素
:lt(no)  $(“ul li:lt(3)”)  列出 index 小于 3 的元素
:not(selector)  $(“input:not(:empty)”)  全数不为空的 input 成分
     
:header  $(“:header”)  全部标题成分 <h一> – <h6>
:animated     所有动画成分
     
:contains(text)  $(“:contains(‘W3School’)”)  蕴涵钦赐字符串的保有因素
:empty  $(“:empty”)  无子(成分)节点的持有因素
:hidden  $(“p:hidden”)  全体隐藏的 <p> 成分
:visible  $(“table:visible”)  全体可知的报表
     
s壹,s二,s三  $(“th,td,.intro”)  全部带有匹配选用的成分
     
[attribute]  $(“[href]”)  全数带有 href 属性的因素
[attribute=value]  $(“[href=’#’]”)  全体 href 属性的值等于 “#”
的元素
[attribute!=value]  $(“[href!=’#’]”)  全体 href 属性的值不对等
“#&quot……余下全文>>
 

好了,接下去。大家就使用jQuery消除这一个标题。

jquery中用attr()方法来赢得和装置元素属性,attr是attribute(属性)的缩写,在jQuery
DOM操作中会平日接纳attr(),attr()有两个表达式。

jquery二种页面成分定位及操作的办法

jQuery提供三种办法来选拔html的elements,第二种是用CSS和Xpath选拔器联合起来产生二个字符串来传送到jQuery的构造器(如:$(“div
> ul
a”));第两种是用jQuery对象的多少个methods(方法)。那二种格局还可以够同步起来混合使用。大家来试着在我们的test.html代码中选用并修改第一个ordered
list.1初阶,大家必要选取这几个list本人,那个list有3个ID叫“orderedlist”,经常的javascript写法是document.getElementById(“orderedlist”).在jQuery中,代码如下:$(document).ready(function()
{
$(“#orderedlist”).addClass(“red”);});若将多少个CSS样式blue附加到了orderedlist上,在你刷新了test.html后,你将会师到第1个不改变列表(ordered
list
)背景观形成了浅浅豆沙色,而第二个静止列表未有变化.代码如下:$(document).ready(function()
{ $(“#orderedlist > li”).addClass(“blue”); });
那样,全体orderedlist中的li都增大了体制”blue”。假使要兑现把鼠标放在li对象方面和移开时张开体制切换,但只在list的结尾三个element上生效。$(document).ready(function()
{ $(“#orderedlist li:last”).hover(function() {
$(this).addClass(“green”); }, function() { $(this).removeClass(“green”);
}); }); find() 令你在已经挑选的element中作标准查找,由此$(“#orderedlist).find(“li”) 就像 $(“#orderedlist
li”)一样。each()方法迭代了具备的li,并能够在此基础上作更加多的管理。
大部分的艺术,如addClass(), 都能够用它们自个儿的 each()
。html()用来赢得每个li的html文本,
追加一些文字,并将之设置为li的html文本。jQuery 提供了filter() 和not()
八个办法。 filter()以过滤表明式来压缩不切合的被接纳项,
not()则用来裁撤全数符合过滤说明式的被增选项.
思量一个冬日的list,你想要选用具备的远非ul子成分的li成分。$(document).ready(function()
{ $(“li”).not(“:has(ul)”).css(“border”, “一px solid
black”);//原来的作品为$(“li”).not(“[ul]”).css(“border”, “一px solid black”);
});
那几个代码选用了有着的li成分,然后去除了有ul子成分的li元素。刷……余下全文>>
 

本文实例讲述了jQuery针对成分的操作,包含基础操作、接纳要操作的因素及管理DOM成分等。…

先是,如果大家须要删除多少个列表项。HTML里面列表标签是ul和ol,
当中ul是严节的,而ol是铁定的事情。每一个列表项应用li。

  1. attr(属性名)
    //获取属性的值(取得第贰个相配成分的属性值。通过那些措施能够方便地从第一个匹配成分中获取八脾质量的值。假使成分未有对号入座属性,则赶回
    undefined )

  2. attr(属性名, 属性值) //设置属性的值
    (为有着相配的要素设置四个属性值。)

  3. attr(属性名,函数值) //设置属性的函数值 
    (为有着相配的因素设置3个划算的属性值。不提供值,而是提供2个函数,由那个函数总计的值作为属性值。)

<ul id="fruit">
 <li><input type="checkbox" value="0001"/>苹果</li>
 <li><input type="checkbox" value="0002"/>梨子</li>
 <li><input type="checkbox" value="0003"/>芒果</li>
 <li><input type="checkbox" value="0004"/>山楂</li>
 <li><input type="checkbox" value="0005"/>香蕉</li>
</ul>

四.attr(properties) //给钦命成分设置八个属性值,即:{属性名一: “属性值一”
, 属性名二: “属性值2” , … …
}。(那是一种在具备相称成分中批量安装重重品质的特等方式。
注意,假若你要安装对象的class属性,你不能够不利用’className’
作为属性名。恐怕您能够一贯动用’class’可能’id’。)

一经我们只需传递水果的ID到后台就能够去除全部水果。那么传递八个数组为[0001,0002,0003,0004,0005]到后台就足以了。所以,大家供给获得多少个li成分中input标签的value值。

演示代码:

很醒目,你的思路大概是采纳jQuery筛选器先获得li下的input对象数组,再遍历那些数组,剖断每三个input对象,然后决断input对象是不是选中,选中就用val()函数获取它的值,然后把该值放入3个用来囤积id的数组arr中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

【关键点】选择器,遍历,数组。

一.attr(name)//获取属性的值

一.得到被入选的数组对象

1.1使用attr(name)获取title值:

jQuery的选拔器中’ :checkbox’ 是寻找全数复选框。

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

$("#fruit :checkbox");

结果:

贰.遍历这些指标数组

澳门葡京 10

jQeury的each函数:为每一个相称成分规定运营的函数。

1.2使用attr(name)获取alt值:

each函数:

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

语法:

结果:

$(selector).each(function(index,element))

澳门葡京 11

参数 描述
function(index,element) 必需。为每个匹配元素规定运行的函数。index – 选择器的 index 位置element – 当前的元素(也可使用 “this” 选择器)
  1. attr(name,value)   //设置属性的值

遍历后,判别复选框是不是被选中.

二.一用到attr(name,value)修改title值为:不吃金橘

Jquery的prop函数(prop函数是jQuery一.陆本子上的):

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

prop(name|properties|key,value|fn)

结果:

收获在合作的因素聚集的率先个要素的属性值。随着部分放置属性的DOM成分或window对象,若是计划将去除该属性,浏览器也许会产生错误。jQuery第叁遍分配undefined值的本性,而忽视了浏览器生成的别的不当

澳门葡京 12

参数 类型 版本
name(属性名称) String V1.6
properties(作为属性的“名/值对“对象) Map(String, Object) V1.6
key,function(index, attr) (属性名称,属性值) String, Function V1.6
  1. attr(name,fn)  //设置属性的函数值

[注意]key,function(index,attr)中回到的属性值的函数,第2个参数为日前
 成分的索引值,第四个参数为原本的属性值。

三.一把alt属性的值设置为title属性的值。

示例:

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

1.参数name的描述:

结果:

当选复选框的为true, 没选中为false

澳门葡京 13

选中:

四.attr(properties)  //将三个“名/值”情势的目的设置为富有匹配成分的质量

$("input[type='checkbox']").prop("checked",true);

4.1获取<ul>里第2个<li>设置title和alt属性。

没选中:

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>
$("input[type='checkbox']").prop("checked",false);

结果:

2.参数perporties描述:

澳门葡京 14澳门葡京 15

剥夺页面上的具备复选框。

4.2获取<ul>里第2个<li>设置class。

$("input[type='checkbox']").prop({disabled:true});
<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

3.参数key,回调函数描述:

结果:

因此函数来安装富有页面上的复选框反选。

澳门葡京 16

$("input[type='checkbox']").prop("checked",fucntion(i, val){
 return !val;
});

4.3获取<ul>里第2个<li>设置id。

3.数组

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

 这么些最简易。jQuery定义三个数组。

结果:

var arr = new Array();

澳门葡京 17

由此最后的代码:

4.4获取<ul>里第2个<li>设置style。

<!DOCTYPE html>
<html>
<head>
 <title>Jquery复选框练习</title>
 <!-- 引入jQuery,引入你自己的jQuery文件 -->
 <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
</head>
<body>
 <div>
  <p>选择要购买的水果</p>
  <ul class="fruit">
   <li><input type="checkbox" value="001"/>苹果</li>
   <li><input type="checkbox" value="002"/>雪梨</li>
   <li><input type="checkbox" value="003"/>芒果</li>
   <li><input type="checkbox" value="004"/>菠萝</li>
  </ul>
  <input type="checkbox" id="All"/>
  <button id="checkAll">全选</button>
  <button id="nothing">全不选</button>
  <button id="reverseAll">反选</button>
  <button class="chooseFruit">购买</button>
  <script type="text/javascript">
   <!-- 选择全部/全不选 -->
   $("#All").click(function(){
    if("this.checked"){
     $("#fruit :checkbox").prop("checked", true);
    }else{
     $("#fruit :checkbox").prop("checked", false);
    }
   });
   <!--选择全部-->
   $("#checkAll").click(function(){
    $("#fruit :checkbox").prop("checked", true);
   });
   <!--全不选-->
   $("#nothing").click(function(){
    $("#fruit :checkbox").prop("checked", false);
   });
   <!--反选-->
   $("#reverseAll").click(function(){
    $("#fruit :checkbox").each(function(i){
     $(this).prop("checked", !$(this).prop("checked"));
    });
   });
   <!--获取选中复选框的值-->
   $(".chooseFruit").click(function(){
    var arr = new Array();
    $("#fruit :checkbox[checked]").each(function(i){
     arr[i] = $(this).val();
    });
    var vals = arr.join(",");
    console.log(vals);
   });
  </script>
 </div>
</body>
</html>
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

至此,jQuery完成了复选框的取值,是否特别轻易?

结果:

澳门葡京 ,总结

澳门葡京 18

上述所述是小编给我们介绍的jQuery完毕获取选中复选框的值,希望对大家有着支持,假诺大家有其它疑问请给作者留言,小编会及时过来大家的。在此也非常感激我们对台本之家网址的支撑!

在li中增添alt是不当的,它不得不用在img、area和input成分中(包罗applet成分)。对于input成分,alt属性意在用来替换提交开关的图片。在此处为了很详细表达attr()方法,未有适当的个性,全部用了alt举办例如,只供就学参照他事他说加以考察attr()方法用法。

你或者感兴趣的文章:

  • jquery获取复选框checkbox的值实现格局
  • jquery获取复选框checkbox的值的简短完毕格局
  • jQuery获取复选框被选中数量及看清选取值的法子详解
  • jquery完成勾选复选框触发事件给input赋值
  • jquery复选框多选赋值给文本框的不二法门
  • jquery获取复选框被选中的值
  • jquery获取复选框被入选的值
  • jQuery获取(选中)单选,复选框,下拉框中的值
  • jquery如何获得复选框的值

在此表达下alt和tite的区分。

alt:这是用以描述图形的文字,当图片不可能展现时,那几个文字会代替图片而被展现。当鼠标移至图片上该些文字亦会展现。
title:是鼠标放上去之后,会来得出来的文字。

那正是说怎么删除属性呢?

jquery中剔除属性的重大词是: removeAttr 注意A是大写的. 看看怎么用的:
相同是用法一中的html代码, 作者想删掉li的title属性, 那么就那样:

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

仿佛此简单, attr 其实正是原生js中 getAttribute 的简化达成, 而removeAttr
正是 removeAttribute 的简写了。

那就是说是不是有跟attr()相似的习性呢?

jquery中val()与之附近
$(this).val();获取某些元孟秋点的value值,也正是$(this).attr(“value”);
$(this).val(value);设置某些成分节点的value值,相当于$(this).attr(“value”,value);

二、jQuery的prop()方法:

prop()函数用于安装或再次回到当前jQuery对象所相配的成分的属性值。

该函数属于jQuery对象(实例)。假诺急需删除DOM成分的习性,请使用removeProp()函数。

语法

jQuery 一.陆 新增添该函数。prop()函数有以下三种用法:

用法一:

jQueryObject.prop( propertyName [, value
] )
设置或回到钦命属性propertyName的值。假诺钦点了value参数,则意味着设置属性propertyName的值为value;如若未有一些名value参数,则表示回去属性propertyName的值。

参数value还是能是函数,prop()将依赖相称的全数因素遍历实施该函数,函数中的this指针将针对对应的DOM成分。prop()还恐怕会为函数字传送入五个参数:第1个参数正是该因素在相配元素中的索引,第3个参数正是该因素propertyName属性当前的值。函数的再次来到值正是为该因素的propertyName属性设置的值。

用法二:

jQueryObject.prop( object )
以指标格局而且安装大肆五个属性的值。对象object的各样属性对应propertyName,属性的值对应value。

留意:prop()函数的全数”设置属性”操作针对的是现阶段jQuery对象所相配的每三个要素;全体”读取属性”的操作只针对第3个特别的因素。
参数

请依照前边语法部分所定义的参数名称查找对应的参数。

参数 描述
propertyName String类型指定的属性名称。
value 可选/Object/Function类型指定的属性值,或返回属性值的函数。
object Object类型指定的对象,用于封装多个键值对,同时设置多项属性。

参数value能够是总结对象和数组在内的随机档案的次序。

返回值

prop()函数的再次来到值是专擅等级次序,重临值的品种取决于当前prop()函数推行的是”设置属性”操作依旧”读取属性”操作。

假设prop()函数实施的是”设置属性”操作,则赶回当前jQuery对象自己;借使是”读取属性”操作,则赶回读取到的属性值。

万一当前jQuery对象相配八个要素,再次回到属性值时,prop()函数只以内部首个门道杰出的因素为准。倘使该因素未有一点点名的习性,则重回undefined。

prop()和attr()的重大分歧:prop()函数针对的是DOM成分(JS
Element对象)的习性,attr()函数针对的是DOM成分所对应的文书档案节点的质量。详细情形请查看jQuery函数attr()和prop()的不同。

注意事项

一、假若经过prop()函数改动<input>和<button>成分的type属性,在大部分浏览器上校会抛出叁个荒唐,因为该属性一般不允许在中期退换。

二、纵然运用prop()函数操作表单成分的checked、selected、disabled等性情,借使该因素被选中(或剥夺),则赶回true,不然(意即HTML中绝非该属性)再次来到false。

叁、prop()函数还是能够安装或回到DOM成分的Element对象上的少数质量,比如:tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等品质。

四、在IE九及更早版本中,假使使用prop()函数设置的属性值不是3个简便的原始值(String、Number、Boolean),并且在对应的DOM元素被灭绝以前,该属性未有被移除,则恐怕会招致内部存款和储蓄器泄漏难点。假若您只是为了存储数据,提议你接纳data()函数,避防止内存泄漏难题。

示例&说明

以下边这段HTML代码为例:

<div id="n1">
  <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
  <input id="n3" name="order_id" type="checkbox" value="1">
  <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>

笔者们编辑如下jQuery代码:

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined
document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function
// prop()设置的属性也是针对元素(Element对象),因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer
// 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "//www.jb51.net/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // //www.jb51.net/
// 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

附:jquery中attr和prop的区别

在高版本的jquery引进prop方法后,什么日期该用prop?曾几何时用attr?它们八个里面有哪些界别?这一个主题材料就出现了。

至于它们四个的差别,网络的答案许多。这里谈谈自身的体会,作者的体会不会细小略:

对此HTML成分本身就含有的固有属性,在管理时,使用prop方法。
对于HTML成分大家团结自定义的DOM属性,在管理时,使用attr方法。

上边包车型大巴叙述也有一点点模糊,举多少个例证就明白了。

<a href=”” target=”_self”
class=”btn”>百度</a>

其一事例里<a>元素的DOM属性有“href、target和class”,那些属性正是<a>成分本人就含有的属性,也是W3C标准里就富含有这么些特性,或然说在IDE里能够智能提示出的习性,那个就叫做固有质量。管理那么些属性时,建议接纳prop方法。

<a href=”#” id=”link1″ action=”delete”>删除</a>

以此事例里<a>元素的DOM属性有“href、id和action”,很显明,前三个是本来属性,而前面2个“action”属性是大家和好自定义上去的,<a>成分自个儿是尚未那脾特性的。这种就是自定义的DOM属性。管理这几个属性时,提出采用attr方法。使用prop方法取值和设置属性值时,都会再次来到undefined值。

再举1个事例:

<input id=”chk一” type=”checkbox” />是还是不是可知
<input id=”chk贰” type=”checkbox” checked=”checked” />是还是不是可知

像checkbox,radio和select那样的要素,选中属性对应“checked”和“selected”,这个也属于固有属性,因而须要动用prop方法去操作技巧博得不错的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

若果上面使用attr方法,则会晤世:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

期待本文所述对大家jQuery程序设计有所支持。

你也许感兴趣的小说:

  • Jquery中attr与prop的分别详解
  • jQuery获取attr()与prop()属性值的办法及界别介绍
  • jquery决断复选框选中状态以及界别attr和prop
  • jQuery中 prop()
    attr()使用详解
  • jquery中attr和prop的分别分析
  • jQuery中attr()和prop()在修改checked属性时的界别
  • jQuery学习之prop和attr的界别示例介绍
  • jquery中prop()方法和attr()方法的界别浅析
  • jquery获取自定义属性(attr和prop)实例介绍
  • jquery
    获取自定义属性(attr和prop)的完结代码
  • 关于jquery中attr()和prop()方法的分裂

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website