<!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. Android Button 按钮 设置 各种状态 图片 颜色

    有2个方法可以实现,一种是用 选择器 定义每种状态的图片 selec.xml <?xml version="1.0" encoding="utf-8"?& ...

  2. 请教如何用 peewee 实现类似 django ORM 的这种查询效果。

    本人新入坑的小白,如有不对的地方请包涵~~~! 在 django 中代码如下:模型定义: class Friends(models.Model): first_id = models.IntegerF ...

  3. caffe(11) 图像数据转换成db文件

    在深度学习的实际应用中,我们经常用到的原始数据是图片文件,如jpg,jpeg,png,tif等格式的,而且有可能图片的大小还不一致.而在caffe中经常使用的数据类型是lmdb或leveldb,因此就 ...

  4. BZOJ 3787 Gty的文艺妹子序列(分块+树状数组+前缀和）

    题意 给出n个数,要求支持单点修改和区间逆序对,强制在线. n,m<=50000 题解 和不带修改差不多,预处理出smaller[i][j]代表前i块小于j的数的数量,但不能用f[i][j]代表 ...

  5. POJ2104 K-th Number（线段树，二分，vector）

    题意 不带修改区间第k小.(n<=100000) 题解 建立线段数和vector数组(vector为当前区间排列之后的序列)(归并) 然后对于每一个询问二分答案. 问题就转化为区间有多少数小于等 ...

  6. 转载 ：Linux有问必答：如何在Debian或Ubuntu上安装完整的内核源码

    http://linux.cn/article-5015-1.html 问题:我需要为我的Debian或Ubuntu下载并安装完整树结构的内核源码以供编译一个定制的内核.那么在Debian或Ubunt ...

  7. vSphere VCSA5.5加入AD域环境问题记录

    vSphere VCSA5.5加入AD域环境问题记录 实验目的: 搭建一套vSphere VCSA5.5,并加入新搭建的AD域,并使用一个域用户登录VC,赋予对VC的只读权限. 实验环境: 使用VMW ...

  8. Centos7：yum安装apache，编译安装php5.6，不解析php的解决方法

    首先,说一下问题发生的场景: 因为懒,所以用 yum 安装 apache ,因为 centos 的源自带 php 5.4 不能符合环境要求,而不想用其他源,所以选择源码编译安装 php 5.6 安装完 ...

  9. 对比学习sass和stylus的常用功能

    在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言.本文涉及到的sas ...

  10. CSU 1510 Happy Robot

    1510: Happy Robot Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 19  Solved: 7 Description Input The ...