JQuery知识总结
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery知识总结相关的知识,希望对你有一定的参考价值。
1.选择器
$("p")
$("#id")
$(".class")
$("[href=‘#‘]")
$("[href$=‘.jpg‘]")
2.事件
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
3.jQuery效果
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); fadeIn() fadeOut() fadeToggle() fadeTo() $(selector).fadeIn(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是 fading 完成后所执行的函数名称。 slideDown() slideUp() slideToggle() $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 $("button").click(function(){ $("div").animate({left:‘250px‘}); }); $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 通过 jQuery,您可以把动作/方法链接起来。 Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。 $("#p1").css("color","red").slideUp(2000).slideDown(2000);
4.jQuery操作html
text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 css() 方法设置或返回被选元素的一个或多个样式属性。 css("propertyname"); $("p").css("background-color"); css("propertyname","value"); $("p").css("background-color","yellow"); css({"propertyname":"value","propertyname":"value",...}); $("p").css({"background-color":"yellow","font-size":"200%"}); width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。 height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。 $("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); }); innerWidth() 方法返回元素的宽度(包括内边距)。 innerHeight() 方法返回元素的高度(包括内边距)。 $("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); }); outerWidth() 方法返回元素的宽度(包括内边距和边框)。 outerHeight() 方法返回元素的高度(包括内边距和边框)。 $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); }); outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。 outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。 $("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); });
$("button").click(function(){ $("#div1").width(500).height(500); });
5.jQuery遍历
以上是关于JQuery知识总结的主要内容,如果未能解决你的问题,请参考以下文章