参考：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. python聚类算法实战详细笔记 (python3.6+(win10、Linux))

    python聚类算法实战详细笔记 (python3.6+(win10.Linux)) 一.基本概念:     1.计算TF-DIF TF-IDF是一种统计方法,用以评估一字词对于一个文件集或一个语料库 ...

  2. 剑指offer二十二之从上往下打印二叉树

    一.题目 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 二.思路 二叉树的层次遍历,可以借助队列实现.具体思路详见注释. 三.代码 import java.util.ArrayList; i ...

  3. Springboot+ajax传输json数组以及单条数据的方法

    Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: 下面是相关的代码: pom.xml: <?xml v ...

  4. [转]asp.net core中的View Component

    解读ASP.NET 5 & MVC6系列(14):View Component http://www.cnblogs.com/TomXu/p/4496486.html

  5. 解决chrome，下载在文件夹中显示，调用错误的关联程序

    https://blog.csdn.net/qq_32337527/article/details/81778732?utm_source=blogxgwz0

  6. tomcat 日志详解

    1 tomcat  日志详解 1.1  tomcat 日志配置文件 tomcat 对应日志的配置文件:tomcat目录下的/conf/logging.properties. tomcat 的日志等级有 ...

  7. C#合并两个Dictionary的方法

    直接代码: public Dictionary<string, string> MergeDictionary(Dictionary<string, string> first ...

  8. UIKit 框架之UIAlertController

    IOS8之后增加了UIAlertController类,它可以表示UIAlertView和UIActionSheet.它继承自UIViewController. - (BOOL)application ...

  9. C# WebBrowser设置代理

    WebBrowser控件是基于IE浏览器的,所以它的内核功能是依赖于IE. code: class IEProxy { //设置代理选项 private const int INTERNET_OPTI ...

  10. vue权限路由实现方式总结

    使用全局路由守卫 实现 前端定义好路由,并且在路由上标记相应的权限信息 const routerMap = [ { path: '/permission', component: Layout, re ...