JQuery的学习

JQuery的学习。

1.content是一个内容选择器。搜索时，即使有标签，也能找到标签内的文本。

例如：

$(function(){ 0

$(“Li : content(l list)”)。css('颜色'，'红色')。

})

//-

LiList 1/li。

LiList 2/li。

Lispan列表3/span/li。

列表3也可以在span标签中查询。

2.has(选择器)。

选择的时候，如果包含元素，元素可以和元素里面的东西匹配。

3.空选择器，可以选择不包含元素或文本的元素。

4.父选择器，用于选择包含子元素或文本的元素。

5、

:hidden匹配所有不可见元素或类型为hidden的元素。

:visible匹配所有可见元素。

这两个词都是可见的选择器，

例如：

$(“div : hidden”)。css('color '，' red ')//显示：无

//-

div style=' width: 100px高度： 100像素；背景-颜色：黄色；display:无

11

/div

div style=' width: 100px高度： 100像素；背景-color : burlywood；' visibility:隐藏；'

22

/div

Display:none还可以使元素不可见。

属性和道具属性。

attr返回的类型是字符串类型，而prop返回的类型是布尔类型，因此prop选择复选框为真，而不选择它为假。

第一个参数是当前元素的索引值，第二个参数是原始属性值。

attr的第一个参数是get，第二个参数是set，可以代替第一个得到的值。

例如：

$('.div ')。attr('数据'，' 2 ')

var ch1=$(' : checked : eq(3)')。attr('选中')

console . log(ch1类型)

if(ch1===' checkde '){ 0

}

var CH2=$(' : checked : eq(3)')。道具('已检查')

console . log(CH2类型)

if(ch1===true){ 0

}

$(':checkbox:eq(3)')。道具('选中'，假)

//-

div class=' div ' data=' 1 ' vale=' 000 '这是一个spandiv/span/div。

输入类型='复选框'选中值='足球'/

输入类型='复选框'已选中=''/

输入类型='checkbox '选中='checked'/

输入类型='复选框'选中='1212'/

输入类型='复选框'选中='真'/

7.基本效果。

显示(显示隐藏的匹配元素)

隐藏(隐藏显示的元素)

切换(用于绑定两个或多个事件处理函数，以响应所选元素的交替单击事件。如果元素可见，则切换到隐藏；如果元素隐藏，请切换到可见。)

$('.show’)。单击(函数(){ 0

$(“div”)。显示()

})

$('.隐藏')。单击(函数(){ 0

$(“div”)。隐藏()

})

$('.切换')。单击(函数(){ 0

$(“div”)。切换()

})

-

button class='show'show/button

按钮cla

ss="hide"hide/button
button class="toggle"toggle/button

div style="width: 100px; height: 100px;background-color: darkcyan;"/div

基本效果主要改变的是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

div style="width: 100px; height: 100px;background-color: darkcyan;"/div

注意：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();
});

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

button Go/button
button STOP!/button
div style="width: 50px; height: 50px; background-color: red;"/div

delay（

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

）

例如：

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

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

button Go/button
button STOP!/button
div style="width: 50px; height: 50px; background-color: red;"/div

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

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

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

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

button Run/button
div style="width: 50px; height: 50px; background-color: red;"/div

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

12、finish

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

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

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

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

例如：

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

可对其进行修改