jQuery

JQ的优点

• 轻量级，核心文件才几十KB，不会影响页面的加载速度。
• 跨浏览器兼容。基本兼容了现在主流的浏览器。
• 链式编程，隐式迭代。
• 对事件，样式，动画支持，大大简化了DOM操作。

JQ对象和DOM对象的区别

        DOM对象：
        通过JS的属性和方法获得的对象
        例：

var div = document.querySelector(‘div’);

        JQ对象：
        通过JQ的属性和方法获得的对象
        $(‘div’);

        JQ对象转化为DOM对象
        $（‘对象名’）【index】；
        $对象是以伪数组的形式转换。所以可以根据索引值来进行选取转换为DOM对象
        DOM对象转化为JQ对象

 var mydiv = document.querySelector(‘div’);

        $(mydiv) 注意：不加引号

引入JQ

        不引入无法使用。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	//在此书写你的jquery代码
</script>

JQ css样式

        addClass（‘类名’）：添加类注意类名不要加.
        remoceClass(‘类名’): 移除类
        toggleClass（‘类名’）：切换类

JQ设置内容      

        获取设置元素的内容 html（）；
        //html()会获取 指定元素下的标签名加文本内容，如果指定元素下没有子元素，不获取标签名

        获取设置元素的文本内容text（）；
        //text(); 不获取标签名。只获取文本内容

        设置input里面的表单值 val（）；
        $(‘input’).val(‘123’);

JQ遍历对象的方法

        

$(function() {
            var sum = 0;
            // 1. each() 方法遍历元素 
            var arr = ["red", "green", "blue"];
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                // domEle.css("color"); dom对象没有css方法
                $(domEle).css("color", arr[i]);
       
            })

JQ操作元素（重点）

        创建元素

var li = $("<li>我是后来创建的li</li>");

        添加元素

 $("ul").append(li);  //内部添加并且放到内容的最后面 
 $("ul").prepend(li); // 内部添加并且放到内容的最前面

$(".test").after(div);
$(".test").before(div);

        删除元素

$("ul").remove(); //可以删除匹配的元素 自杀
$("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子

JQ事件绑定

        on（）可以绑定一个或者多个事件。
        on（‘方法名’，function（））
      

$('元素名').on({
 事件名：function(){
需要进行的操作；
 }，
事件名：function(){
 需要进行的操作；
 }，
})
例：
$("div").on({
            mouseenter: function() {
                $(this).css("background", "skyblue");
            },
            click: function() {
                $(this).css("background", "purple");
            },
            mouseleave: function() {
                $(this).css("background", "blue");
            }
        });

        如果两个事件的结果可以切换，例如：滑入滑出，显示隐藏，或者添加与删除类名可以用一个函数来完成

$('元素名').on('事件名 事件名'，function(){
$(this).toggleClass('定义的类名')
})
例：
$("div").on("mouseenter mouseleave", function() {
            $(this).toggleClass("current");
        });

        事件委托（***）
        click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

        $("ul").on("click", "li", function() {
            alert(11);
        });