<!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. 安卓开发--HttpDemo01

    package com.cnn.httpdemo01; import android.app.Activity; import android.content.Intent; import andro ...

  2. 安卓第一课：android studio 的环境搭建与真机运行以及遇到的问题

    AS的下载: https://developer.android.com/studio/index.html AS的安装: android studio, sdk, virtual device都要安 ...

  3. Apache Bench测试

    - 压力测试神器 Siege - Locust Web测压工具python开源 - 介绍: ab是apachebench命令的缩写. ab的原理:ab命令会创建多个并发访问线程,模拟多个访问者同时对某 ...

  4. OpenGL编程逐步深入（六）平移变换

    准备知识 从这一节我们开始接触3D对象各种各样的变换,使其显示在屏幕上看起来有深度的感觉.通常每一种变换都是通过矩阵来实现的,把这些变换矩阵逐个的乘起来,然后用乘积乘以顶点位置.在每个教程中,我们致力 ...

  5. JQ加载进度条动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. SQL--通过身份证号得到年龄的

    /* =======================================创 建 人:CuiYaChao创建日期:2017-08-16功能描述:通过身份证号来计算年龄单元名称: Fun_Ge ...

  7. UVa 10305 Ordering Tasks【拓扑排序】

    题意:给出n件事情,m个二元组关系,求它们的拓扑序列 用的队列来做 #include<iostream> #include<cstdio> #include<cstrin ...

  8. caffe(6) Blob,Layer,Net 以及对应配置文件的编写

    深度网络(net)是一个组合模型,它由许多相互连接的层(layers)组合而成.Caffe就是组建深度网络的这样一种工具,它按照一定的策略,一层一层的搭建出自己的模型.它将所有的信息数据定义为blob ...

  9. 【Codeforces Beta Round #45 D】Permutations

    [题目链接]:http://codeforces.com/problemset/problem/48/D [题意] 给你n个数字; 然后让你确定,这n个数字是否能由若干个(1..x)的排列连在一起打乱 ...

  10. Spring-statemachine Action不能并发执行的问题

    Spring-statemachine版本:当前最新的1.2.3.RELEASE版本 这几天一直被Action是串行执行搞得很郁闷,写了一个demo专门用来测试: public static void ...