<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>

    <script type="text/javascript">

        //设置(增加)name值为none5的input元素的属性id值为none5

        //展示id值为none5元素的属性name值

        var Init1 = function () {

            $("input[name='none5']").attr("id", "none5");

            alert($("#none5").attr("name"));

        }

        //移除id为none6元素的class属性

        var Init2 = function () {

            $("#none6").removeAttr("class");

        }

        //prop测试

        var Init3 = function () {

            //alert($("#none6").prop("class"));//获取属性class值

            //$("input[name='none5']").prop("id", "none5");//设置(新增)属性id值为none5

            //$("input[name='none5']").prop({ "id": "none5", "value": "none5Value" });//设置属性id为none5，value为none5Value

            $("input[name='none5']").prop("value", function () { if (1) return "kktest" });//设置属性value值为function返回的kktest

        }

        //关于attr与prop的区别参考http://blog.sina.com.cn/s/blog_655388ed01017cnc.html

        //                    参考http://www.cnblogs.com/lujiahong/articles/2289867.html

        //.prop()方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。

        //其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

        //prop及removeProp测试

        var Init4 = function () {

            //$("input[name='none3']").prop({ "id": "none3", "value": "testValue" });

            //$("#none3").removeProp("value");

            //以上测试属性均是html中存在的，如果适用removeProp方法，则值变为undefined.应使用removeAttr方法

            $("input[name='none3']").prop({ "test": "test1", "test3": "test3" });

            alert($("input[name='none3']").prop("test"));

            alert($("input[name='none3']").prop("test3"));

            $("input[name='none3']").removeProp("test").removeProp("test3");

        }

        //addClass与removeClass

        var Init5 = function () {

            $("#none4").addClass("cls1 cls3");

            alert($("#none4").attr("class"));

            $("#none4").removeClass("cls1");

            //$("#none4").removeClass("cls1 cls3");

            //$("#none4").removeClass();//只移除属性class的值，要移除属性使用removeAttr

            //$("#none4").removeAttr("class");

        }

        var count = 0;

        var Init6 = function () {

            $("#none4").toggleClass("cls1");

            $("#none4").click(function () {

                $(this).toggleClass("highlight", count++ % 3 == 0);

            });//根据count++ % 3 == 0值toggle类highlight

        }

        //html()设置或获取html内容

        //text()设置或获取内容

        //val()设置或获取值  注意arrayArray<String>V1.0用于 check/select 的值

        $(Init6);

    </script>

</head>

<body>

    <input name="none2" />

    <form>

        <label>Name:</label>

        <input name="name" />

        <fieldset>

            <label>Newsletter:</label>

            <input name="newsletter" />

        </fieldset>

    </form>

    <input class="cls1" name="none" />

    <input class="cls1" name="none5" />

    <input id="none6" class="cls1" name="none6" />

    <input name="none3" />

    <input id="none4" />

</body>

</html>

Jquery属性练习的更多相关文章

  1. jQuery属性/CSS使用例子

    jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...

  2. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  3. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

  4. jQuery属性操作总结

    jquery属性包括以下几个: attr(name|pro|key,val|fn) removeAttr(name) prop(n|p|k,v|f)1.6+ removeProp(name)1.6+ ...

  5. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  6. 前端开发之jQuery属性和文档操作

    主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作, ...

  7. jquery 属性选择器

    jquery 属性选择器   第一种根据属性选择E[attr] $("[title]").click().......... 即选择所有元素内 属性带有title的元素即<l ...

  8. jquery——属性操作、特殊效果

    1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. Jquery属性操作（入门二）

    ********JQuery属性相关的操作******** 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个 ...

  10. jQuery属性和样式操作

    回顾 1. jquery基本使用 <script src="jquery.min.js"></script><script> $(functio ...

随机推荐

  1. python-命令模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 命令在发送方被激活,而在接收方被响应.一个对象既可以作为命令的发送方,也可以作为 ...

  2. 为JavaScript正名--读你不知道的JavaScript(持续更新..)

    你不知道的JavaScript上卷 JavaScript和Java的关系就像Carnival和Car的关系一样,八竿子打不着. JavaScript易上手,但由于其本身的特殊性,相比其他语言能真正掌握 ...

  3. oop(Object Oriented Programming)

    嗯,昨天忙了一天没来及发,过年啊,打扫啊,什么搽窗户啊,拖地啊,整理柜子啊,什么乱七八糟的都有,就是一个字,忙. 好了,废话也不多说,把自己学到的放上来吧.嗯,说什么好呢,就说原型链啊 原型对象 每个 ...

  4. HTML中的元素分类

    HTML中有很多的标签(元素),可以按照这些元素在网页中所占的空间情况进行分类.具体可以这样简单的分类: 1.块级元素:指的是在网页中该元素独自占据网页的一行显示区域,即当使用了该元素后,该元素会使下 ...

  5. Nginx的rewrite(地址重定向)剖析

    1.rewrite语法: 指令语法:rewrite regex replacement[flag]; 默认值:none 应用位置:server.location.if rewrite是实现URL重定向 ...

  6. ngnix https

    server {            listen       80;#端口号        server_name  www.xxxx.net;#本机                charset ...

  7. 标准标签、<jsp:include>、<jsp:forward>

    使用方法 标准标签在jsp页面直接编写即可,因为标准标签是JSP规范提供的,所有容器都支持. 被替代性 标准标签的许多功能都可以被JSTL与EL表达式语言所替代. 作用 标准标签可协助编写JSP时减少 ...

  8. Bootstrap源码分析系列之整体架构

    作为一名合格的前端工程师,你肯定听说过Bootstarp框架.确实可以说Bootstrap框架是最流行的前端框架之一.可是也有人说Bootstrap是给后端和前端小白用的,我认为只要学习它能给我们前端 ...

  9. react+spring 记录跨域问题的解决方法

    react 跨域访问后台,默认是有跨域问题,并且火弧和谷歌浏览器,对跨域问题展示还不一样. 谷歌浏览器如下图: 此处状态是200,然而在Response却没有任何信息,如下图 然而火弧浏览器,对该问题 ...

  10. 使用托管快照创建作为 Azure 托管磁盘存储的 VHD 的副本

    创建快照 创建 OS 或数据磁盘 VHD 的快照,以便将其用作备份或用于排查 VM 问题. 快照是 VHD 的完整只读副本. 使用 Azure 门户创建快照 登录到 Azure 门户. 首先在左上角单 ...