<!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()等 : 对元素属性的操作的更多相关文章

  1. jQuery07源码 (3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作

    var nodeHook, boolHook, rclass = /[\t\r\n\f]/g, rreturn = /\r/g, rfocusable = /^(?:input|select|text ...

  2. jquery之 css()方法。用法类似的有attr(),prop(),val()

    [注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...

  3. jQuery.attributes源码分析(attr/prop/val/class)

    回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和p ...

  4. [Web 前端 ] Jquery attr()方法 获取或修改 对象的属性值

    cp from : https://blog.csdn.net/gf771115/article/details/18086707 jquery中用attr()方法来获取和设置元素属性,attr是at ...

  5. jQuery元素属性操作

    在jQuery中,用attr()方法来获取或者设置元素属性,removeAttr()方法用来删除元素属性. attr() 实例: var $para=$('p');//获取<p>节点 va ...

  6. Javascript操作元素属性方法总结

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. jQuery笔记三——text/html/val/attr/prop

    1.获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() ...

  8. jQuery 属性操作attr().prop().text().html().val()

    这些方法用于获取和设置 DOM 元素的属性. 一.attr(): <!--样式:在style里面写的,用css来操作.--> <!--属性:在元素里面写的,用attr方法操作.--& ...

  9. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

随机推荐

  1. Magento-设置产品显示的条数和默认条数

    在Block/Product/List/Toolbar.php里面,控制每页显示条数和默认条数的方法如下: 1.每页显示条数: protected function _getAvailableLimi ...

  2. WLAN 感知

    WLAN 感知 通过 Android 8.0 中新增的 WLAN 感知功能,支持设备可以直接使用 WLAN 感知协议发现其他设备.与其他设备进行互连,以及将覆盖范围扩展到其他设备(Android 9 ...

  3. [NOI2010]海拔 平面图转对偶图 最小割

    题解: 首先,我们不难猜到高度只有 $0$ 或 $1$ 两种可能,而且高度为 0 的地区组成一个联通块,高度为 1 的地区组成一个联通块.只有这样,人们所耗费的体力才是最小的.得出这个结论,题目就成了 ...

  4. [POI2010]KLO-Blocks（单调栈）

    题意 给出N个正整数a[1..N],再给出一个正整数k,现在可以进行如下操作:每次选择一个大于k的正整数a[i],将a[i]减去1,选择a[i-1]或a[i+1]中的一个加上1.经过一定次数的操作后, ...

  5. [洛谷P2085]最小函数值

    题目大意:有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,要求出所有函数的所有函数值中最小的m个(如有重复的要输出多个 ...

  6. 认识Vue组件

    前言 Vue.js是一套构建用户界面的渐进式框架(官方说明).通俗点来说,Vue.js是一个轻量级的,易上手易使用的,便捷,灵活性强的前端MVVM框架.简洁的API,良好健全的中文文档,使开发者能够较 ...

  7. Unity WebGL 窗口自适应

    unity 打包好WebGL后,用文本编辑器编辑打包生成的 index.html 文件 在生成的html里面修改代码     <script type="text/javascript ...

  8. Maven学习总结（21）——Maven常用的几个核心概念

    在使用Maven的过程中,经常会遇到几个核心的概念,准确的理解这些概念将会有莫大的帮助. 1. POM(Project Object Model)项目对象模型 POM 与 Java 代码实现了解耦,当 ...

  9. 洛谷 P2630 图像变换

    P2630 图像变换 题目描述 给定3行3列的图像各像素点灰度值,给定最终图像,求最短.字典序最小的操作序列. 其中,可能的操作及对应字符有如下四种: A:顺时针旋转90度: B:逆时针旋转90度: ...

  10. 浴谷 P1768 天路

    P1768 天路 题目描述 “那是一条神奇的天路诶~,把第一个神犇送上天堂~”,XDM先生唱着这首“亲切”的歌曲,一道猥琐题目的灵感在脑中出现了. 和C_SUNSHINE大神商量后,这道猥琐的题目终于 ...