《锋利的jQuery》笔记-jQuery部分

Posted 2020-07-12 dongmeima_coder

//DOM对象和jQuery对象
DOM：Document Object Model：文档对象模型
    DOM对象表示: var variable;
    可以通过javascript中的getElementById 或者getElementsByTagName来获取元素节点。
    DOM对象可以使用js中的方法。eg:  var Objhtml=document.getElementById("id").innerHtml;
jQuery对象：就是通过jQuery包装DOM对象后产生的对象。
    jQuery对象表示：ver $variable;
    jQuery对象可以使用jQuery中的方法。注意innerHtml方法是JS中的方法，Jquery对象不能使用。
    $("#id").html();  //这行代码产生的结果等同于  document.getElementById("id").innerHtml;
    
一定要注意哪些方法是JS中的方法，哪些方法是JQuery中的方法。DOM对象只能使用JS中的方法，jQuery对象只能使用jQuery中的方法。
如果串用会报错的。

//DOM对象和jQuery对象的相互转换：
1，jQuery对象转DOM对象：
var $cr=$("#cr");//待转jQuery对象
var cr=$cr[0];  //方法一：jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。DOM对象
var cr=$cr.get(0);//方法二：这种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。

2，DOM对象转jQuery对象：
var cr=document.getElementById("cr");//DOM对象
var $cr=$(cr);//jQuery对象

注意：平时使用的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。
 
//jQuery选择器
 1，继承了CSS选择器的风格。
 2，jQuery选择器分类
     |--基本选择器
     |--层次选择器
     |--过滤选择器
         |--基本过滤
         |--内容过滤
         |--可见性过滤
         |--属性过滤
         |--子元素过滤
         |--表单对象属性过滤
     |--表单选择器
-详细说明：
(1)基本选择器是jQuery中最新常用的选择器，也是最简单的，它通过id,class和标签名来查找DOM元素。$("#id")、$(".cls")、$("p")
(2)层次选择器通过DOM元素之间的层次关系来获取特定元素，例如：后代元素、子元素、相邻元素和兄弟元素。
    |--后代元素：$("ancestor descendant")    //eg:$("div span")    //选取<div>里的所有的span元素
    |--子元素    ：$("parent>child")            //eg:$("div>span")    //选取<div>元素下元素名是<span>的子元素
    |--相邻元素：$("prev + next")            //eg:$(".one + div")//获取class为one的下一个div元素
    |--兄弟元素：$("prev~siblings")            //eg:$("#two~div")    //获取id为two元素的所有div兄弟元素
(3)过滤选择器
a：基本过滤选择器：格式：$("[标签名][选择器]")                      举例：
    :first                    :header                      $("div:first")//:first选择器
    :last                    :animated                    $("div:gt(3)")//:gt()选择器
    :not(selector)            :eq(index)
    :gt(index)                :lt(index)
    :even//索引是奇数的所有元素    :odd
b:内容过滤选择器：格式：$("[标签名][选择器]")
    :contains(text)//选取含有文本内容为text的元素        :empty    //选取不包含子元素或者文本的空元素
    :has(selector)//选取含有选择器所匹配的元素的元素        :parent    //选取含有子元素或者文本的元素
c:可见性过滤选择器
    :hidden//选取所有不可见的元素    
    :visible//选取所有可见的元素
    注意：在可加性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏域(<input type="hidden">)
    和visibility:hidden之类的元素。
d:属性过滤选择器
    [attribute]                    [attribute*=value]
    [attribute=value]        [selector1][selector2][selectorN]//用属性选择器合并成一个复合属性选择器
    [attribute!=value]
    [attribute^=value]
    [attribute$=value]
e:子元素过滤选择器
    :nth-child(index/even/odd/equation)    //选取每个父元素下的第index个子元素或者奇偶元素（index从1开始）
    :first-child                        //选取每个父元素的第一个子元素   $("ul li:first-child")//选取每个ul下的第一个li元素
    :last-child
    :only-child                            //如果某个子元素是其父元素中的唯一一个子元素，那么将会被匹配。
f:表单对象属性过滤选择器：此选择器主要是对所选择的表单元素进行过滤，比如选择被选中的下拉框，多选框等等。
    :enabled    //选取所有可用元素     $("#form1:enable")                //选取id为form1的表单内的所有可用元素。
    :disabled    //选取所有不可用元素
    :checked    //选取所有被选中的元素(单选框、复选框) $("input:checked")  //所有被选中的<input>的元素
    :selected    //选取所有被选中的选项元素。
    
(4)表单选择器：为了更加灵活地操作表单。
    :input        //选取所有的<input>、<textarea>、<select>、<button>元素
    :text        //选取所有的单行文本框
    :password    //选取所有的密码框
    :radio        //选取所有的单选框
    :checkbox    //选取所有的多选框
    :submit        //选取所有的提交按钮
    :image        //选取所有的图像按钮
    :reset        //选取所有的充值按钮
    :file        //选取所有的上传域
    :button        //选取所有的按钮
    :hidden        //选取所有的不可见元素
    
***选择器中的注意事项***
1、选择器中含有特殊符号的注意事项
    (1)含有“.”、“#”、“(”、“)”、“[”、“]”
    例如：<div id="id#b">bb</div>   获取方式：$(#id\\#b)  要转移特殊字符"#",转义符号为\\
        <div id="id[1]">cc</div>  获取方式：$(#id\\[1\\])
    (2)属性选择器的引号问题
    例如：$(input[name=‘type‘])
2、选择器中含有空格的注意事项
    例如：var $t_a=$(".test :hidden");//带空格，选取class为test的元素里面的隐藏元素。实为test后代中隐藏的元素
        var $t_b=$(".test:hidden");//不带空格，选取class为test并隐藏的元素
        
//jQuery中的事件
1.事件绑定
    bind(type,data,fn)
    |--type:事件类型，包括：blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup
    |--data:可选参数，作为event.data属性值传递给事件对象的额外数据对象。
    |--fn:用来绑定的处理函数。
    例如：$(function(){
            $("#panel h5.head").bind("mouseover",function(){
                $(this).next("div.content").show();
            });
            
            $("#panel h5.head").bind("mouseout",function(){
                $(this).next("div.content").hide();
            });
        })
        简写形式如下：
        $(function(){
            $("#panel h5.head").mouseover(function(){
                $(this).next("div.content").show();
            });
            
            $("#panel h5.head").mouseout(function(){
                $(this).next("div.content").hide();
            });
        })
2.合成事件
    jQuery有两个合成事件，hover()方法和toggle()方法，这两个方法都是jQuery自定义的方法。
    (1)hover()方法：模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移除这个元素时，会触发指定的第二个函数（leave）。
        语法结构：hover(enter,leave);
        将上面的代码用hover()方法替换如下：
        $(function(){
            $("#panel h5.head").hover(function(){
                $(this).next("div.content").show();
            },function(){
                $(this).next("div.content").hide();
            });
        })
    (2)toggle()方法：用于模拟鼠标连续单击事件。第一次单击触发第一个函数；第二次单击触发第二个函数，，重复对几个函数的轮番调用。
        语法结构：toggle(fn1,fn2,,,,fnN);
        将上面的代码用hover()方法替换如下：
        $(function(){
            $("#panel h5.head").toggle(function(){
                $(this).next(div.content).show();
            },function(){
                $(this).next(div.content).hide();
            });
        })
3.事件冒泡
(1)解释冒泡现象：
    用例子来解释冒泡事件：
    <script type="text/javascript">
    $(function(){
        $("span").click(function(){
            var span_txt=$("#msg").html()+"<p>内存元素span被单击</p>";
            $("#msg").html(span_txt);
        });
        $("#content").bind("click",function(){
            var div_txt=$("#msg").html()+"<p>外层元素div被单击</p>";
            $("#msg").html(div_txt);
        })
        $("body").bind("click",function(){
            var body_txt=$("#msg").html()+"<p>body被单击</p>";
            $("#msg").html(body_txt);
        })
        
    })
    
    </script>
    <div id="content">
        <span>内层span元素</span>
    </div>
    <div id="msg"></div>
    冒泡现象：当单击内部<span>元素时，就会触发外部<div>元素和<body>元素上绑定的的click事件。这是由冒泡事件引起的。
    元素的click事件会按照以下顺序冒泡：
    (1)<span>
    (2)<div>
    (3)<body>
    之所以称为冒泡，是因为时间会按照DOM的层次结构像水泡一样不断向上直至顶端。
(2)事件冒泡引发的问题：
    |--事件对象:
        $("element").bind("click",function(event){  //event:事件对象
        });
    |--停止事件冒泡：
        停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。
        上述例子停止冒泡代码如下：
        $("span").click(function(event){
                var span_txt=$("#msg").html()+"<p>内存元素span被单击</p>";
                $("#msg").html(span_txt);
                event.stopPropagation();//return false;
            });
        $("#content").bind("click",function(event){
                var div_txt=$("#msg").html()+"<p>外层元素div被单击</p>";
                $("#msg").html(div_txt);
                event.stopPropagation();//return false;
            })
    |--阻止默认行为：网页中的元素有自己默认的行为，比如单击超链接后回跳转，单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。
               在jQuery中，提供了preventDefault()方法来阻止元素的默认行为。
               例如:
        $("#sub").bind("click",function(evet){
            $("#msg").html("hello world");
            event.preventDefault();//阻止表单自动提交行为
            //或者用 return false;来代替event.preventDefault();
            //return false;也可以阻止表单提交，也可以阻止冒泡事件。
        })
4.事件对象的属性
    (1)event.type();            //获取到事件的类型
    (2)event.preventDefault();    //阻止元素默认行为
    (3)event.stopPropagation();    //阻止时间的冒泡
    (4)event.target();            //获取到触发事件的元素
    (5)event.relatedTarget();    //访问相关元素
    (6)event.pageX();/even.pageY()//获取到光标相对于页面的x坐标和y坐标
    (7)event.which();            //在鼠标单击事件中获取到鼠标的左中右键，在键盘事件中获取到键盘的按键。
    (8)event.metaKey();            //键盘事件中获取<ctrl>按键
    (9)event.originalEvent();    //指向原始的事件对象。
5移除事件
    unbind([type][,data]);        //[type]:事件类型       [data]:要移除的函数名
    (1)如果没有参数，则删除所有绑定的事件
    (2)如果提供了事件类型作为参数，则只删除该类型的绑定事件
    (3)如果提供了函数名（第二个参数），则只删除该函数。
    对于只需要触发一次，随后就要立即解除绑定的情况，可以使用one()方法，这个方法与bind()方法类似。
    one(type,[data],fn);
6.模拟操作
    trigger(type [,data])方法有两个操作，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据。以数组形式传递。
    $("#btn").trigger("click");
    执行默认操作：trigger()方法触发事件后，会执行浏览器默认的操作。例如：
    $("input").trigger("focus");//此行代码不仅会触发<input>元素绑定的focus事件，也会使<input>元素本身得到焦点。
    如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。
    $("input").triggerHandle("focus");//只触发绑定的focus事件，不会得到焦点。
7.其他用法
(1)绑定多个事件类型
    $(function(){
        $("#div").bind("mouseover mouseout",function(){
            $(this).toggleClass("over");
        })
    })
(2)添加事件命名空间，便于管理
    $(function(){
        $("div").bind("click.plugin",function(){
            $("body").append("<p>click事件</p>");
        });
        $("div").bind("mouseover.plugin",function(){
            $("body").append("<p>mouseover事件</p>");
        });
        $("div").bind("dblclick",function(){
            $("body").append("<p>dblclick事件</p>");
        });
        
        $("#button").click(function(){
            $("div").unbind(".plugin");//等价于：$("div").unbind("click").unbind("mouseover");
        })
    })
    在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。
    单击<button>后，“plugin”的命名空间被删除，而不在“plugin”的命名空间的“dblclick”事件依然存在。
(3)相同事件名称，不同命名空间执行方法
    $(funtion(){
        $("div").bind("click",function(){
            $("body").append("<p>click事件</p>");
        });
        
        $("div").bind("click.plugin",function(){
            $("body").append("<p>click事件</p>");
        });
        
        $("#btn").click(function(){
            $("div").trigger("click!");//注意click后面的感叹号，其作用是不包含在命名空间中的click方法。
        })
    })
    
//jQuery中的动画
jQuery中的任何动画效果都可以指定3种速度参考：slow:600ms、normal:400ms、fast:200ms
1.show()方法和hide()方法 //会同时改变内容的高度、宽度、不透明度
    show()方法和hide()方法让元素动起来
    如果上述两个方法不带参数，意思是将匹配的元素立刻隐藏或显示。
    如果希望在调用时慢慢显示或隐藏，可以为show和hide方法指定速度参数。
    例：$("div").show("slow");
       $("div").show(1000);
       $("div").hide("fast");
2.fadeIn()方法和fadeOut()方法//只改变元素的不透明度
    fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素消失。
    fadeIn()方法则相反。
3.slideUp()方法和slideDown()方法//只会改变元素的高度
    slideUp();//元素将由下到上缩短隐藏
    slideDown();//元素将由上到下延伸显示
4.自定义的动画animate()方法
    (1)语法结构：animate(params,speed,callback);
            参数说明：params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}
              speed:速度参数，可选
              callback:在动画完成时执行的函数，可选。
    (2)累加累减动画
        function(){
            $("#panel").animate({left:‘+=500px‘},3000);
        });
    (3)多重动画
        |--同时执行多个动画：向右滑动并同时向下滑动，并同时变大。
            $("#panel").click(function(){
                    $("#panel").animate({left:‘500px‘,top:‘300px‘,height:‘200px‘,width:‘200px‘},300);
                });
        |--按顺序执行多个动画：按顺序执行动画
            $("#panel").click(function(){
                    $(this).animate({left:‘500px‘},300);
                    $(this).animate({top:‘300px‘},300);
                    $(this).animate({height:‘200px‘},300);
                    $(this).animate({width:‘200px‘},300);
                });
    (4)综合动画和动画回调函数
    $("#panel").css("opacity","0.5");
            $("#panel").click(function(){
                $(this).animate({left:‘400px‘,height:‘200px‘,opacity:‘1‘},3000)
                        .animate({top:‘200px‘,width:‘200px‘},3000)
                        .fadeOut("slow").fadeIn("fast").animate({top:‘0px‘,width:‘100px‘},3000)
                        .animate({left:‘0px‘,height:‘100px‘,opacity:‘0.5‘},3000,function(){
                            alert("hahahaha");
                        });
5.停止动画和判断动画是否处于动画状态
    (1)停止元素的动画
    stop([clearQueue][,gotoEnd]);//两个参数都是布尔型的
    |--参数clearQueue代表是否要清空未执行完的动画队列；true:清空
    |--参数gotoEnd代表是否直接将正在执行的动画跳转到末状态。true:跳到末状态
    (2)判断元素是否处于动画状态
    if(!$(element).is("animated")){//判断元素是否处于动画状态
        //如果没有进行的动画，则添加新动画。
    }
6.其他的动画方法
    (1)toggle(speed,[callback]);//此方法可以切换元素的可见状态。如果元素时可见的，则切换为隐藏；如果元素时隐藏的，则切换为可见。
    eg://使用toggle()方法来代替hide()方法和show()方法
        $("#panel h5.head").click(function(){
            $(this).next("div.content").toggle();
        })
    相当于:
        $("#panel h5.head").click(function(){
            $(this).next("div.content").hide();
        },function(){
            $(this).next("div.content").show();
        })
    (2)slideToggle(speed,[callback]);//此方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。
    (3)fadeTo(speed,opacity,[callback]);//此方法可以把元素的不透明度以渐进的方式调整到制定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。
7.总结
|--    
    hide()和show()            //同时修改多个样式属性即高度、宽度和不透明度
    toggle()                //用来代替hide()方法和show()方法，所以会同时修改多个样式属性即高度、宽度和不透明度
    
    fadeIn()和fadeOut()        //只改变不透明度
    fadeTo()                //只改变不透明度
    
    slideUp()和slideDown()    //只改变高度
    slideToggle()            //用来代替slideUp()和slideDown()，所以只改变高度
    
    animate()                //属于自定义动画的方法，以上各种动画方法实质内部都调用了animate()方法。此外，直接使用animate()方法还能自定义其他的样式属性。例如：left、marginLeft、scrollTop
|--动画队列：
    (1)一组元素上的动画效果：
        当在一个animate()方法中应用多个属性时，动画是同时发生的。
        当以链式的写法应用动画时，动画是按照顺序发生的。
    (2)多组元素上的动画效果：
        默认情况下，动画都是同时发生的。
        当以回调的形式应用动画方式时，动画是按照回调顺序执行的。
        
//表单应用
1.表单应用
    (1)单行文本框应用：获取和失去焦点改变样式
    (2)多行文本框应用