JQuery的学习

1、:content是内容选择器，查找的时候即使有标签，也能查到其表签内部的文本。

例如：

$（function(){

$("li:content(l列表)").css("color","red")

})

//------------------

列表3在span标签内也可以被查询到

2、:has（选择器）

选择的时候，有元素在内的话，可以元素和元素内部的东西一起被匹配出来

3、:empty选择器，可以选择不包含元素或者文本的元素

4、:parent选择器,将含有子元素或者文本的元素选择出来

5、

:hidden匹配所有不可见元素或者是type为hidden的元素

:visible匹配所有可见元素

这俩个的话都是可见选择器，

例如：

$("div:hidden").css("color","red")//display：none

//---------------------------------

其中display:none也可以把元素不可见

6、attr和prop属性

其中attr返回的类型是string类型，而prop返回的类型是boolean类型，所以prop选中复选框为true，没选中为false。

共同返回的属性值的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值。

attr第一个参数是获取，第二个为设置，可以替换第一个获取的值。

例如：

$(".div").attr("data","2")

var ch1=$(":checked:eq(3)").attr("checked")
console.log(typeof ch1)

if(ch1==="checkde"){

}

var ch2=$(":checked:eq(3)").prop("checked")
console.log(typeof ch2)

if(ch1===true){

}
$(":checkbox:eq(3)").prop("checked",false)

//----------------------------------------------------------------

7、基本效果

show（显示隐藏的匹配元素）

hide（隐藏显示的元素）

toggle（用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。）

$(".show").click(function() {
$("div").show()
})
$(".hide").click(function() {
$("div").hide()
})
$(".toggle").click(function() {
$("div").toggle()
})

--------------------------------------------------

<button class="show">show</button>
<button class="hide">hide</button>
<button class="toggle">toggle</button>

基本效果主要改变的是display:none

8、滑动效果

slideDown（

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

）

slideUp（

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。

）

slideToggle（

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

）

$(".slideDown").click(function() {
$("div").slideDown(3000)
})
$(".slideUp").click(function() {
$("div").slideUp(3000)
})
$(".slideToggle").click(function() {
$("div").slideToggle()
})

--------------------------------------------------------

<button class="slideDown">slideDown</button>
<button class="slideUp">slideUp</button>
<button class="slideToggle">slideToggle</button>

注意：3000其为展示效果为3秒

其效果只调整元素的高height

9、淡入淡出效果

fadeTo（

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

）

//时间透明度
$("div").fadeTo(1000, 0.5)

注意：第一个参数为时间1秒，第二个为效果减少0.5

fadeIn（

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

）

fadeOut（

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

）

fadeToggle（

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

）

$(".fadeIn").click(function() {
$("div").fadeIn()
})
$(".fadeOut").click(function() {
$("div").fadeOut()
})
$(".fadeToggle").click(function() {
$("div").fadeToggle()
})

-------------------------------------------------------------

<button class="fadeIn">fadeIn</button>
<button class="fadeOut">fadeOut</button>
<button class="fadeToggle">fadeToggle</button>
<div style="width: 100px; height: 100px;background-color: darkcyan;"></div>

效果改变的为opacity

10、自定义的效果

stop（

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行

）

例如：

/ 开始动画
$("#go").click(function() {
$("div").animate({
width: '+200px'
}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function() {
$("div").stop();
});

-----------------------------------------------------

delay（

设置一个延时来推迟执行队列中之后的项目

）

例如：

$("div").animate({
width: '+200px'
}, 5000);
//delay,我将她放在这里，效果是把一个div向上滑动并消失，但其可以改变她消失的速度
$('div').slideUp(8000).delay(8000).fadeIn(8000);

------------------------------------------------------------------

注意：这是一个时间设置，只能改变效果的快慢，并不能改变其方式和效果

11、可以改变自定义的长宽高

$("#go").click(function() {
$("div").animate({
width: "+=50px",
height: "+=50px",
}, 1000);
});

----------------------------------

注意：红色部位是时间，在1秒的时间内将这个div的长，宽增加50px

12、finish

停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除。

如果第一个参数提供，该字符串表示的队列中的动画将被停止。

.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。

例如：

$("#complete").click(function() {
$("div").finish();
});

可对其进行修改

posted @ 2021-11-04 22:41 烈焰杀神小军阅读(46) 评论(0) 收藏举报

刷新页面返回顶部

烈焰杀神小军

JQuery的学习

公告