JQuery学习之核心

最新推荐文章于 2021-05-17 16:00:21 发布
原创最新推荐文章于 2021-05-17 16:00:21 发布 · 605 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#jquery
JS 专栏收录该内容
20 篇文章
订阅专栏
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta charset="utf-8" />
        <title>JQ</title>
        <script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #bar{
                margin:3px; 
                width:40px; 
                height:40px;
                position:absolute; 
                left:0px; 
                top:30px; 
                background:green;
                display:none; 
            }
            #bar.newcolor{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="div1 con">
                <div class="div11">ss</div>
            </div>
            <div class="div2 con">
                <div class="div21">sss</div>
            </div>
        </div>
        <ul>
          <li id="foo">foo</li>
          <li id="bar">bar</li>
        </ul>
        <button id="stop">stop</button>
    </body>
    <script>
//1.JQ搜索元素可以接受两个参数，第一个为目标，第二个为范围，但一般都是在HTML中搜索，因此省略第二个参数
        console.log($(".div11",".div1"));
//2.JQ添加标签字段，接受两个参数，第一个为添加的标签，第二个用于附加在这个标签上的属性，内容，事件或者方法之类的。值得注意的是：第一个参数格式固定为$("<span/>") 或 $("<span></span>") ，微软规定 <input> 元素的 type 只能写一次，所以创建一个 <input> 元素必须同时设定 type 属性
        $("<div/>",{
            text: "Click me!",
            id:'move',
            click:function(){
                $(this).css("background","blue")
            }
        }).appendTo($(".wrap"));
//3.当DOM加载完成后要执行的函数
/*
 * js的onload和jq的ready区别：
 *      1.window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
          $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
        2.window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
          $(document).ready()可以同时编写多个，并且都可以得到执行

    JQuery的ready事件实际上是对IE的readystatechange事件和DOM的DOMContentLoaded事件进行封装，这两事件都是在DOM树结构下载并解析完毕后触发。
 * */
//      $(document).ready(function(){})简写为下面代码
        $(function(){
            console.log(22)
        })
//4.each循环函数同for,更简洁，需要i的时候传参数i就可以使用
        $(".con").each(function(i){
            console.log(i)
            $(this).toggleClass("ex")
        })
//5.size()已失效,作用和length一样，报错undefined is not a function     
//      console.log("Size: " + $("li").size());
//6.计算元素个数
        console.log("length: " + $("li").length);
//7.返回$()搜索元素的第一个参数，已失效
//      console.log($('ul li').selector)//ul li
//8.返回$()搜索元素的第二个参数，已失效
//      console.log($('ul li',document.body).context)
//9.从0开始，返回一个匹配的DOM对象,和eq(0)相似，不过eq()返回的是Jq对象
        console.log($(".con").get(0))
//10.index()返回下标    ，从0开始
        console.log($('li').index($("#foo")))//传递一个dom对象或者JQ对象，返回在原先集合中的索引位置
        console.log($('#bar').index("li"))//传递一个选择器，返回#bar在所有li中的索引位置
        console.log($('li').index($('li:gt(0)'))); //传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
        console.log($('#bar').index())//不给参数，返回同辈元素的位置
        console.log($('baz').index())//找不到匹配的元素，则返回-1
//11.data()存取在元素上的自定义属性数据，可以是单个或集合
        $('#bar').data('test',{'first':'sss','second':'eee','third':'www'})
        console.log($('#bar').data('test').third)
        $('#bar').removeData('test')//删除属性无法删除集合里的单个属性
        console.log($('#bar').data('test'))
//12.函数队列的问题，防止动画过多回掉函数一层一层的，太复杂。
    /*没定义队列名，默认为fx,动画函数放在fx队列中，然后在以先进先出的方式执行队列中的函数，非动画函数优先动画函数执行，
     */
    /*queue(name,[callback]): 
     当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);$('#demo').queue('name')
     当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数.$('#demo').queue('name',fun);  用queue将函数fun加入到name队列中
     当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).
     */
        $('#move').click(function () {
              $("#bar").show("slow");
              $("#bar").animate({left:'+=200'},2000);
            //queue()将一个函数插入队列
              $("#bar").queue(function () {
                  $(this).addClass("newcolor");
            //shift()取出队列中最前端的函数，并执行它。两者必须同时存在，否则无效
                  $(this).dequeue();
              });
              $("#bar").animate({left:'-=200'},500);
              $("#bar").queue(function () {
                  $(this).removeClass("newcolor");
                  $(this).dequeue();
              });
              $("#bar").slideUp();
        });
//clearQueue([queueName])清除尚未进行的动画
        $("#stop").click(function(){
          $("#bar").clearQueue();
        });
//出自文档http://www.cnblogs.com/rmbteam/archive/2011/07/25/2116357.html
//13.jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）     jQuery.fn = jQuery.prototype    对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”，只有实例化对象后才可以使用
/*
 * jQuery.extend(object)扩展jQuery对象本身。
 * 参考文档：http://www.cnblogs.com/xuxiuyu/p/5989743.html
 */ 
    </script>
</html>