jQuery知识点整理2

最新推荐文章于 2022-04-16 16:25:56 发布

vision_seven7

最新推荐文章于 2022-04-16 16:25:56 发布

阅读量388

点赞数

分类专栏： jquery 前端文章标签： jquery

本文链接：https://blog.csdn.net/vision_seven7/article/details/107348399

版权

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

jQuery知识点整理2

jQuery知识点整理2

jQuery知识点整理2

jQuery选择器

1. 基础选择器

 ID选择器：$("#myDiv") 匹配唯一的具有此id值的元素 
 
 类选择器：$(".myClass") 匹配具有此类样式值的所有元素

 标签选择器：$("div") 匹配指定标签名称的所有元素 

 通配符选择器：$("*") 匹配所有元素 

 并集选择器：$("div,span,p.myClass") 联合所有匹配的选择器 

 交集选择器：$("p.myClass") 匹配到p标签里面的类名 不常用

2.层级选择器

 后代选择器：$("form input") 后代选择器，选择ancestor的所有子孙节点 
 
 子代选择器：$("#main > span")main下一级的的所有span子节点 

 兄弟选择器：$("label + input") 兄弟相邻选择器，选择所有label相邻的第一个input节点 

 兄弟选择器：$("#prev ~ div") 相邻后边的所有，选择prev的所有后面的div同胞节点

3.过滤选择器

过滤选择器前面一般加一个冒号

名称	用法	描述
：odd	$(‘li:odd’).css(‘color’, ‘red’);	找到索引号为奇数行的元素
:even	$(‘li:even’).css(‘color’, ‘red’);	找到索引号为偶数行的元素
:eq（index）	$(‘li:eq(2)’).css(‘color’, ‘red’);	入的索引号对应的元素

4.筛选选择器

名称	用法	描述
children(选择器)	$(“父元素”).children(“子元素选择器”)	子类选择器 $(“父元素>子元素”)
find(选择器)	$(“父元素”).find(“子元素选择器”)	后代选择器 $(“父元素子元素”)
siblings(选择器)	$(“兄弟元素”).siblings(“兄弟元素”)	兄弟选择器（找的是兄弟节点不包括自己）
parent()	$(’#first’).parent();	父元素选择器
next（）	$(‘li’).next()	下一个兄弟元素
prev()	$(‘li’).prev()	上一个兄弟元素
eq(index)	$(‘li’).eq(2);	相当于$(‘li:eq(2)’),index从0开始

jQuery动画

1.显示和隐藏

(1)显示 show() 两个参数

参数1：表示动画执行的时长可以填毫米数也可以填代表动画时长的字符串 “slow” “normal” “fast”

参数2 ：回调函数就是在动画执行完毕之后会执行的

$("#show").click(function () {
     $(".one").show();
 })

(2)隐藏 hide()

参数1：表示动画执行的时长可以填毫米数也可以填代表动画时长的字符串 “slow” “normal” “fast”

参数2 ：回调函数就是在动画执行完毕之后会执行的

$("#hide").click(function () {

    $(".one").hide(1000, function () {
        alert("我的动画走完了")
    });
})

(3)切换 toggle()

$("#toggle").click(function () {

    $(".one").toggle(1000);
})

2.滑入和滑出

滑入 slideDown()
滑出 sildeUp()
切换 slideToggle()

参数1：表示动画执行的时长可以填毫米数也可以填代表动画时长的字符串 “slow” “normal” “fast”

参数2：动画执行完毕之后他的回调函数

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>《千与千寻》</p>
<p>《哈儿移动城堡》</p>
<p>《龙猫》</p>
<p>《悬崖上的金鱼姬》</p>
</div>
 
<p class="flip">宫崎骏</p>
 
</body>
</html>

3.淡入和淡出

淡入 fadeIn()
淡出 fadeOut()
切换 fadeToggle()

参数1：表示动画执行的时长可以填毫米数也可以填代表动画时长的字符串 “slow” “normal” “fast”

参数2：动画执行完毕之后他的回调函数

淡到哪里 fadeTo()

参数2 ：表示淡入的目标透明度

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>fadeIn() 方法。</p>
<button>点击这里，出现矩形</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

4.自定义动画 animate方法

参数1 ：是必填项为一个对象里面填的是需要做动画的属性
参数2 ：可选填动画时长默认有一个动画时长400毫秒
参数3 ：可选项运动曲线匀速 linear 缓动 swing(默认值)
参数4 ：可选项动画执行完毕的回调函数

$(function () {
            
    $("#move800").click(function () {
        // 自定义动画
        $("#box").animate({
            left: 800,
            width: 300,
            height: 300,
            opacity: 0.5
        }, 3000, "swing", function () {
           // 第一个动画执行完毕之后
            $("#box").animate({
                left: 200,
                width: 50,
                height: 50,
                top: 200,
                opacity: 1
            }, 2000, function () {
                $("#box").animate({
                    left: 200,
                    width: 50,
                    height: 50,
                    top: 200,
                    opacity: 1
                },200)
            })
        })
     })
})

5.动画队列

动画队列： 在同一个元素上执行多个动画那么对于这个动画来说只会执行当前的东辉，后面都会被放进动画队列,等到页面的动画执行完毕之后才会执行后面的

stop():停止动画

参数1：是否清除队列

参数2 ：是否跳转到动画的最终结果

如果两个参数都不写那么默认两个参数就是false

参数1	参数2	描述
true	true	立即完成当前的动画,后面的任务不再执行
true	false	所有动画任务立刻停止
false	false	停止当前的动画,后面的任务继续执行默认的情况
false	true	立即完成当前的动画,后面的任务继续执行

jQuery节点操作

1.添加节点

append()		把内容或标签插入到标签里面内容的后面

appendTo()		把所有的标签和内容插入到标签内容的后面   
				子元素.appendTo(父元素)
				
prepend()		把所有的内容和标签插入到标签插入到标签里面内容的前面

after			在被选元素之前插入内容

before			在被选元素之后插入内容

2.移除节点

直接给内容给个空字符串

$("#div").html("")

清空元素 empty()

$("#div").empty();

删除指定的元素

$("#div").remove();	//自杀

清除

$("子元素").parent().remove();

克隆节点

作用：复制匹配的元素

// 复制$(selector)所匹配到的元素（深度复制）
// cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();

vision_seven7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery知识点整理2

jQuery知识点整理2jQuery知识点整理2jQuery选择器1. 基础选择器2.层级选择器3.过滤选择器4.筛选选择器jQuery动画1.显示和隐藏2.滑入和滑出3.淡入和淡出4.自定义动画 animate方法5.动画队列jQuery节点操作1.添加节点2.移除节点克隆节点jQuery知识点整理2jQuery选择器1. 基础选择器 ID选择器：$("#myDiv") 匹配唯一的具有此id值的元素类选择器：$(".myClass") 匹配具有此类样式值的所有元素标签选择器：$("
复制链接

扫一扫

专栏目录