jQuery语法整理

jQuery概念

jQuery 是一个快递的、简介的javascript库，其设计的宗旨是 write less，Do More，即倡导写更少的代码，做更多的事情
jQuery封装了 javascript常用的功能代码，优化了DOM操作、事件处理、动画和Ajax交互
优点
1、轻量级、核心文件才几十kb，不会影响页面加载的速度
2、跨浏览器兼容，基本兼容了现在主流的浏览器
3、链式编程、隐式迭代
4、对事件、样式、动画支持，大大简化了DOM操作
5、支持插件扩展开发，有着丰富的第三方插件
6、免费、开源

jQuery下载和使用步骤

官方地址：https://jquery.com/
引入Jquery文件
如果元素初始化了 直接写jquery代码
如果元素未初始化 写dom加载完成事件

jQuery属性操作

  $(function() {
            console.log($(" ul li:first "));
            console.log($(" ul li:last "));
            console.log($(" ul li:not(.children) ")) //not 除过not（）选中其他的
            console.log($(" ul li:even ")); //匹配所有为偶数的元素
            console.log($(" ul li:odd ")); //索引为奇数
            console.log($(" ul li:eq(1) ")); //匹配给定索引值的元素
            console.log($(" ul li:gt(1) ")); ///大于1的索引值
            console.log($(" ul li:lt(1) ")); //小于
            console.log($(" :header "));
            //   $(" input ").focus();
            //  console.log($(" :focus ")); //匹配聚焦元素
            // console.log($(" :root ")); //匹配根元素
            // console.log($(" :contains( '你好' ) ")); //包含你好的所有元素
            // console.log($(" li:empty ")); //匹配子元素为空或者文本为空
            // console.log($(" ul:has( '.children' ) ")); //匹配含有匹配选择器的元素
            // console.log($(" ul li:parent ")); //匹配含有子元素或者文本元素
            // console.log($(" div:hidden ")); //匹配隐藏的元素
            // console.log($(" :visible "));
            // console.log($(" :input "));
            // //  var arr = [1, 3, 5, 7, 8, 4, ]
            // // $.each(arr, function(i, ele) {
            // //     console.log(i, ele);
            // // })
            // //属性操作 
            // console.log($(" .ipt ").attr(" index ")); //获取或者设置元素自定义属性
            // $(" .ipt ").attr(" data-index ", " 1 ") //设置自定义属性
            // $(" .ipt ").removeAttr(" data-index "); //移除属性
            // console.log($(" .ipt ").prop("index")); //获取或者设置元素固有属性
            // $(" .ipt ").prop(" id ", " cc ")
            // $(" .ipt ").removeProp(" id ");
            //css类
            $(" div ").addClass(" info ");
            $(" div ").removeClass(" info ");
            $(" div ").toggleClass(" info "); //切换类 没有添加 有就移除

            //获取文本值
            console.log($(" div ").html()); //包含文本值和标签
            console.log($(" div ").text()); //包含文本值
            $("div").text("123");
        })

jQuery属性操作和css基本一样，通过选择器和元素获取
需要注意的是.addClass(" info ")和removeClass("info")里面不加点
html()和text() 都可以获取文本值或者设置文本值，但他们的区别是 html（）获取的是文本值和标签 而text()获取的只是文本值

jQuery筛选

     //过滤

        console.log($("ul li").eq(1));
        console.log($("ul li").first());
        console.log($("ul li").last());
        console.log($("ul li").hasClass("child")); //返回true 和false
        console.log($("ul li").filter(".child")); //筛选出符合条件的元素
        console.log($("ul li").is(".child")); //返回true false
        console.log($("ul>li").map(function(index, obj) {
            //obj  是原生的js对xiang
            return $(obj).text();
        }));
        console.log($("ul").has(".child"));
        console.log($("ul li").not(".child")); //除过not外匹配其他元素
        console.log($("ul li").slice(0, 2)) //匹配索引开始位置到结束位置 取小不取大
            //查找
        console.log($("ul").children(".child")); //查找满足条件的子元素
        console.log($("ul").find("li")); //查找匹配的元素
        console.log($(".child").next()); // 查找下一个元素
        console.log($(".child").nextAll()); // 查找下面所有元素
        console.log($(".child").offsetParent()); //查找带有定位的父元素
        console.log($("li").parent()); //查找匹配元素的父元素
        console.log($("li").parents("ul")); //查找匹配元素所有的父元素
        console.log($(".child").prev()); //查找匹配元素的上一个元素
        console.log($(".child").prevAll()); //查找匹配元素上面的所有的元素
        console.log($(".child").siblings()); //查找匹配元素的所有兄弟元素
        console.log($("ul").contents()) //返回匹配元素内部的所有子节点

jQuery CSS操作

 $("ul li").eq(2).css({
            backgroundColor: "skyblue",
            color: "pink"
        })
        console.log($(".info").offset()); //获取元素距离文档的距离
        $(".info").offset({
                left: 50
            }) //可以设置
        console.log($(".info").position()); //获取元素到父元素的距离   // 不能设置

        // 1. width() / height() 获取设置元素 width和height大小 
        console.log($("div").width());
        // $("div").width(300);

        // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
        console.log($("div").innerWidth());

        // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
        console.log($("div").outerWidth());

        // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
        console.log($("div").outerWidth(true));

上面需要注意的是offset()是获取和设置元素到文档的距离，position() 获取元素到父元素的距离 但是不能设置
outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin 为true时计算padding值 false不计算，默认为false

jQuery事件处理

内部插入

 //  $("ul .last").append("<li>5</li>") //追加到元素内部之后
        $("<li>5</li>").appendTo("ul .last") //将前面的元素追加到后面元素之后
            //$("ul .last").prepend("<li>上</li>")   //将后面的元素追加到前面元素之前
        $("<li>5</li>").prependTo("ul .last");

外部插入

  $("ul").after("<p>你好</p>") //在元素之后插入
        $("ul").beforyuansue("<div>前面</div>") //在元素之前插入
        $("<p>后面</p>").insertAfter("ul") //将前面元素插入到后面的元素之后
        $("<div>前面</div>").insertBefore("ul"); //将前面的元素插入到后谜案元素之前
      

包裹

  $("p").wrap("<div>包裹</div>"); //后面的元素将之前的元素包裹起来
        $("p").unwrap(); //取小包裹元素，包裹元素内的文本依然存在

用unwrap()移除包裹元素时，移除完包裹元素，包裹元素内的文本依然存在，没有被移除
wrapAll 将前面所有的同类型标签 用后面元素包裹起来
wrapInner 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

替换

$("p").replaceWith("<div>1234</div>") 将所有匹配元素提换成指定元素
replaceAll 用匹配的元素替换掉所有 selector匹配到的元素

删除

$("ul").empty() //删除匹配元素集合中所有的子节点 包括文本和元素
$("li").remove() //删除所有匹配元素
detach 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

克隆

  $("p").clone().prependTo("ul") //克隆元素
  

jQuery事件处理

ready() dom加载完成或者$(function(){ })

    $(document).ready(function() {
            console.log("dom准备就绪");
        });
        

on() 绑定方法事件
off()移除绑定事件 可以全部移除也可以过滤移除

 $("p").on("click", function() {
                console.log("点击");
            }).on("mouseleave", function() {
                $(this).off("click") //off移除绑定事件
            })

bind 绑定事件
unbind 不带参全部事件移除

 $("p").bind("click", 1, function(e) {
            console.log("点击事件绑定", e.data);
        }).bind("mouseover", function() {
            console.log("mouseover事件");
        }).mouseleave(function() {

            $(this).unbind("mouseover");
        });

one() 绑定一次性事件处理
trigger 触发指定事件
hover 事件切换

  // one() 绑定一次性事件处理  
        $("p").one("click", function() {
                alert("你好")
            })
            //  trigger    触发指定事件
        $(window).on("keydown", function(e, a) {
            console.log("按键", a);
        }).trigger("keydown", 1);

        //hover  事件切换  
        $("ps").hover(function() {
            console.log("悬停");
        }, function() {
            console.log("离开");
        });

jQuery动画

hide()隐藏 show() 显示
slideUp()上滑，slideDown() 下滑 slideToggle() 切换
fadeIn() 淡入 fadeOut()淡入 fadeTo()透明度
queue 指定动画完成之后
animate 自定义动画

注意在执行动画的时候，为了防止上一个动画还未执行完又执行下一个动画造成的不连贯，往往Z在执行完上一个动画后加stop() 停止上一个动画再执行下面的动画