jquery13 attr() prop() val() addClass()等 : 对元素属性的操作
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script> jQuery.fn.extend({
attr
removeAttr
prop
removeProp
addClass
removeClass
toggleClass
hasClass
val
});
jQuery.extend({
valHooks
attr
removeAttr
attrHooks
propFix
prop
propHooks
}); $(function(){
$('#div1').attr('title','hello');
alert( $('#div1').attr('id') ); $('#div1').prop('title','hello');
alert( $('#div1').prop('id') );
----------------------------------------------------------
//setAttribute()
//. | [] var oDiv = document.getElementById('div1');
oDiv.setAttribute('title','hello');
oDiv.title = 'hello1';
oDiv['title'] = 'hello2';
----------------------------------------------------------
$('#div1').attr('miaov','妙味');//可以加自定义属性
$('#div1').prop('miaov','妙味');//不可以加自定义属性 alert($('#div1').attr('miaov'));//可以获取自定义属性
alert($('#div1').prop('miaov'));//不可以获取自定义属性
---------------------------------------------------------
alert($('#div1').prop('href'));//a标签href属性,
alert($('#div1').attr('href'));
---------------------------------------------------------
$('#div1').removeAttr('id');
alert($('#div1').attr('id'));
//对自带属性用attr操作,
$('#div1').removeProp('id');
alert($('#div1').prop('id'));//删不掉,
---------------------------------------------------------
$(document).attr('title','hello'); $('#div1').attr('miaov',null);//调用remove
//checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped alert( $('input').attr('checked') ); //checked
alert( $('input').prop('checked') ); //true
$('input').attr('checked','checked');//没问题
$('input').attr('checked',true);//没问题,做兼容了 $('#div1').removeAttr('class'); }); </script>
</head> <body>
<a id="div1" miaov="妙味" class="box" href="miaov.com">aaaaaaaaaaaaaaaaa</a>
<input type="checkbox">
<input type="text" tabindex="2">
<input type="text" tabindex="1">
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script> $(function(){
$('#div1').addClass('box2 box3');
$('#div1').removeClass('box3'); $('#div1').toggleClass('box3');//切换,有就删除没有就添加, alert( $('#div1').hasClass('box3') ); $('div').addClass(function(index){
alert(index);
return 'box'+index;
}); alert( 1 || 0 && 2 );//1,先后面在前面,&&优先级高于|| $('#div1').removeClass('box1 box2');
$('#div1').removeClass('');//全部删除 $('#div1').toggleClass('box2 box3')//有就删除没有就添加
$('#div1').toggleClass('box2 box3',true);//有没有都是add
$('#div1').toggleClass('box2 box3',false);//有没有都是删除 $('#div1').toggleClass(false);//已有的class全部删除
$('#div1').toggleClass(true);//删除的class全部添加进去
}); </script>
</head> <body>
<div class="">aaaaaaaaaaaa</div>
<div class="">aaaaaaaaaaaa</div>
<div class="">aaaaaaaaaaaa</div> <div id="div1" class="box1 box2">aaaaaa</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script> $(function(){ alert( $('#input1').val() );
$('#input1').val('hi');
alert( $('#input1').val() ); //兼容处理 valHooks : option select radio checkbox
alert( $('checkbox').get(0).type );//checkbox
alert( $('select').get(0).type );//select-one alert( $('option').eq(0).get(0).nodeName );
-------------------------------------------------------------------------
$('#input2').click(function(){ alert( $('select').val() );//select多选时弹出数组 });
$('#select').val(111);//111被选中了
----------------------------------------------------------------------
$('#input1').val(123123); $('#input2').val(['hello']); $('select').val(222);
}); window.onload = function(){ //window.onload 是原生写法,$(function()是jQuery写法
var oP = document.getElementsByTagName('option')[0];
alert( oP.attributes.value.specified );
}; </script>
</head> <body>
<input type="text" id="input1" value="hello">
<select multiple>
<option>111</option>
<option disabled>222</option>
<option>333</option>
</select>
<input type="checkbox" id="input2" value="hello">
</body>
</html>
jquery13 attr() prop() val() addClass()等 : 对元素属性的操作的更多相关文章
- jQuery07源码 (3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作
var nodeHook, boolHook, rclass = /[\t\r\n\f]/g, rreturn = /\r/g, rfocusable = /^(?:input|select|text ...
- jquery之 css()方法。用法类似的有attr(),prop(),val()
[注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...
- jQuery.attributes源码分析(attr/prop/val/class)
回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和p ...
- [Web 前端 ] Jquery attr()方法 获取或修改 对象的属性值
cp from : https://blog.csdn.net/gf771115/article/details/18086707 jquery中用attr()方法来获取和设置元素属性,attr是at ...
- jQuery元素属性操作
在jQuery中,用attr()方法来获取或者设置元素属性,removeAttr()方法用来删除元素属性. attr() 实例: var $para=$('p');//获取<p>节点 va ...
- Javascript操作元素属性方法总结
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery笔记三——text/html/val/attr/prop
1.获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() ...
- jQuery 属性操作attr().prop().text().html().val()
这些方法用于获取和设置 DOM 元素的属性. 一.attr(): <!--样式:在style里面写的,用css来操作.--> <!--属性:在元素里面写的,用attr方法操作.--& ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
随机推荐
- WEB前端开发中的SEO注意点
近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写 ...
- BZOJ 4551 HEOI 2016 树 (并查集)
思路: 考虑时光倒流 这不就是并查集裸题了-----. //By SiriusRen #include <cstdio> #include <cstring> #include ...
- jQuery实现tab标签切换效果
技巧一.jQuery :eq() 选择器 定义和用法 :eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 经常与其 ...
- Win 7系统倒计时!
3月25日消息,近日微软已经开始通知当前正在使用Windows 7的用户,该操作系统“接近尾声”.微软表示计划在2020年1月14日终止对Windows 7的所有支持.但结束Windows 7似乎并不 ...
- 紫书 例题 10-15 UVa 1638(递推)
从大到小安排杆子 分三种情况 (1)插到最左边,那么左边看到了杆子会多一个 (2)插到最右边,那么右边看到了杆子会多一个 (3)插到中间边,那么不影响左边和右边看到的杆子数 具体看代码 #includ ...
- [NOI2015]品酒大会(SA数组)
[NOI2015]品酒大会 题目描述 一年一度的"幻影阁夏日品酒大会"隆重开幕了.大会包含品尝和趣味挑战 两个环节,分别向优胜者颁发"首席品酒家"和" ...
- Java基础学习总结(18)——网络编程
一.网络基础概念 首先理清一个概念:网络编程 != 网站编程,网络编程现在一般称为TCP/IP编程. 二.网络通信协议及接口 三.通信协议分层思想 四.参考模型 五.IP协议 每个人的电脑都有一个独一 ...
- 三种记录 MySQL 所执行过的 SQL 语句的方法
程式 Debug 有時後從前面第一行追起來很辛苦(程式碼太多或 compile 過), 另一種做法就是從後面追起來, 反正最後寫入的是 DB, 那就從 DB 開始往前推, 所以就是要抓程式是執行哪些 ...
- [Poi] Build a Vue App with Poi
Poi uses the Vue babel presets by default, so there is no additional install required to get up-and- ...
- 什么是 "署名-非商业性使用-同样方式共享"
什么是 "署名-非商业性使用-同样方式共享" 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致& ...