<!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. 85.Mongoose指南 - Schema

    转自:https://www.bbsmax.com/A/pRdBnKpPdn/ 定义schema 用mongoose的第一件事情就应该是定义schema. schema是什么呢? 它类似于关系数据库的 ...

  2. iOS菜鸟成长笔记（3）——斯坦福公开课学习（1）

    一.iOS四层结构 1.Core OS 是用FreeBSD和Mach所改写的Darwin, 是开源.符合POSIX标准的一个Unix核心.这一层包含或者说是提供了整个iPhone OS的一些基础功能, ...

  3. 使用regasm注册.net com组件出现不是有效的.net程序集的解决办法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在电脑上装有VS 2008和VS 2010.使用VS 2010编写了一个C# com组件:MyCom(基于.net f ...

  4. 使用 Beego 搭建 Restful API 项目

    1 环境准备 首先你需要在你的环境安装以下软件: go:编程语言运行环境 git:版本控制工具 beego:go 语言流行的开发框架 bee:beego 配套的快速搭建工具 你喜欢的数据库:这里以 M ...

  5. poj2728 Desert King（最小生成树+01分数规划=最优比率生成树）

    题意 n个点完全图,每个边有两个权值,求分数规划要求的东西的最小值. (n<=1000) 题解 心态炸了. 堆优化primT了. 普通的就过了. 我再也不写prim了!!!! 咳咳 最优比率生成 ...

  6. Vue代理&跨域

    Vue 本地代理 纯前端技术解决跨域 vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改do ...

  7. Hadoop2 伪分布式部署

    一.简单介绍 二.安装部署 三.执行hadoop样例并測试部署环境 四.注意的地方 一．简单介绍 Hadoop是一个由Apache基金会所开发的分布式系统基础架构,Hadoop的框架最核心的设计就是: ...

  8. C语言typedef struct具体解释

    在C中定义一个结构体要用typedef,如: typedef struct Student { int a; }Stu; 于是在声明变量的时候就能够:Stu stu1;(假设没有typedef就必须用 ...

  9. Raphaeljs入门到精通（一）

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

  10. iOS 7 UI 过渡指南 - 支持续 iOS 6（iOS 7 UI Transition Guide - Supporting iOS 6）

    iOS 7 UI Transition Guide Preparing for Transition Before You Start Scoping the Project Supporting i ...