jQuery 常用API: jQuery 选择器、 jQuery 样式操作、 jQuery 效果、 jQuery 属性操作、 文本属性值、 jQuery 元素操作、 jQuery 尺寸、位置操作

1、 jQuery 选择器

1.1 jQuery 基础选择器

原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。

$("选择器") // 里面选择器直接写 CSS 选择器即可,但是要加引号
名称用法描述
全选选择器$("*")匹配所有元素
标签选择器$("div")获取同一类标签的所有元素
类选择器$(".class")获取同一类标签的所有元素
ID选择器$("#id")获取指定ID的元素
并集选择器$("div,p,li")选取多个元素
交集选择器$("li.current")交集元素

1.2 jQuery 层级选择器

名称用法描述
子代选择器$("ul > li")使用 > 号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器$("ul li")使用空格,代表后代选择器,获取 ul 下的所有 li 元素,包括孙子等

jQuery 设置样式

$('div').css('属性', '值')

1.3 隐式迭代(重要)

遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代

简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

1.4 jQuery 筛选选择器

语法用法描述
:first$("li:first")获取第一个 li 元素
:last$(''li:last")获取最后一个 li 元素
:eq(index)$("li:eq(2)")获取到的 li 元素中,选择索引号为2的元素,索引号index从0开始
:odd$("li:odd")获取到的 li 元素中,选择索引号为奇数的元素
:even$("li:even")获取到的 li 元素中,选择索引号为偶数的元素

1.5 jQuery 筛选方法(重点)

语法用法说明
parent()$("li").parent()查找父级
children(selector)$("ul").children("li")相当于$("ul > li"),最近一级(亲儿子)
find(selector)$("ul").find("li")相当于$("ul li"),后代选择器
siblings(selector)$(".first").siblings("li")查找兄弟节点,不包括自己本身
nextAll([expr])$(".first").nextAll()查找当前元素之后所有的同辈元素
prevAll([expr])$(".last").prevAll()查找当前元素之前所有的同辈元素
hasClass(class)$("div").hasClass("protected")检查当前的元素是否含有某个特定的类,如果有,则返回 true
eq(index)$("li").eq(2)相当于$("li:eq(2)"),index从0开始

重点记住: parent()、children()、find()、siblings()、eq()

1.6 jQuery 里面的排他思想

想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。

$(this).css("color","red");
$(this).siblings().css("color","");

1.7 链式编程

链式编程是为了节省代码量,看起来更优雅。

$(this).css('color', 'red').sibling().css('color', '');

2、 jQuery 样式操作

2.1 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。

(1)参数只写属性名,则是返回属性值。

$(this).css("color");

(2)参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号。

$(this).css("color", "red");

(3)参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号。

$(this).css({ "color":"white","font-size":"20px"});

2.2 设置类样式方法

作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点。

(1)添加类

$("div").addClass("current");

(2)移除类

$("div").removeClass("current");

(3)切换类

$("div").toggleClass("current");

2.3 类操作与className区别

  • 原生 JS 中 className 会覆盖元素原先里面的类名。
  • jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。

3、 jQuery 效果

jQuery 给我们封装了很多动画效果,最为常见的如下:
在这里插入图片描述

3.1 显示隐藏效果

(1)显示语法规范

show([speed,[easing],[fn]])

(2)隐藏语法规范

hide([speed,[easing],[fn]])

(3)切换语法规范

toggle([speed,[easing],[fn]])

(4)显示、隐藏、切换参数

  • 参数都可以省略, 无动画直接显示。
  • speed:三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

建议:平时一般不带参数,直接显示隐藏即可。

例子:

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 一般情况下,我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>

3.2 滑动效果

(1)下滑效果语法规范

slideDown([speed,[easing],[fn]])

(2) 上滑效果语法规范

slideUp([speed,[easing],[fn]])

(3)滑动切换效果语法规范

slideToggle([speed,[easing],[fn]])

(4)下滑效果、上滑效果、滑动切换参数

  • 参数都可以省略。
  • speed:三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

例子:

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

3.3 事件切换

hover([over,]out)

(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)。

(2)out:鼠标移出元素要触发的函数(相当于mouseleave)。

(3)如果只写一个函数,则鼠标经过和离开都会触发它。

3.4 动画队列及其停止排队方法

(1)动画或效果队列

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

(2)停止排队

stop()
  • stop() 方法用于停止动画或效果。
  • 注意: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。

例子:

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

3.5 淡入淡出效果

(1)淡入效果语法规范

fadeIn([speed,[easing],[fn]])

(2)淡出效果语法规范

fadeOut([speed,[easing],[fn]])

(3)淡入淡出切换效果语法规范

fadeToggle([speed,[easing],[fn]])

(4)淡入效果、淡出效果、淡入淡出切换效果参数

  • 参数都可以省略, 无动画直接显示。
  • speed:三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

(5)渐进方式调整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])

参数:

  • opacity 透明度必须写,取值 0~1 之间。
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。必须写
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

例子:

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

3.6 自定义动画 animate

(1)语法

animate(params,[speed],[easing],[fn])

(2)参数

  • params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。 其余参数都可以省略。
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

例子:

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

4、 jQuery 属性操作

4.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性,比如 元素里面的 href ,比如 元素里面的 type。

(1)获取属性语法

prop("属性")

(2)设置属性语法

prop("属性", "属性值")

注意:prop() 除了普通属性操作,更适合操作表单属性:disabled / checked / selected 等。

4.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性,我们称为自定义属性。 比如给 div 添加 index = “1”。

(1)获取属性语法

attr("属性") // 类似原生 getAttribute()

(2)设置属性语法

attr("属性", "属性值") // 类似原生 setAttribute()

注意:attr() 除了普通属性操作,更适合操作自定义属性。(该方法也可以获取 H5 自定义属性)

4.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。

(1)附加数据语法

data("name", "value") // 向被选元素附加数据

(2)获取数据语法

date("name") // 向被选元素获取数据

注意:同时,还可以读取 HTML5 自定义属性 data-index ,得到的是数字型。

<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>

5、 jQuery 文本属性值

常见操作有三种:html() / text() / val() ; 分别对应 JS 中的 innerHTML 、innerText 和 value 属性,主要针对元素的内容还有表单的值操作。

(1)普通元素内容 html()( 相当于原生innerHTML)

html() // 获取元素的内容
html("内容") // 设置元素的内容

(2)普通元素文本内容 text() (相当与原生 innerText )

text() // 获取元素的文本内容
text("文本内容") // 设置元素的文本内容

注意:html() 可识别标签,text() 不识别标签。

(3)表单的值 val()( 相当于原生value)

例子:

val() // 获取表单的值
val("内容") // 设置表单的值
<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($("div").html());
        // $("div").html("123");
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123");
        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>

6、 jQuery 元素操作

jQuery 元素操作主要讲的是用 jQuery 方法,操作标签的遍历、创建、添加、删除等操作。

6.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。

(1)语法1:

$("div").each(function (index, domEle) { xxx; }
  1. each() 方法遍历匹配的每一个元素。主要用 DOM 处理。 each 每一个。
  2. 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个 DOM 元素对象,不是 jquery 对象
  3. 所以要想使用 jquery 方法,需要给这个 dom 元素转换为 jquery 对象 $(domEle)。

2)语法2:

$.each(object,function (index, element) { xxx; }
  1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象。
  2. 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容。

注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。

例子:

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大)
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍历元素 
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(i);
                // 回调函数第二个参数一定是 dom 元素对象,也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据,处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
   </script>
</body>

6.2 创建元素

语法:

$("<li></li>");

动态的创建了一个 <li>

6.3 添加元素

(1)内部添加

element.append("内容")

把内容放入匹配元素内部最后面,类似原生 appendChild。

element.prepend("内容")

把内容放入匹配元素内部最前面

(2)外部添加

element.after("内容") // 把内容放入目标元素后面
element.before("内容") // 把内容放入目标元素前面

① 内部添加元素,生成之后,它们是父子关系。

② 外部添加元素,生成之后,他们是兄弟关系。

6.4 删除元素

element.remove() // 删除匹配的元素(本身) 自杀
element.empty() // 删除匹配的元素集合中所有的子节点  孩子
element.html("") // 清空匹配的元素内容 孩子

① remove 删除元素本身。

② empt() 和 html(" ") 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。

例子:

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
      
            // 2. 添加元素
            // 	2.1 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            //  2.2 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
      
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
        })
    </script>
</body>

7、 jQuery 尺寸、位置操作

7.1 jQuery 尺寸

语法用法
width() / height()取得匹配元素宽度和高度值,只算 width / height
innerWidth() / innerHeight()取得匹配元素宽度和高度值,包含 padding
outerWidth() / outerHeight()取得匹配元素宽度和高度值,包含 padding、border
outerWidth(true) / outerHeight(true)取得匹配元素宽度和高度值,包含 padding、border、margin
  • 以上参数为空,则是获取相应值,返回的是数字型。
  • 如果参数为数字,则是修改相应值。
  • 参数可以不必写单位。
<body>
    <div></div>
    <script>
        $(function() {
            // 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));
        })
    </script>
</body>

7.2 jQuery 位置

位置主要有三个: offset()、position()、scrollTop()/scrollLeft()

(1)offset() 设置或获取元素偏移

① offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。

② 该方法有2个属性 left、top 。

  • offset().top 用于获取距离文档顶部的距离。
  • offset().left 用于获取距离文档左侧的距离。

③ 可以设置元素的偏移:offset({ top: 10, left: 30 });

(2)position() 获取元素偏移

① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。

② 该方法有2个属性 left、top。

  • position().top 用于获取距离定位父级顶部的距离。
  • position().left 用于获取距离定位父级左侧的距离。

③ 该方法只能获取。

(3)scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

① scrollTop() 方法设置或返回被选元素被卷去的头部。

② 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。

<body>
    <div class="father">
        <div class="son"></div>
    </div>
        
    <div class="back">返回顶部</div>
    <div class="container"></div>
   
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置(偏移) offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 获取距离带有定位父级位置(偏移) position   如果没有带有定位的父级,则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
      
      		// 3. 被卷去的头部
      		$(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })
    </script>
</body>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值