jQuery基础

1. 节点操作

（1）创建和添加节点

<script type="text/javascript">
    $(function() {
        // 创建jQuery对象，var h1 = $('<h1>jquery</h1>');
        $("div").append('<h1>jquery</h1>'); // 添加jQuery对象,参数为代码字符串

        $("div").append($("p")); // p添加到div内部最后面
        $("p").appendTo($("div")); // 与上面等价

        $("div").prepend($("p")); // p添加到div内部最前面
        $("p").prependTo($("div")); // 与上面等价

        $("div").after($("p")); // p添加到div外部后面
        $("div").before($("p")); // p添加到div外部前面
    })
</script>

（2）清空和删除节点

<script type="text/javascript">
    $(function() {
        $("div").html(""); // 清空元素内容，但易内存泄漏，事件不会被清除
        $("div").empty(); // 清除元素内容，事件也同样清除
        $("div").remove(); // 删除元素
        $(".des").clone(true).appendTo("div");
        // 传参false深度复制但不复制事件；传参true深复制，复制事件
    })
</script>

 2. 动画

（1）显示隐藏动画：show（）、hide（）。

<script type="text/javascript">
    $(document).ready(function() {
        $("input").eq(0).click(function() {

            // $("div").show(); // 不传参数，没有动画效果

            // $("div").show(1000); //动画持续时间，可以是毫秒值，也可以是固定字符串fast:200ms,normal:400ms,slow:600ms

            $("div").show(1000, function() { // 回调函数，动画执行完成后执行
                console.log("hahahaha");
            })
        });
        $("input").eq(1).click(function() {

            // $("div").hide();
			
            // $("div").hide(1000);

            $("div").hide(1000, function() { 
                console.log("hehehehe");
            })
        });
    })
</script>

（2）滑入滑出切换动画：slideUp（）、slideDown（）、slideToggle（）用法与上面显示隐藏动画类似。

（3）淡入淡出切换动画：fadeIn（）、fadeOut（）、fadeToggle（）用法与上面显示隐藏动画类似。

（4）自定义动画：

<script type="text/javascript">
    $(document).ready(function() {
        $("input").eq(0).click(function() {
            $("#box1").animate({left:800}, 8000, "linear", function(){
                console.log("hahahaha");
            });
            // 第一个参数：对象，需要的动画样式；第二个参数：执行时间；第三个参数：动画执行效果
            // 默认动画效果swing，还可取值匀速linear等
        });
    })
</script>

（5）stop用法

<script type="text/javascript">
    $(document).ready(function() {
        $("input").eq(0).click(function() {
            $("div").slideDown(4000).slideUp(4000);
        });
        $("input").eq(1).click(function() {
            // $("div").stop(); // 没有参数时表示停止当前正在执行的动画，防止动画队列出错
            // $("div").stop().animate(); // 常用
            // 第一个参数clearQueue是否清除动画队列 true false
            // 第二个参数jumpToEnd是否跳转到当前动画的最终效果 true false
            $("div").stop(true, true);
        });
    })
</script>

3. 事件机制

（1）发展历程

简单事件绑定	$("p").click(function(){}); $("p").mouseenter(function(){}); $("p").mouseleave(function(){});	不能同时注册多个事件
bind事件绑定	$("p").bind("click mouseenter", function(){});	第一个参数事件类型，第二个参数事件处理程序，可以同时注册多个事件，但不支持动态绑定事件
delegate事件绑定	$("div").delegate("p", "click", function(){});	给父元素注册委托事件，子元素执行，第一个参数事件最终由谁执行，第二个参数事件的类型，第三个参数函数，函数最后由子元素执行，例如为div所有的子元素p注册事件，支持动态绑定事件
on注册事件	$("p").on("click", function(){});  $("div").on("click", "p", function(){});	第一种注册简单事件，自己触发，不支持动态绑定；第二种父元素绑定代理事件，给内部元素触发，支持动态绑定；第一个参数事件类型，第二个参数执行事件的后代元素（可选），没有后代元素则自己执行，第三个参数传递给处理函数的数据，通过event.data使用，event为函数参数，第四个参数函数

（2）事件解绑

$("#btn").off("click");

给id为btn的元素接触click事件，也可以不传参数，则是解除所有事件

（3）触发事件

$("#btn").click();	触发id为btn的元素的click事件，一般用于别的函数中调用
$("#btn").trigger("click");	触发id为btn的元素的click事件，一般用于别的函数中调用

（4）事件对象（event为function的参数）

event.screenX;    event.screenY;	相对于屏幕最左上角的位移值
event.clientX;    event.clientY;	距离页面最左上角的位置（忽视滚动条）
event.pageX;    event.pageY;	距离页面最顶部左上角的位置（计算滚动条的距离）
event.keyCode;	按下的键盘代码
event.data;	存储绑定事件时传递的附加数据
event.stopPropagation();	阻止事件冒泡行为，即点击子元素，不触发父元素的事件
event.preventDefault();	阻止浏览器默认行为，例如<a>标签的跳转页面
return false;	既能阻止事件冒泡，又能阻止浏览器默认行为

4. 补充知识点

（1）链式编程：一般用于设置操作，筛选选择器会改变jQuery对象的DOM对象，例如prevAll()、nextAll()，end()用于恢复到上次的状态，返回匹配元素之前的状态。

（2）each方法：遍历jQuery对象集合，为每一个匹配的元素执行一个函数，参数一表示当前元素在所有匹配元素中的索引号，参数二表示当前元素（DOM对象）。

$("li").each(function(index, element) {
    $(element).css("opacity", (index+1)/10);
}) 

（3）$冲突：若$需要被赋予新的定义，可用$.noConflict()释放$的控制权，默认用jQuery接收控制权；也可以用变量$$ = $.noConflict();的接收控制权，然后变量$$当做$使用。

5. 插件（jQuery文件之后引入）

（1）jquery.color.js：使jQuery动画能够实现颜色渐变。

（2）jquery.lazyload.js：在比较长的页面（滚动条）延迟加载图片，图片的src属性需修改成data-original，给图片添加lazy类，然后添加代码$(".lazy").lazyload()。

（3）jquery.ui：需同时引入jquery.ui.js和jquery.ui.css。

（4）jquery插件制作：$.prototype.pluginName = function(){};或者$.fn.pluginName = function(){};实现功能的添加，返回值return this;避免链式编程的破坏。