JQuery学习---JQuery深入学习

最新推荐文章于 2024-05-30 13:59:14 发布

weixin_30613343

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量116

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/ftl1012/p/9397581.html

版权

属性操作

      $("p").text()    $("p").html()   $(":checkbox").val()

      $(".test").attr("alex")   $(".test").attr("alex","sb")

      $(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")

      $(".test").prop("checked",true)

      $(".test").addClass("hide")

<body>
      <input id='ck' type="checkbox" school="peking">
</body>
<script src="jquery-3.2.1.js"></script>
// attr表示自定义的属性，一个参数标书属性，2个参数表示参数和参数值
$("#ck").attr("checked","true");    //添加属性checked
$("#ck").removeAttr("checked");     //取消属性checked  在JQ3中，取消属性不能用attr("checked","false"),必须用remove
// prop表示固有的属性【最适用selected和checked】
 $("#ck").prop("checked",true); 
 $("#ck").prop("checked",false);    // 注意这里布尔值不带引号，JQ3中取消属性不能remove,必须使用不带引号的布尔值
</script>

初始值：

用prop修改：自定义属性修改失败，固定属性修改成功[内部有一个Attributes集合，设置成功与否与此有关]

用attr修改[此时id=xxx]：attr都可以进行修改成功[内部有2个状态，true和false,自定义的默认undefied]

总结一下：

JQ3中： attr的取消必须remove; prop的取消使用不带引号的布尔值参数

固有属性[select,checked]用prop; 自定义属性用attr

文档处理

内部插入 $("#c1").append("<b>hello</b>")     $("p").appendTo("div")

                   prepend()    prependTo()

外部插入 before() insertBefore() after insertAfter()

              replaceWith()   remove() empty() clone()

取值操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
    <input id='ck' type="text" value="你好">
 <input type="checkbox" name="hobby" value="basketball">  <!-- value默认是on,如果value有则显示本身值-->
</body>
</html>
    <script src="jquery-3.2.1.js"></script>
<script>
    // 取出value属性
    console.log($(":text").val());        //打印：你好，取值操作
    $(":text").val("hello world");        //打印:hello world, 此时修改了框内内容
    console.log($(":checkbox").val());    //打印:basketball，取值操作
</script>

父子类直接的插入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
    <div id="div1" style="color: yellowgreen">div1
        <p id="p0" style="color: #c233cd">inner_p0</p>
        <p id="p2" style="color: #3e40cd">sbulings_p2</p>
    </div>
    <p id="p1">outer_p1</p>
</body>
</html>
    <script src="jquery-3.2.1.js"></script>
<script>
    // ------------------------------内部插入------------------------------
//      $("#div1").append($("#p1"));    // div1 -> inner_p0 -> sbulings_p2 -> outer_p1
//      $("#p1").appendTo($("#div1"));  // div1 -> inner_p0  -> sbulings_p2  -> outer_p1
//      $("#div1").prepend($("#p1"));   // outer_p1 -> div1 -> inner_p0 -> sbulings_p2
//      $("#p1").prependTo($("#div1")); // outer_p1 -> div1 -> inner_p0 -> sbulings_p2
    // ------------------------------外部插入------------------------------
//        $("#div1").after($("#p1"));     // div1 -> inner_p0 -> sbulings_p2 -> outer_p1
        $("#p1").before($("#div1"));      // div1 -> inner_p0 -> sbulings_p2 -> outer_p1
</script>

文件操作之删除：

remove(): 删除本标签以及内容

empty() : 仅仅情况了内容，但保留了本标签

jQuery事件绑定补充之委托

$('li').click(function () {
    // 方法一
})
$('li').on('click', function () {
    // 方法二
})
// 基于Jquery的委托绑定
 $('td').on('click', '.td-delete', function () {
   $('.remove, .shade').removeClass('hide')
 })

事件绑定：

【更多参考】http://jquery.cuishifeng.cn/ready.html

1.DOM下操作

2. jQuery操作[去掉了on的onclick()]

DOM下的操作【复习】：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
   <p id="p1" οnclick="func1(this)">hello world 2017</p>
   <p id="p2">hello world 2018</p>
</body>
<script>
    //  DOM绑定事件的复习：方法一
    function func1(self) {
        var info = self.innerHTML;
        alert(info);
    }
    //  DOM绑定事件的复习：方法二
    var obj = document.getElementById("p2")
    obj.onclick = function () {
        alert(this.innerHTML)   // 可以直接使用this，调用对象的属性
    }
    // onload()方法复习
    window.οnlοad=function () {
        var obj = document.getElementById('hello');
        alert(obj.nodeName)
    }
</script>
</html>

jQuery方法复习：实现css样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
   <p id="p1">hello world 2017</p>
   <p id="p2">hello world 2018</p>
</body>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $("#p1").css("color","red");
</script>
</html>

jQuery下的onload()

取消事件：unload()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script>
        // jQuery下面的onload方法使用一：
        $(document).ready(function () {
            $("p").css("color","red");     // 给所有的P标签变红
            $("#p1").css("color","green");  // p1变绿色
        })
        // jQuery下面的onload方法使用二【推荐使用，方法一的简写】：
        $(function () {
            $("p").css("color","orange");     // 给所有的P标签变红
        })
    </script>
</head>
<body>
<p id="p1">hello world 2017</p>
   <p id="p2">hello world 2018</p>
</body>
</html>

jQuery的页面载入

ready(fn)

jQuery的事件绑定: click(), bind(),on()等事件绑定操作

取消事件：off()等;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
<p id="p1">hello world 2017</p>
<p id="p2">hello world 2018</p>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<input type="button" value="+" οnclick="add()">
</body>
 <script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    // jQuery下面的onclick()：
      $("p").click(function () {
          alert(123);
      })
    // jQuery下面的bind()[bind方法不建议使用]：
    $("p").bind("click", function () {
        alert(456);
    })
    function add() {
        $("ul").append(" <li>444</li>");
    }
    // 点击li触发一个函数，但是后面新添加就无法实现点击触发的效果了，使用on函数解决
    $("ul li").click(function () {
    alert("hello world");
    })
    //jQuery下面的on()：on(events,[selector],[data],fn)
    // 实现了动态添加的一个事件委托，绑定了ul，但是实现了li的onclick
    // $("ul li").on("click" ,function () { 错误的使用,缺少了selector,根bind效果同，无法实现动态绑定效果
    $("ul").on("click","li",function () {
        alert('on');
    })
     function func2(event) {
       alert(event.data.foo);    // 取值操作
   }
   $("p").on("click",{foo:'on的data传值操作'},func2)
    // JQ3多用on, JQ2多用delegated
</script>
</html>

jQuery的回调函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="display: none">hello world</p>
<input id="show" type="button" value="显示">
<input id="hide" type="button" value="隐藏">
<input id="toggle" type="button" value="toggle">
<script src="jquery-2.1.4.min.js"></script>
<script>
    $("#show").click(function () {
             $("p").show(2000,function () {
                 alert(123)
             });
    });
    $("#hide").click(function () {
             $("p").hide(1000);
    });
     $("#toggle").click(function () {
             $("p").toggle(1000);
    });
</script>    
</body>
</html>

jQuery的扩展方法：

自定义扩展[jQuery调用]

自定义扩展[标签调用]

私有域的扩展[将自定义的函数放入到一个函数内部进行调用,保证内部变量不被外部调用]，变量只在函数内部哈~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<p id="p0">hello world 2018</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
    // 自定义函数，直接由jQuery调用
    $.extend({
        getMax:function (a,b) {
            alert(a>b?a:b);
        }
    })
    $.getMax(3,8);       // 8

    // 自定义函数，必须由标签对象调用
    $.fn.extend({
        print:function () {
            alert($(this).html());     // jQuery中查询值
        }
    });
    $("p").print();

    // 高级应用             --自定义函数添加私有域，避免内部变量被外部调用，避免变量产生冲突
    (function (a) {
        alert(a)
    })(666) ;         // 打印666         // 自执行的匿名函数

    (function ($) {
        // 扩展的私有方法，添加了私有域
         $.fn.extend({
                print:function () {
                    alert($(this).html());     // jQuery中查询值
                }
            })

    })(jQuery);               // 不写jQuery也可以,为了方便识别
    $("p").print();             // hello world 2018
</script>
</body>
</html>

JQuery中for循环的使用

JQuery中for循环的使用:

1. 数组，键值对的使用

2. 集合的取值

<script src="jquery-3.2.1.js"></script>
<script>
    // for循环：数组，Json的Key-Value
    li = [1,2,3,4,5,6,7];
    kv = {name:"hello", value:"world"};
    $.each(kv,function (key, value) {
        console.log(key,value);
    })
</script>

for循环集合的打印：【注意$符号】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>left_menu</title>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
<ul class="menu">
      <li id="c1" class="current" οnclick="tab(this);">菜单一</li>
      <li id="c2" οnclick="tab(this);">菜单二</li>
      <li id="c3" οnclick="tab(this);">菜单三</li>
</ul>
</body>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $("li").each(function () {
            console.log($(this).html())  // ，注意$符号取出内容
        })
    </script>
</html>

转载于:https://www.cnblogs.com/ftl1012/p/9397581.html

weixin_30613343

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习---JQuery深入学习

属性操作 $("p").text() $("p").html() $(":checkbox").val() $(".test").attr("alex") $(".test").attr("alex","sb") $(".test").attr("checked","checked") $(":checkbox").removeAt...
复制链接

扫一扫