jQuery

jQuery重点讲解知识点 *

一 选择器

1 基础选择器

类选择器

元素选择器

ID选择器

子元素选择器

后代元素选择器

2 属性选择器

完美匹配

包含

前缀

开头

结尾

空格

3 jQuery扩展选择器

eq

even

odd

first

last

gt

lt

二 DOM操作

1 Class操作

javascript操作

Document

<div class="error">hello</div>

<script>

    // js方式添加class

    var div = document.getElementsByTagName("div")[0];
    div.className = "txt error"; // 添加
    div.className = ""; // 移除

</script>

![image](https://img2022.cnblogs.com/blog/2926290/202207/2926290-20220731212725856-1601103567.png)

addClass() ;removeClass(); toggleClass() ; hasClass() ;

Document

<div class="error">Hello</div>

<span class="txt">Hello</span>

<a href="#" class="active">itbaizhan</a>

<img src="" alt="" class="img">

<script>

    /**
     * 1. addClass() :添加class,不会覆盖原有的class  可以添加多个class,用个空格隔开
     * 2. removeClass() :移除class,可以移除一个或者多个,也可以全部移除
     * 3. toggleClass() :开关,如果存在则删除,如果不存在则添加
     * 4. hasClass() :判断一个元素是否存在某个class,存在返回true,不存在返回false
     * 
     * 补充知识点:在jQuery中,有个链式调用
     * */

    // $("div").addClass("txt success");
    // $("div").removeClass("txt error");
    // $("div").removeClass(); // 全部移除
    // $("span").toggleClass("txt")

    // var flag = $("a").hasClass("active");
    // console.log(flag);
    // if(flag){
    //     console.log("a标签存在active");
    // }else{
    //     console.log("a标签不存在active");
    // }

    // 给某个元素添加一个class然后在移除一个class
    // 把img的class="img"移除掉,在添加个class="image"
    // $("img").addClass("image");
    // $("img").removeClass("img")

    $("img").removeClass("img").addClass("image") // 链式调用




</script>

* 1. addClass() :添加class,不会覆盖原有的class 可以添加多个class,用个空格隔开 ![image](https://img2022.cnblogs.com/blog/2926290/202207/2926290-20220731214242992-1931830922.png)

* 2. removeClass() :移除class,可以移除一个或者多个,也可以全部移除

《jQuery》

《jQuery》

* 3. toggleClass() :开关,如果存在则删除,如果不存在则添加

《jQuery》

* 4. hasClass() :判断一个元素是否存在某个class,存在返回true,不存在返回false

《jQuery》
链式调用

《jQuery》

2 文本操作

html()

Document

<div class="box">Hello, jQuery</div>


<script>

    // 1. html() :设置一个元素内容和获取一个元素内容

        // var content = $(".box").html(); //  获得内容
        // console.log(content);

        // $(".box").html("你好啊")  // 设置内容

    // 在js中,innerHTML和innerText   在jQuery  html()  text()

    // var content = $(".box").text();
    // console.log(content);

   // $(".box").text("<a href='#'>itbaizhan</a>");

  $(".box").html("<a href='#'>itbaizhan</a>");


</script>

《jQuery》

《jQuery》

《jQuery》

《jQuery》

text()

val()

《jQuery》

《jQuery》

3 属性操作

attr()

Document

<img class="img1" src="./1.jpg" alt="小姐姐">
<img class="img2" src="" alt="">

<script>

    var content = $(".img1").attr("alt");

    $(".img2").attr("src","./1.jpg")

    // 同时设置多个属性
    $(".img2").attr({
        src:"./1.jpg",
        alt:"美女",
        title:"小姐姐"
    })

</script>

《jQuery》

removeAttr()

Document

<a href="#" alt="测试">itbaizha</a>

<script>

  // $("a").removeAttr("alt"); // 删除属性alt

</script>

《jQuery》

4 DOM 插入并包裹现有内容

javascript操作

Document

<p id="text">Hello</p>

<script>
    // 创建一个div容器,包裹p标签

    // 1. 创建div元素
    var root = document.createElement("div");
    // 2. 找到p标签
    var text = document.getElementById("text");
    // 3. 将p标签放入到div中
    root.appendChild(text)
    // 4. 将div放入到body中显示
    document.getElementsByTagName("body")[0].appendChild(root);


</script>

![image](https://img2022.cnblogs.com/blog/2926290/202207/2926290-20220731221331697-1273116127.png)

.wrap()

《jQuery》

《jQuery》

.unwrap()

Document

<div>
    <p id="text">Hello</p>
</div>

<div>
    <p>Hello</p>
</div>

<script>
    // 删除p标签的父级元素
    $("#text").unwrap();

</script>

《jQuery》

.wrapAll()

Document

<p>sxt</p>
<p>itbaizhan</p>
<span>Hello</span>
<p>web</p>


<script>
    // 将三个p标签包裹在一个容器中div
    $("p").wrapAll("<div></div>");

</script>

《jQuery》

.wrapInner()

Document

<p>Hello</p>

<script>    
    // 包裹p标签里的内容
    $("p").wrapInner("<i></i>");

</script>

《jQuery》

5 DOM 插入现有元素内

javascript操作

Document

<div id="root"></div>

<script>
    // 创建一个p标签带有内容,然后插入到div中
    var root = document.getElementById("root");

    // 创建p标签
    var p = document.createElement("p");
    p.innerHTML = "Hello";

    // 插入  appendChild:将一个元素插入到另一个元素中
    root.appendChild(p);//p为子元素


</script>

《jQuery》

.append()

Document

<div id="root">
    <p>分割线</p>
</div>

<script>

    // 在一个元素的尾部添加内容
    $("#root").append("<p>Hello World</p>");

</script>

《jQuery》

.prepend()

Document

<div id="root">
    <p>分割线</p>
</div>

<script>

    // 在一个元素的头部添加内容
    $("#root").prepend("<p>Hello World</p>");

</script>

《jQuery》

6 DOM 插入现有元素外

.after()

Document

<p>Hello</p>

<script>
    // 在p标签的同级下面增加一个p标签,内容为world
    $("p").after("<p>world</p>");

</script>

《jQuery》

.before()

Document

<p>Hello</p>

<script>
    // 在p标签的同级上面增加一个p标签,内容为world
    $("p").before("<p>world</p>");

</script>

《jQuery》

7 DOM 移除

.empty()

Document

<div id="box">
    <p>Hello</p>
    <span>Wrold</span>
</div>

<script>
    // 清空div中的内容:empty
    $("#box").empty();


</script>

《jQuery》

.remove()

Document

<div id="box">
    <p>Hello</p>
    <span>Wrold</span>
</div>

<script>
    // 移除div元素,同时移除掉里面所有的内容  remove
    // 在JS中:函数就是方法,方法就是函数,无论是函数还是方法后面添加括号
    // Array: 方法:push()  pop()   属性:length
    $("#box").remove();


</script>

《jQuery》

8 DOM 替换

.replaceAll()

Document

<div>
    <p id="text">Hello</p>
</div>

<script>
    // 将p标签替换成span标签: replaceAll
    $("<span>World</span>").replaceAll("#text")


</script>

《jQuery》

.replaceWith()

Document

<div>
    <p id="text">Hello</p>
</div>

<script>
    // 将p标签替换成span标签: replaceWith
    $("#text").replaceWith("<b>World</b>")



</script>

《jQuery》

三 CSS操作

1 尺寸

.css()

.height()

.width()

.innerHeight()

.innerWidth()

.outerHeight()

.outerWidth()

2 位置

.offset()

.position()

.scrollLeft()

.scrollTop()

四 事件处理

1 绑定事件处理器

.on()

.one()

.off()

2 鼠标事件

.click() .hover() .mouseenter() .mouseleave() .mousemove() .mouseover()
.mouseout()

3 表单事件

.focus()

.blur()

.change()

.submit()

4 键盘事件

.keydown()

.keypress()

.keyup()

5 浏览器事件

.resize()

.scroll()

6 事件对象

event.type

event.target

event.currentTarget

event.preventDefault()

event.stopPropagation()

五 遍历

1 列表遍历

.map()

.each()

2 列表中获得一个JS对象的DOM元素

.get()

3 树遍历(关系)

.children()

.find()

.next()

.parent()

.siblings()

六 动画

1

.show()

.hide()

.fadeIn()

.fadeOut()

.slideDown()

.slideUp()

.animate()

    原文作者:loay
    原文地址: https://www.cnblogs.com/abc1d/p/16537997.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞