参考：http://jquery.cuishifeng.cn/css.html

1.属性操作

--------------------------属性

$("").attr();   查属性 自己定义属性

$("").removeAttr();

$("").prop(); 一个值查属性 两个值赋值 返回布尔值类型 固有属性

$("").removeProp();

--------------------------CSS类

$("").addClass(class|fn)

$("").removeClass([class|fn])

--------------------------HTML代码/文本/值

$("").html([val|fn])

$("").text([val|fn])

$("").val([val|fn|arr]) 一般用于text

---------------------------

$("").css("color","red")

2.循环each

//方式一
$.each(arr,funcion(index,obj){
　　console.log(index);
　　console.log(obj)
})

//方式二
$(selector).each(function(index,element){
　　console.log($(this))
})

eg.正反选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.11.3.min.js"></script>

    <script>

             function selectall(){

                 $("table :checkbox").prop("checked",true)

             }

             function cancel(){

                 $("table :checkbox").prop("checked",false)

             }

             function reverse(){

                 //                 var idlist=$("table :checkbox")

//                 for(var i=0;i<idlist.length;i++){

//                     var element=idlist[i];

//

//                     var ischecked=$(element).prop("checked")

//                     if (ischecked){

//                         $(element).prop("checked",false)

//                     }

//                     else {

//                         $(element).prop("checked",true)

//                     }

//

//                 }

//    jquery循环的两种方式

                 //方式一

//                 li=[10,20,30,40]

//                 dic={name:"yuan",sex:"male"}

//                 $.each(li,function(i,x){

//                     console.log(i,x)

//                 })

                 //方式二

//                    $("tr").each(function(){

//                        console.log($(this).html())

//                    })

                 $("table :checkbox").each(function(){

                     $(this).prop("checked",!$(this).prop("checked"));

//                     if ($(this).prop("checked")){

//                         $(this).prop("checked",false)

//                     }

//                     else {

//                         $(this).prop("checked",true)

//                     }

                     // 思考:如果用attr方法可以实现吗?

                 });

             }

    </script>

</head>

<body>

     <button onclick="selectall();">全选</button>

     <button onclick="cancel();">取消</button>

     <button onclick="reverse();">反选</button>

     <table border="1">

         <tr>

             <td><input type="checkbox"></td>

             <td>111</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>222</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>333</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>444</td>

         </tr>

     </table>

</body>

</html>

3.文档处理

//创建一个标签对象

    $("<p>")

//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");

    $("").appendTo(content)       ----->$("p").appendTo("div");

    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");

    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");

    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换

    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty() 清空内容 不删除标签元素
    $("").remove([expr]) 标签和内容全部删除

//复制

    $("").clone([Even[,deepEven]])

eg：复制克隆

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

            <div class="outer">

                <div class="item">

                        <input type="button" value="+" onclick="add(this);">

                        <input type="text">

                </div>

            </div>

<script src="jquery-1.11.3.min.js"></script>

    <script>

            //var $clone_obj=$(self).parent().clone();  // $clone_obj放在这个位置可以吗?

            function add(self){

                // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加

                 var $clone_obj=$(self).parent().clone();

                 $clone_obj.children(":button").val("-").attr("onclick","removed(this)");

                 $(self).parent().parent().append($clone_obj);

            }

           function removed(self){

               $(self).parent().remove()

           }

    </script>

</body>

</html>

4.css操作

CSS

        $("").css(name|pro|[,val|fn])

    位置

        $("").offset([coordinates])

        $("").position()

        $("").scrollTop([val])

        $("").scrollLeft([val])

    尺寸

        $("").height([val|fn])

        $("").width([val|fn])

        $("").innerHeight()

        $("").innerWidth()

        $("").outerHeight([soptions])

        $("").outerWidth([options])

4.事件

页面载入

    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

    $(document).ready(function(){}) -----------> $(function(){})

事件处理

    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

    //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定

    //  click事件；

    [selector]参数的好处:

        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$('ul li').on('click', function(){console.log('click');})的绑定方式和

        //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个

        //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

        //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加

        //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

    [data]参数的调用:

             function myHandler(event) {

                alert(event.data.foo);

                }

             $("li").on("click", {foo: "bar"}, myHandler)

https://www.cnblogs.com/yuanchenqi/articles/6070667.html

JQuery 元素操作 each循环的更多相关文章

  1. jQuery元素操作1

    元素操作 1.2.1 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 1. ...

  2. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...

  3. jQuery元素操作

    jQuery中创建元素及追加元素 DOM中可以动态创建元素:document.createElement(“标签的名字”); jQuery中同样可以创建元素标签,并且返回的就是jQuery对象,可以直 ...

  4. javascript(JQuery)元素操作

    html代码如下: <div id="picK"> <ul> <li style="float:left;width:90px;" ...

  5. javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

  6. jquery/js iframe 元素操作

    1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...

  7. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  8. jquery元素节点操作

    jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...

  9. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

随机推荐

  1. OSS和CDN配置使用

    Oss和cdn目的就是: 1 把资源文件和程序分开存储 2 可以通过cdn缓存加速   下面介绍阿里云OSS和CDN如何配制 一  阿里云开通子RAM账户 1  不使用主账号访问OSS,需要创建子RA ...

  2. python 代码的缩进位置决定执行部分

    通过近期的代码训练,我发现同样的一个语句,在同一行缩进的位置不同,决定的执行部分也不同.先给一个例子(我想打出1-100中的前20个偶数) 比较第一张图和第二张图.第一张截图实现了我想要的功能.可是当 ...

  3. lower类的accessCode解读

    /** Access codes for dereferencing(解引用), assignment, * and pre/post increment/decrement. * Access co ...

  4. 【广州.NET社区推荐】.NETCore 平台上的日志集成组件 TomatoLog

    TomatoLog简介 TomatoLog 是一套在 .NETCore 平台上最简单易用的日志集成组件,具有高度灵活的使用方式,完全可定义配置的可扩展性,使用异步写入,业务完全解耦,客户端的一键安装. ...

  5. 代码查看php是否已开启rewrite功能模块

    通过php代码来查询,是否把rewrite模块打开了 <?php $result = apache_get_modules(); if(in_array('mod_rewrite', $resu ...

  6. leetcode 98,判断二叉树为BST

    方法一,记录子树的上界和下界,root的左子树一定小于root的值,root的右子树一定大于root的值,然后递归左子树和右子树 public class Solution { public bool ...

  7. onkeydown事件

    <img src="images/hot.jpg" alt="" id="imgId" class="img1"/ ...

  8. 【WePY小程序框架实战二】-页面结构

    [WePY小程序框架实战一]-创建项目 项目结构 |-- dist |-- node_modules |-- src | |-- components |-- a.wpy |-- b.wpy |-- ...

  9. Spring Security 源码解析(一)

    上篇 Spring Security基本配置已讲述了Spring Security最简单的配置,本篇将开始分析其基本原理 在上篇中可以看到,在访问 http://localhost:18081/use ...

  10. FileStream文件的使用

    // FileStream//(操作字节的)水一勺一勺的 可以操作任意格式的文件           //File一下子就读出来 //读取文本文件 // FileMode.OpenOrCreate你针 ...