<!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. Strings are immutable

    It is tempting to use the [] operator on the left side of an assignment, with the intention of chang ...

  2. Laravel-错误调试与记录日志

    Laravel-错误调试与记录日志 标签(空格分隔): php 错误调试 配置 修改/config/app.php 'debug' => env('APP_DEBUG', true), 开启de ...

  3. AngularJs轻松入门（九）与服务器交互

    AngularJs从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一 ...

  4. cnmp安装失败，报错npm ERR! enoent ENOENT: no such file or directory,

    1.cnmp安装失败 2.提示如下: bogon:node_modules liangjingming$ sudo npm install cnpm -g --registry=https://reg ...

  5. theano import error (win10 python2.7)

    因为项目需要,在win10-64位电脑上配置theano.但是一直有 import error的错误,找不到解决方法.作为一个python新手,实在搞不定,请大家不吝赐教!小女子不胜感激! 按照网上的 ...

  6. vuejs keep-alive

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 「POJ3237」Tree(树链剖分）

    题意 给棵n个点的树.边有边权然后有三种操作 1.CHANGE i v 将编号为i的边权变为v 2.NEGATE a b 将a到b的所有边权变为相反数. 3.QUERY a b 查询a b路径的最大边 ...

  8. MPI对道路车辆情况的Nagel-Schreckenberg 模型进行蒙特卡洛模拟

    平台Ubuntu 16.04,Linux下MPI环境的安装见链接:https://blog.csdn.net/lusongno1/article/details/61709460 据 Nagel-Sc ...

  9. caioj 1412 动态规划3：a+b问题(完全背包方案数)

    每个素数就是一个物品,然后就相当于求完全背包方案数 把max改成+就好了. #include<cstdio> #include<vector> #include<cstr ...

  10. Win10平台下通过VMware虚拟机安装Win7、Ubuntu、Mac

    1.安装VMware14.1.1 下载地址:https://download.csdn.net/download/jasonczy/10611423 产品秘钥: CG54H-D8D0H-H8DHY-C ...