jquery笔记

jquery知识点总结

jq认识：

   <!-- JQ版本的入口函数<script src="../js/jquery-1.11.3.js"></script><script>
    // $(function(){})这就是我们的入口函数
    $(function(){
        $("#btn").click(function(){
            console.log("这是jq版本的入口函数");
        })
    })</script> -->

关于选择器：

 啥是选择器 -->
 就是选中到我们的dom节点  或者说 选中我们页面中的元素的工具 -->
 不管是你的css选择器也好 还是jq选择器也好 都是为了选中我们页面中的元素 
基础选择器：
<!-- 
我们通过$("选择器")来选中我们的元素 得到的是一个jq对象
基本选择器（jq中）：
    标签选择器：$("p")选中所有的p标签
    id选择器：  $("#test1")选中id是test1的标签
    类选择器:   $(".test2")选中类名是test2的标签
    交集选择器: $("p.test3")选中的就是类名为test3的p标签
    分组选择器: $("h1,h2,h3")选中的是我们所有的h1,h2,h3标签
    后代选择器: $(".test4 p")选中的是我们类名为test4的内容中的p标签
    通配符选择器:$("*")选中我们页面上所有标签
    儿子选择器: $(".test5>p")选中的是我们类名为test5的儿子p标签
    兄弟选择器: $(".test5+h1")选中的是我们类名为test5的后面一个兄弟h1 如果后面的兄弟不是h1 那么他就不起作用
    N兄弟选择器:$(".test6~p")选中的是我们类名为test6的后面的所有的p标签
-->
//  jq中标签选择器  jq对象.css("你要修改的属性","属性值") jq中的选择器和css里面的很像

子元素过滤选择器：

:root 选中根标签 也就是html标签
:nth-child(2) 选中每家的第二个孩子 不论是男孩还是女孩
:first-child 选中每家的第一个孩子 不论男孩还是女孩 和:nth-child(1)一样
:last-child 选中每一家的最后一个孩子
:nth-last-child(2) 这表示选中倒数第二个孩子
:only-child 选中每家的独生子女
:nth-child(2n) 和 :nth-child(even) 一样 选中每家排行偶数的孩子 从1开始算
:nth-child(2n+1) 和 :nth-child(odd) 一样 选中每家排行奇数的孩子 从1开始算
:nth-of-type(2) 针对的是同类型的标签 选中每家第二个儿子
:last-of-type 选中某一个类型标签的最后一个
:nth-last-of-type(2)选中的就是某一类标签的倒数第二个
:only-of-type选中每家唯一的儿子
:nth-of-type(2n-1)和:nth-of-type(odd)是一样的 表示选中每家排行为奇数的儿子或者女儿 索引从1开始
:nth-of-type(2n)和:nth-of-type(even)是一样的 表示选中每家排行为偶数的儿子或者女儿

基础选择过滤器：

li:eq(0) 表示选中第一个li eq里面加的是 索引 默认是0开始
li:first 表示选中第一个li
li:last 表示选中最后一个li
li:even 表示选中偶数个的li 注意:我们这里起使坐标是0
li:odd 表示选中奇数个的li
li:gt(2)表示索引大于2的
li:lt(2)表示索引小于2的
:header 表示选中所有的标题标题标签
li:not(:eq(1)) 选中除了第二个li(索引为1的li)之外的所有li

属性选择器：

[attribute] h1[title] 就是选中具有title这个属性的h1标签
[attribute=value] h1[title=world] 这就是选中title属性值为world的标签
[attribute!=value] h1[title!=world] 这就是选中title属性值不为world的标签
[attribute^=value] h1[title^=hello] 这就是选中title属性值以hello开头的
[attribute$=value]h1[title$=hello] 这就是选中title属性值以jq结尾的
[attribute*=value] h1[title*=wangcai]这就是选中title属性值有wangcai的属性
[attribute][id] h1[title][id]这表示选中既有title属性的 又有id属性的

内容过滤器：

:contains(text) $(“li:contains(Jquery)”)选中内容包含Jquery的li
li:has(a) 这表示 内容有a标签的
li:empty 这是选中内容为空的li标签
li:not(:empty) 这是选中内容不为空的li标签
li:parent 这是匹配子元素或者文本元素的

可见性选择器：

:visible 选中看得到得元素
:hidden 选中隐藏得元素
.val()拿到Input中得value值

表单相关的选择器：

 <!-- <script>
    // 选择所有的表单元素   :input
    $('button:eq(0)').click(function(){
        $(":input").css("outline","3px solid red")
    })

    // 选择所有的文本框     :text
    $('button:eq(1)').click(function(){
        $(":text").css("outline","3px solid red")
    })

    // 选择所有的密码框     :password
    $('button:eq(2)').click(function(){
        $(":password").css("outline","3px solid red")
    })

    // 选择所有的单选框     :radio
    $('button:eq(3)').click(function(){
        $(":radio").css("outline","3px solid red")
    })

    // 选择复选框           :checkbox
    $('button:eq(4)').click(function(){
        $(":checkbox").css("outline","3px solid red")
    })

    // 选择所有的提交按钮
    $('button:eq(5)').click(function(){
        $(":submit").css("outline","3px solid red")
    })

    // 选择所有的图片按钮    :image
    $('button:eq(6)').click(function(){
        $(":image").css("outline","3px solid red")
    })

    // 选择重置按钮
    $('button:eq(7)').click(function(){
        $(":reset").css("outline","3px solid red")
    })

    // 选择所有得普通按钮
    $('button:eq(8)').click(function(){
        $(":button").css("outline","3px solid red")
    })

    // 选择所有得文件上传按钮
    $('button:eq(9)').click(function(){
        $(":file").css("outline","3px solid red")
    })
</script> -->
  <!-- 
    选择所有可用的表单元素          input:enabled
    选择所有不可用的表单元素        input:disabled
    选择选中的单选框和复选框        :checked
    选择选中的下拉列表项            ：selected

 -->

动画：

// 第一种 利用show 和hide去显示隐藏
// show()显示目标元素
// hide()隐藏目标元素
// 第二种 利用slideDown()显示
// slideDown()通过使用滑动效果 显示目标元素
// 第三种 也就是最简单的方法 slideToggle()
// slideToggle()通过使用滑动效果 在显示和隐藏状态之间进行切换
// animate() 用来改变css里面的样式 但是其改变的过程是一个渐变的过程 所以看起来是动画效果
// 第一个参数 是我们要改变的属性和属性值 第二个参数 是改变的时间
// attr()说白了就是以前的setAttribute和getAttribute的结合体
$(this).attr(“class”,“on”)//这就表示设置一个属性class值为on

动画：

// 选中兄弟元素 siblings()
// stop()停止当前正在运行的动画
// fadeTo() 用淡出的动画来隐藏一个元素 第一个参数为时间 毫秒 第二个参数为透明度

// slideup()以滑动的方式隐藏目标元素
// slideDown()以滑动方式显示目标元素

// hide() 如果没有参数的话 那么就是立马隐藏
// 如果有参数的话 是以收缩的形式隐藏 参数是时间

dom节点的操作：

// 创建DOM节点 并把它插入到某个元素的内部
// 在js中 creatElement 插入的话 appendChild
// 在JQ中呢？

<script>
    // 1.创建和添加
    // 当我点击按钮的时候 会往box里面加入一个ul 还有li...
    $("#btn1").click(function () {
      console.log("----创建元素节点，并插入到某个元素内部----");
      let ul = $("<ul><li>xxxx</li></ul>"); //创建元素节点
      $(".box").append(ul);
    });

    // 2.替换（replaceAll）
    $("#btn2").click(function(){
        // 想替换 肯定得有提前准备好的元素 
        let ul=$("<ul><li>React</li><li>Vue</li><li>Angular</li></ul>")
        // 使用的是 replaceAll    新元素.replaceAll(旧元素)
        // replaceWith  旧元素.replaceWith(新元素)
        ul.replaceAll($("ol"));
        confirm("切记 replaceAll 是 新元素.replaceAll(旧元素)")
    })
    // 2.替换（replaceWith）
    $("#btn3").click(function(){
        // 想替换 肯定得有提前准备好的元素 
        let ul=$("<ul><li>React</li><li>Vue</li><li>Angular</li></ul>")
        // 使用的是 replaceAll    新元素.replaceAll(旧元素)
        // replaceWith  旧元素.replaceWith(新元素)
        $("ol").replaceWith(ul);
        confirm("切记 replaceWith 是 旧元素.replaceWith(新元素)")
    })

    // 3.删除 remove
    $("#btn4").click(function(){
        // 删除java的那个li
        // 删除标签 remove
        $("ul>li:last-child").remove();
    })

    // 4.清除 empty
    $("#btn5").click(function(){
        // 清除只是让你这个标签的内容为空 但是并不是删除标签 标签还是存在的
        $("ul>li:last-child").empty();
    })

    // 5.包裹(外部套)
    // 使用一个元素去包裹另一个元素
    // 说白了 就是给一个元素创造一个爸爸 
    // wrap   wrapAll
    $("#btn6").click(function(){
        let div=$("<div style='border:1px solid red'></div>");
        // wrap是给每一个选中的元素都加上一个包裹的元素
        $("ul,ol").wrap(div);
    })
    $("#btn7").click(function(){
        let div=$("<div style='border:1px solid red'></div>");
        // wrapAll是给选中的元素套一个大的元素  说白了就是套一个大框
        $("ul,ol").wrapAll(div);
    })

    // 6.包裹(里面套)
    // 使用一个元素包裹住某个元素的内部
    $("#btn8").click(function(){
        // wrapInner给内容套上一个元素
        let span=$("<span>123</span>")
        $(".box").wrapInner(span);
    })

    // 7.插入(将新元素做兄弟插入)(插到目标元素的后面)
    $("#btn9").click(function(){
        let li=$("<li>我是新来的兄弟</li>");
        // after  insertAfter 他俩的功能一模一样
        // after用法  目标元素.after(新元素)
        // insertAfter  
        // $("ul>li:last-child").after(li)
        li.insertAfter($("ul>li:last-child"));
        // after 是 在...之后  
        // insertAfter  把...插到后面
    })

    // 7.插入(将新元素做兄弟插入)(插到目标元素的前面)
    $("#btn10").click(function(){
        let li=$("<li>我是新来的兄弟</li>");
        // li.insertBefore($("ul>li:first-child"));
        $("ul>li:first-child").before(li)
    })


    // 8.插入(把新元素做为儿子插入)(在前面插儿子)
    $("#btn11").click(function(){
        let li=$("<li>我是新来的儿子</li>");
        // prepend  prependTo 他俩的功能一致 但是主体不一样
        // $("ul").prepend(li)
        li.prependTo($("ul"));
    })
    // 8.插入(把新元素做为儿子插入)(在后面插儿子)
    $("#btn12").click(function(){
        let li=$("<li>我是新来的儿子</li>");
        // append  appendTo 他俩的功能一致 但是主体不一样
        $("ul").append(li)
        // li.appendTo($("ul"));
    }) -->

创建元素节点：

  <!-- <script>
        $("#add").click(function(){
            // 第一 想拿到值 拿到input输入框里面的值
            // 第二 把拿到的值添加到一个li标签中 然后把其放到ul里面
            // .value是你在DOM中拿到值得方法 document.getElementsByTagName("input")[0]这个是DOM对象
            // let value =document.getElementsByTagName("input")[0].value;
            // 在jq对象中  Input输入框得值是val();
            let value=$("input").val();
            // 引号里面是字符串 没法放变量 value是变量 
            // let li=$("<li></li>")
            // ``中间可以写变量  但是为了区分变量和字符串 你需要加一个${变量名}
            let li=$(`<li>${value}</li>`)
            $("#list").prepend(li);
            // 清空输入框里面得内容
            // .val()如果没有参数 则是获得到value值 如果有 则是给value赋值
            $("#text").val("456");
    
            // 在js  document.getElementsByTagName("input")[0].value;
            // $("input").val()  val()这是一个函数  如果你不写参数  他得作用就是获得到你input这个标签中value得属性值
            // $("input").val("456") 给这个value赋值为456
        })
        // ``中间可以写变量  但是为了区分变量和字符串 你需要加一个${变量名}
        ${value}
        
    </script> -->

鼠标事件：

.scroll:滚动事件
mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
mouseenter 事件只在鼠标移动到选取的元素上时触发。
mouseout 事件在鼠标离开任意一个子元素及选的元素时触发。
mouseleave 事件只在鼠标离开选取的的元素时触发。
click：单击事件。
dblclick：双击事件。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：鼠标移动事件。
mouseover：移入事件。
mouseout：移出事件。
mouseenter：移入事件。
mouseleave：移出事件。
contextmenu：右键事件。

// 如何获取索引呢？ 目标元素.index()
let li_index=$(this).index();

// html()是在标签内改变内容 text是改变文本内容 目标元素.text(内容)
$(“span”).text(li_index+1)

// attr()如果有两个参数 表示给属性赋值 addClass添加类 是在原有的基础上给class添加

// // 以前你用什么scolltop 做一个减法
// // $(window).height() 获得一屏的高度 clienHeight
// let ad_top = ($(window).height() - $(".ad").height()) / 2;
// // ad_top就是距离页面顶端的距离 也就是我们css属性里的top 就是距离坐标系body上面x轴的距离
// $(".ad").animate({ top: ad_top }, 1000);

// // 滚动事件  window页面滚动
// $(window).scroll(function () {
//   // 往下滚动多少 你这个小广告就滑动多少
//   // 你要拿到滚动上去的高度 $(window).scrollTop()
//   // 滚动的距离+原本的ad_top 才是我们滚动后广告距离坐标轴的位置
//   let ad_top =($(window).height() - $(".ad").height()) / 2 + $(window).scrollTop();
//   $(".ad").stop().animate({ top: ad_top }, 1000);
// });

$("#nav").fadeIn(500)  
// fadeIn让隐藏的元素显示
$("#nav").fadeOut(500) 
// fadeOut让显示的元素隐藏
$("html").animate({scrollTop:0},500)
// 如果你只是想回到顶部 你可以这样用 但是如果想又动画 那么用animate
// $(window).scrollTop(0);

// 获取导航条向上的偏移量 offset().top;
// static 表示 不定位