复习jQuery

作者: Hassd | 来源:发表于2018-06-10 23:23 被阅读0次

jQuery 入口函数:

$(function(){

// 执行代码

});

jQuery 选择器:

元素选择器 $("p")

#id 选择器 $("#test")

.class 选择器 $(".test")

偶数选择器 $("tr:even")

奇数选择器 $("tr:odd")

第几选择器 $("#qwe:eq(n)") n从0开始 0对应第一个#qwe

常用的 jQuery 事件方法：

点击事件 click()

$("p").click(function(){

$(this).hide();

});

双击事件 dblclick()

$("p").dblclick(function(){

$(this).hide();

});

鼠标指针穿过事件 mouseenter()

$("#p1").mouseenter(function(){

alert('您的鼠标移到了 id="p1" 的元素上!');

});

鼠标指针离开事件 mouseleave()

$("#p1").mouseenter(function(){

alert('再见，您的鼠标离开了该段落。');

});

按下鼠标按键事件 mousedown()

$("#p1").mouseenter(function(){

alert("鼠标在该段落上按下！");

});

松开鼠标按钮事件 mouseup()

$("#p1").mouseenter(function(){

alert("鼠标在段落上松开。");

});

模拟光标悬停事件 hover() 鼠标移入触发第一个函数，鼠标移出触发第二个函数

$("#p1").hover( function(){

alert("你进入了 p1!");

},

function(){

alert("拜拜! 现在你离开了 p1!");

});

获得焦点事件 focus()

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

失去焦点事件 blur()

$("input").blur(function(){

$(this).css("background-color","#ffffff");

});

jQuery 效果- 隐藏和显示：

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

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

$("p").hide();

});

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

$("p").show();

});

使用 toggle() 方法来切换 hide() 和 show() 方法

$("button").click(function(){

$("p").toggle();

});

在hide()、show()、toggle()的括号加上时间有向上收缩透明的效果

$("button").click(function(){

$("p").toggle(1000);

});

jQuery 效果 - 淡入淡出

淡入已隐藏元素 fadeIn()

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

淡出可见元素 fadeOut()

$("button").click(function(){

$("#div1").fadeOut();

$("#div2").fadeOut("slow");

$("#div3").fadeOut(3000);

});

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

$("button").click(function(){

$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

});

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

$("button").click(function(){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

});

fadeToggle()、fadeIn()、fadeOut()括号里不填是极快、填"slow"是一般、自己填时间可以改变透明的速度

jQuery 效果 - 滑动：

向下滑动 slideDown()

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

$("#panel").slideDown();

});

向上滑动 slideUp()

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

$("#panel").slideUp();

});

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

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

$("#panel").slideToggle();

});

在slideToggle()、slideDown()、slideUp()括号里加上时间可以控制上滑下滑的速度

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

$("#panel").slideToggle(1000);

});

jQuery 效果- 动画：

创建自定义动画 animate()

$("button").click(function(){

$("div").animate({left:'250px'});

});

操作多个属性 animate()

$("button").click(function(){

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

使用相对值 animate() 他的值会叠加

$("button").click(function(){

$("div").animate({

left:'250px',

height:'+=150px',

width:'+=150px'

});

使用预定义的值 animate() 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

$("button").click(function(){

$("div").animate({

height:'toggle'

});

使用队列功能 animate() 执行完一条在执行下一条

$("button").click(function(){

var div=$("div");

div.animate({height:'300px',opacity:'0.4'},"slow")

.animate({width:'300px',opacity:'0.8'},"slow")

.animate({height:'100px',opacity:'0.4'},"slow")

.animate({width:'100px',opacity:'0.8'},"slow");

});

jQuery 停止动画

停止动画或效果，在它们完成之前 stop()

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

$("#panel").stop();

});

也就是说 jq的效果都能停止：透明、滑动、滑动透明、动画效果都能停止

jQuery Callback 方法

动画或效果可以加多一个函数，在动画或效果执行完后在执行这个函数

$("button").click(function(){

$("p").hide("slow",function(){

alert("段落现在被隐藏了");

});

jQuery - 链(Chaining)

允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条

$("#p1").css("color","red")

.slideUp(2000)

.slideDown(2000);

jQuery - 获取内容和属性

text() - 设置或返回所选元素的文本内容

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

alert("Text: " + $("#test").text());

});

html() - 设置或返回所选元素的内容（包括 HTML 标记）

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

alert("HTML: " + $("#test").html());

});

val() - 设置或返回表单字段的值

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

alert("值为: " + $("#test").val());

});

attr() 方法用于获取属性值

$("button").click(function(){

alert($("#runoob").attr("href"));

});

jQuery - 设置内容和属性

text() - 设置或返回所选元素的文本内容

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

$("#test1").text("Hello world!");

});

html() - 设置或返回所选元素的内容（包括 HTML 标记）

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

$("#test2").html("Hello world!");

});

val() - 设置或返回表单字段的值

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

$("#test3").val("RUNOOB");

});

text()、html() 以及 val() 的回调函数

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

$("#test1").text(function(i,origText){

return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";

});

attr() 方法也用于设置/改变属性值

$("button").click(function(){

$("#runoob").attr("href","http://www.runoob.com/jquery");

});

attr() 的回调函数

$("button").click(function(){

$("#runoob").attr("href", function(i,origValue){

return origValue + "/jquery";

});

jQuery - 添加元素

append() - 在被选元素里面的结尾插入内容

$("p").append("追加文本");

$("p").append("").text("追加元素");

prepend() - 在被选元素里面的开头插入内容

$("p").prepend("在开头追加文本");

$("p").prepend("").text("追加元素");

after() - 在被选元素之后插入内容

$("img").after("在后面添加文本");

$("img").after("<sapn>").text("追加元素");

before() - 在被选元素之前插入内容

$("img").before("在前面添加文本");

$("img").before("").text("追加元素");

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）

$("#div1").remove();

empty() - 从被选元素中删除子元素

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

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

$("p").remove(".italic"); 就是class名为 italic 的p标签删除掉

jQuery - 获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类

$("h1,h2,p").addClass("blue"); //blue是设置好的class类名

$("body div:first").addClass("important blue"); //设置多个类

removeClass() - 从被选元素删除一个或多个类

$("h1,h2,p").removeClass("blue");

toggleClass() - 对被选元素进行添加/删除类的切换操作

$("h1,h2,p").toggleClass("blue"); //有这个类就删除、没有就添加

css() - 设置或返回样式属性

$("p").css("background-color"); 返回属性值

$("p").css("background-color","yellow"); 设置属性值

$("p").css({"background-color":"yellow","font-size":"200%"}); 设置多个属性值

jQuery 尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

var qwe=$("#div1").width(); 是一个数值

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

var qwe=$("#div1").height() ; 是一个数值

innerWidth() 方法返回元素的宽度（包括内边距）

var qwe=$("#div1").innerWidth(); 是一个数值

innerHeight() 方法返回元素的高度（包括内边距）

var qwe=$("#div1").innerHeight(); 是一个数值

outerWidth() 方法返回元素的宽度（包括内边距和边框）

var qwe=$("#div1").outerWidth(); 是一个数值

outerHeight() 方法返回元素的高度（包括内边距和边框）

var qwe=$("#div1").outerHeight(); 是一个数值

jQuery 遍历 - 祖先

parent() 方法返回被选元素的直接父元素

$("span").parent(); 只有父元素

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()

$("span").parents(); 所有祖先元素

$("span").parents("ul"); 所有祖先元素的 ul祖先元素

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素

$("span").parentsUntil("div"); span到div 的所有祖先元素

jQuery 遍历 - 后代

children() 方法返回被选元素的所有直接子元素

$("div").children(); 只有子节点

$("div").children("p.1"); 指定的为p标签class名为1的子节点

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

$("div").find("*") 所有后代元素

$("div").find("span") 后代元素中的span标签

jQuery 遍历 - 同胞(siblings)

siblings() 方法返回被选元素的所有同胞元素

$("h2").siblings(); 所有同胞元素（除了自己）

$("h2").siblings("h3"): 指定的同胞元素

next() 方法返回被选元素的下一个同胞元素

$("h2").next(): 下一个同胞元素

extAll() 方法返回被选元素的所有跟随的同胞元素

$("h2").nextAll(); 后面的同胞节点

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素

$("h2").nextUntil("h6") 之间的同胞节点（不包含h6）

jQuery 遍历- 过滤

first() 方法返回被选元素的首个元素

$("div p").first() 选择首个元素

last() 方法返回被选元素的最后一个元素

$("div p").last(); 选择最后一个元素

eq() 方法返回被选元素中带有指定索引号的元素

$("p").eq(1); 索引号从 0开始 1是第二个p标签

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

$("p").filter(".url"); 选择class名为url的p标签

not() 方法返回不匹配标准的所有元素

$("p").not(".url"); 不选择class名为url的p标签

这是在www.runoob.com复习的

网友评论

我爱编程

本文标题：复习jQuery

本文链接：https://www.haomeiwen.com/subject/ijtqeftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

复习jQuery

jQuery 入口函数:

jQuery 选择器:

元素选择器 $("p")

#id 选择器 $("#test")

.class 选择器 $(".test")

偶数选择器 $("tr:even")

奇数选择器 $("tr:odd")

第几选择器 $("#qwe:eq(n)") n从0开始 0对应第一个#qwe

常用的 jQuery 事件方法：

点击事件 click()

双击事件 dblclick()

鼠标指针穿过事件 mouseenter()

鼠标指针离开事件 mouseleave()

按下鼠标按键事件 mousedown()

松开鼠标按钮事件 mouseup()

模拟光标悬停事件 hover() 鼠标移入触发第一个函数，鼠标移出触发第二个函数

获得焦点事件 focus()

失去焦点事件 blur()

jQuery 效果- 隐藏和显示：

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

使用 toggle() 方法来切换 hide() 和 show() 方法

在hide()、show()、toggle()的括号加上时间有向上收缩透明的效果

jQuery 效果 - 淡入淡出

淡入已隐藏元素 fadeIn()

淡出可见元素 fadeOut()

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

fadeToggle()、fadeIn()、fadeOut()括号里不填是极快、填"slow"是一般、自己填时间可以改变透明的速度

jQuery 效果 - 滑动：

向下滑动 slideDown()

向上滑动 slideUp()

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

在slideToggle()、slideDown()、slideUp()括号里加上时间可以控制上滑下滑的速度

jQuery 效果- 动画：

创建自定义动画 animate()

操作多个属性 animate()

使用相对值 animate() 他的值会叠加

使用预定义的值 animate() 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

使用队列功能 animate() 执行完一条在执行下一条

jQuery 停止动画

停止动画或效果，在它们完成之前 stop()

也就是说 jq的效果都能停止：透明、滑动、滑动透明、动画效果 都能停止

jQuery Callback 方法

动画或效果可以加多一个函数，在动画或效果执行完后在执行这个函数

jQuery - 链(Chaining)

允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条

jQuery - 获取内容和属性

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

attr() 方法用于获取属性值

jQuery - 设置内容和属性

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

text()、html() 以及 val() 的回调函数

attr() 方法也用于设置/改变属性值

attr() 的回调函数

jQuery - 添加元素

append() - 在被选元素里面的结尾插入内容

prepend() - 在被选元素里面的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

jQuery - 获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

jQuery 尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth() 方法返回元素的宽度（包括内边距）

innerHeight() 方法返回元素的高度（包括内边距）

outerWidth() 方法返回元素的宽度（包括内边距和边框）

outerHeight() 方法返回元素的高度（包括内边距和边框）

也就是说 jq的效果都能停止：透明、滑动、滑动透明、动画效果都能停止