• jQuery 快捷操作


     快捷操作

    1. class属性值操作

    $().attr(‘class’,值);

    $().attr(‘class’);

    $().removeAttr(‘class’);  //删除class的所有属性

    $().addClass(值);                //给class属性追加信息值

    $().removeClass(值);     //删除class属性中的某个信息值

    $().toggleClass(值);       //开关效果,有就删除,没有就添加  //可以在网页上做内容展开和关闭的操作

    /*********************************************************************************/

    <script type="text/javascript">
    function f1(){
    //设置class属性信息
    //$("div").attr('class','apple');
    //$("div").attr('class','orange');
    //$("div").attr('class','pear');
    //以上三行代码同时执行,后者覆盖前者,class最后体现pear的信息

    //给class属性追加信息值
    $("div").addClass('apple');
    $("div").addClass('orange');
    $("div").addClass('pear');
    }
    function f2(){
    //删除class属性的信息值
    $('div').removeClass('orange');
    $('div').removeClass('apple');
    $('div').removeClass('pear');
    }
    function f3(){
    //开关class属性值操作
    $('div').toggleClass('orange');
    }
    </script>
    <style type="text/css">
    .apple{300px; height:200px; border:2px solid blue;}
    .orange{background-color:lightblue;}
    .pear{font-size:30px;}
    </style>
    </head>
    <body>
    <h1>class属性快捷操作</h1>

    <div>this is jquery subject</div>

    <input type="button" value="设置" onclick="f1()" />
    <input type="button" value="删除class的属性值" onclick="f2()" />
    <input type="button" value="开关class属性值操作" onclick="f3()" />

    /*********************************************************************************/

    2. 标签包含内容操作

    <div>hello<span>world</span></div> 

    javascript操作

    dvnode.innerHTML 获得div包含的信息

    dvnode.innerHTML = XXX;  设置div包含的内容

    (innerHTML不是w3c标准技术,许多浏览器对其有支持而已)

    jquery操作:

    $().html();           //获得节点包含的信息,可能包含节点标签

    $().html(信息);    //设置节点包含的内容

    $().text();                     //获得节点包含的“文本字符串信息”内容,过滤掉html标签

    $().text(信息);              //设置节点包含的内容(有html标签就把“><”符号变为符号实体)

    /***************************************************************************/

    function f1(){
    //获取-(普通文本 和 html标签 都可以获得)
    console.log($('div').html());//this is <p>jquery <span>subject</span></p>
    //获取-只是针对文本内容其作用(过滤html标签)
    console.log($('div').text());//this is jquery subject
    }
    function f2(){
    //设置-(普通文本 和 html标签 都可以获得,html标签也可以被浏览器正常解析)
    //$('div').html("欢迎访问 <a href='http:www.baidu.com'>百度</a>");
    //设置-主要针对文本内容,如果有html标签,<>符号变为符号实体
    $('div').text("欢迎访问 <a href='http:www.baidu.com'>百度</a>");
    }

    <h1>&lt;标签&gt;包含内容快捷操作</h1>

    <div>this is <p>jquery <span>subject</span></p></div>

    <input type="button" value="获取" onclick="f1()" />
    <input type="button" value="设置" onclick="f2()" />

    /***************************************************************************/

     html() 和 text()方法的区别:

    ①     获取内容

    前者可以获取html标签 和 普通字符串内容

    后者只获取普通字符串内容

    ②     设置内容

    前者可以设置html标签 和 普通字符串内容

    后者只设置普通字符串内容,如果内容里边有tag标签内容,就把其中的”<”“>”符号转变为符号实体 <-----&lt;  >----&gt;   空格------&nbsp;

    以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容,则使用效果一致。

    css样式操作

    $().css(name,value);         //设置

    $().css(name);            //获取

    $().css(json对象);         //同时修改多个css样式

    3.1 css()样式操作特点:

    ① 样式获取,jquery可以获取 行内、内部、外部的样式。

    dom方式只能获得行内样式

    ② 复合属性样式需要拆分为"具体样式"才可以操作
    例如:   background 需要拆分为  background-color background-image 等进行操作

           border: border-left-style  border-left-width  border-left-color 等

           margin: margin-left  margin-top 等

     value属性快捷操作

    $().attr(‘value’);

    $().attr(‘value’,信息值);

    快捷操作:

    $().val();               //获得value属性值

    $().val(信息值);     //设置value属性的值

    该val方法在 复选框、单选按钮、下拉列表 的使用有凸出表现。

    复选框操作

    全选、反选、全不选

    $().attr(‘checked’,true);        //设置复选框选中

    $().attr(‘checked’,false);       //取消复选框选中

    $().attr(‘checked’);               //判断复选框选中情况,返回布尔值

  • 相关阅读:
    Clipper库中文文档详解
    JavaScript-Clipper.js
    安装Scrapy遇到的问题
    Python中if __name__ == '__main__'的使用
    写出一段Python代码实现删除一个list里面的重复元素
    Python 内置函数(反射类)
    Python 内置函数(集合操作,IO操作)
    Python 内置函数(数学运算类,逻辑判断类)
    Python 推导式(列表推导式,字典推导式,集合推导式)
    Python 闭包和装饰器
  • 原文地址:https://www.cnblogs.com/yd09023/p/5870657.html
Copyright © 2020-2023  润新知