jQuery

jQuery

语法

1、引用声明:

<script src="jQuery文件URL" type="text/javascript" charset="UTF-8"></script>

2、基础语法结构:

  1. jQuery的美元符号$是jQuery的简写
  2. 文档就绪函数写法
//写法一
$(document).ready(function(){
	//jQuery函数
})
//写法二
$(function(){
 //jQuery函数
})

选择器

基础选择器

// 全局选择器:选择文档中所有元素,包括<head>及<script>,运行速度较慢
$("*")
//元素选择器:选择指定元素标签
$("p") //选择所有p标签
//id选择器:选择指定id的元素
$("#test") //选择id=test的元素
//类选择器:选择所有具有同一个指定class的元素
$(".a") //选择class=“a”的元素
//多重选择器:选择符合条件的所有结果
$("p,hl,div") //选择文档中所有段落元素<p>、标题元素<hl>和块元素<div>

属性选择器

//带有指定属性的元素
$("[alt]") //所有带alt属性的元素
//属性等于指定值得元素
$("[href='#']") //所有href属性值等于#的元素
//属性不等于指定值的元素
$("[href!='#']") //所有href属性值不等于#的元素
//属性以指定值结尾的元素
$("[src$='.png']") //所有src属性以.png结尾的元素
//属性以指定值为开头的元素
$("input[name^='nation']") //所有name属性以nation为开头的元素
//属性包含指定值的元素
$("input[name*='nation']") //所有name属性包含nation的元素

表单选择器

//所有<input>元素
$(":input")
//所有type=“text”的<input>元素
$(":text")
//所有type=“password”的<input>元素
$(":password")
//所有type=“radio”的<input>元素
$(":radio")
//所有type=“checkbox”的<input>元素
$(":checkbox")
//所有type=“submit”的<input>元素
$("input:submit")
//所有type=“reset”的<input>元素
$(":reset")
//所有type=“button”的<input>元素
$(":button")
//所有type=“image”的<input>元素
$(":image")
//所有type=“file”的<input>元素
$(":file")

指定状态的表单元素选择器

//所有启用的<input>和<button>元素
$(":enabled")
//所有被禁用的<input>和<button>元素
$(":disabled")
//下拉列表中处于被选中状态的<option>元素
$(":selected")
//所有被选中的单选按钮或者复选框
$(":checked")

层次选择器

//子元素选择器:只能选择指定元素的第一层子元素
//语法:$("parent>child")
$("p>span") //p标签下面的span标签
//后代选择器:指定元素内包含的所有后代元素(可以是第n层子元素)
//语法:$(ancestor descendant) 
$("p span") //p标签下面的span标签
//后相邻选择器:与指定元素相邻的后一个元素
//语法: $("prev+next")
 
//后兄弟选择器:指定元素后面跟随的所有符合条件的元素(可以是多个)
//语法:$("prev~siblings") 
 
//jQuery css选择器
//语法: $(selector).css(propertyName,value);
$("p").css("background-color","gray"); //将所有<p>标签背景改为灰色

过滤器

基础过滤器

//:first 选择第一个符合条件的元素
$("div:first") //选定第一个div
//:last 选择最后一个符合条件的元素
$("p:last") //选定最后一个段落
//:even 选择偶数的元素(元素从0开始计数)
$("tr:even") 
//:odd 选择奇数的元素
$("tr:odd") 
//:eq() 选择指定序号的元素
$("li:eq(0)") 
//:gt() 选择大于指定序号的元素
$("li:gt(2)") 
//:lt() 选择小于指定序号的元素
$("li:lt(2)") 
//:not() 选择所有不符合指定要求的元素
$(":not(p#test)") //选择除id=test之外的所有段落
//:header 选择所有的标题元素,即<h1>~<h6>
$(":header") //选中网页中所有标题

子元素过滤器

//:first-child 所有父元素中的第一个子元素
$("p:first-child")
//:last-child 所有父元素中的最后一个子元素
$("p:last-child")
//nth-child() 所有父元素中的第n个子元素
$("ul#test li:nth-child(odd)") //在id=test的列表中选择所有奇数项<li>元素
$("li:nth-child(2)") //选择第2个<li>元素
//nth-last-child() 所有父元素中倒数第n个元素
$("li:nth-last-child(2)") //选择倒数第2个<li>元素
//only-child 所有父元素中唯一的子元素
$("ul:only-child") //选择只有一个<li>元素的列表

内容过滤器

//:contains() 选择div中包含北京的
$("div:contains('北京')")
//:empty
$("td:empty") //选择没有内容的<td>元素
//:parent
$("td:parent") //选择有内容的<td>元素
//:has() 选择包含有strong标签的div元素
$("div:has(strong)")

可见性过滤器

//:hidden 选择所有隐藏的元素
$("p:hidden") //网页中不占用任何位置空间就被认定为是隐藏的
//:visible 选择所有可见状态的元素
$("p:visible") 

事件

文档/窗口事件

ready() //文档准备就绪时触发
$(document).ready()
load() //文档加载时触发
$("img").load(function(){
 alert("图像已加载");
})
unload() //当用户的浏览器窗口从当前窗口跳到提起窗口时触发
$(window).unload()

键盘事件(键盘事件顺序为 keydown -> keypress ->keyup)

  • 所有的键盘事件对象,都有keyCode属性,这个keyCode属性可以获取键值。keyCode是键盘事件对象的属性。记住:键盘上回车键的键值是13;ESC键的键值是27。

  • keypress事件与keydown和keyup的主要区别:
    1)对中文输入法支持不好,无法响应中文输入
    2)无法响应系统功能键(如delete,backspace)

keydown() //键盘被按下触发
keypress() //键盘被按下并快速释放触发
keyup() //键盘被释放触发
$("input:text").keydown(function(){
	console.log("keydown");
	$("#tip").text("键盘被按下");
});

鼠标事件

click() //单击
dblclick() //双击
hover() //悬浮
mousedown() //按下
mouseup() //释放
mousemove() //移动
mouseenter() //进入
mouseleave() //离开
mouseover() //穿过
mouseout() //离开
toggle() //在jQuery1.8版之后已过期,慎用

表单事件

blur()	//当表单元素失去焦点时发生
focus() 	//当表单元素获得焦点时发生
change() 	//当表单元素的值发生改变时发生
select()	//textarea 或文本类型的 input 元素中的文本被选择时发生
submit()	//提交表单时发生

事件的绑定与解除

bind() //为被选元素添加一个或多个事件
delegate() //为被选元素的子元素添加一个或多个事件
on() //在被选元素及子元素上添加一个或多个事件
off() //用于移除添加的事件处理程序
one() //添加只运行一次的事件
语法:
$(selector).on(event,[data,] function)
eg:
$("button").on/bind/delegate({
	"click":function(){ 
 $("body").css("background-color","red")
 },
	"dblclick":function(){ 
 $("body").css("background-color","yellow")
 },
	"mouseover":function(){ 
 $("body").css("background-color","blue")
 }
})

特效

隐藏显示

hide() //隐藏 	
show() //显示
toggle() //隐藏和显示切换
$(selector).hide([duration] [, callback]);
duration参数设置隐藏动作执行持续时间,默认单位毫秒,可以填写“fast”默认持续时间是200毫秒,而“slow”默认是600毫秒或者具体数值
callback参数为隐藏动作执行完成之后下一步执行的函数名,没有可以不写
eg:
$("#hidebtn2").click(function(){
	$("#test2").hide(3000) //三秒隐藏完成
})
$("#showbtn2").click(function(){
 $("#test2").show("fast")
})

淡入淡出

fadeIn() //淡入 
fadeOut()	//淡出
fadeToggle() //淡入淡出切换
$(selector).fadeIn([duration] [, callback])
fadeTo()	//元素变为指定的透明度(0~1)
$(selector).fadeTo (duration, opacity [, callback])
	opacity:该参数为必填内容,用于设置元素的透明度。透明度的数值必须在0~1之间,数值越小透明度越高。0为完全透明,1为非透明。

滑动

slideDown() //向下滑动元素
slideUp() //向上滑动元素
slideToggle() //切换向上和向下滑动元素
$(selector).slideDown([duration] [, callback])

动画

animate() 
$(selector).animate({params} [, duration] [, callback])
 params:(必选项)表示形成动画的CSS属性,允许多个属性同时改变
 duration和callback(可选项)
eg:
$("#btn").click(function(){
	$("div").animate({
	width:"400",
	fontSize:"25",
 //当CSS属性名称中包含的连字符 " - “ 时,需要使用Camel标记法
	backgroundColor: "#aaffaa",
	opacity:"0.35" //透明度
	},2000)
})
//使用CSS属性中的方位值left、right、top以及bottom改变元素位置实现移动的效果,在HTML中所有元素的position属性值默认为静态(static)无法移动,若想移动需事先设置指定元素的position属性为relative、absolute或者fixed。 
$("#btn1").click(function(){
	$("div").animate({
	left:"+200px",
	top:"+100px"
	},3000)
})
//动画队列 多个连续的animate(),在同一个animate()方法中描述的多个动画效果会同时发生,不同animate()方法中描述的会按顺序先后发生

方法链接

$(selector).action1().action2().action3()......actionN();
eg:
$("#btn").click(function(){
	$("p").slideUp(3000)
	.slideDown("slow")
	.css("background-color","green")
	.fadeTo(2000,0)
	.fadeTo(2000,1)
})

停止动画

$(selector).stop([stopAll] [, goToEnd]);
stopAll和goToEnd均为可选项;
stopAll:是否清除后续所有动画,填入布尔值,默认为false;
goToEnd:是否立即完成当前的动画,填入布尔值,默认值为false;

HTML DOM

获取和设置

//text()	//获取元素的纯文本内容,不识别html标签(非表单元素)
//text("内容") //设置元素的纯文本内容,不识别html标签(非表单元素)
console.log( "id为test1的元素的内容是:" + $("#text1").text() );
$("#text2").text("信科院");
//html()	//获取元素的内容,包含html标签(非表单元素)
//html("内容")	//设置元素的内容,包含html标签(非表单元素)
console.log( "id为html1的内容是:" + $("#html1").html() );
$("#html1").html("<h2>湖南</h2>");
//val()	//获取元素的值(表单元素)
//val("值")	//设置元素的值(表单元素)
console.log( "id为op的元素的内容是:" + $("#op").val() );
$("#op").val("today!");
//attr() //获取或设置选定元素的属性值
console.log( "id为aa的name属性值是:" + $("#aa").attr("name") );
$("a").attr("href","http://www.baidu.com");
//css() //获取或设置选定元素的css属性值 addClass()为某个元素添加样式,removeClass()删除样式,toggleClass()删除添加轮流
console.log("段落的背景颜色是:" + $("p").css("background-color") );
$("p").css("background-color","red");
$("p").css("background-color":"red" , "font-size":"25px");
$("button").click(function(){
	$("div#remove").toggleClass("bule");
})

添加

append() //选定元素内部结尾处插入内容
prepend() //选定元素内部开头插入内容
after() //选定元素之后出入内容
before() //选定元素之前插入内容
//用法一样
$("p#test").append("这是一段测试内容");
appendTo() //将内容插入到选定元素之前
$("<span>Hello World!</span>").appendTo("p"); //将Hello World!插入到p标签之前

删除

remove() //删除选定元素及其子元素
$("p#test").remove(); //删除id为test的段落
empty() //清空元素,文本内容
$("h1").empty();
removeAttr() //删除元素的指定属性
$("div").removeAttr("id");

尺寸

width() //获取或设置宽度(不包括内外边距和边框宽度)
height() //获取或设置高度(不包括内外边距和边框宽度)
innerWidth() //获取或设置宽度(包括内边距)
innerHeight() //获取或设置高度(包括内边距)
outerWidth() //获取或设置宽度(包括内边距和边框宽度)
outerHeight() //获取或设置高度(包括内边距和边框宽度)

遍历

后代遍历

children() 	//只能查找指定元素的第一层子元素
$("#dc").children().css({border:"3px solid red",backgroundColor:"pink"});
find()	//方法可用于查找指定元素的所有后代元素
//查找id=df下面所有后代元素
$("#df").find("*").css({border:"3px solid red",backgroundColor:"pink"});
//查找id=df下面所有<span>后代元素
$("#df").find("span").css({border:"3px solid red",backgroundColor:"pink"});

​ 这里加上选择器:

​ 子元素选择器:只能选择指定元素的第一层子元素
​ 格式:父元素>指定元素 (>隔开)
​ $("parent>chlid") $("父元素>指定元素")

​ 后代选择器:指定元素内包含的所有后代元素(可以是第n层子元素)
​ 格式:父元素 指定元素 (空格隔开)
​ $("ancestor descendant") $("父元素 指定元素")

同胞遍历

siblings():查找指定元素的所有同胞元素
next():查找指定元素的下一个同胞元素
nextAll():查找指定元素后面的所有同胞元素
nextUntil():查找指定元素后面指定范围内的所有同胞元素
.nextUntil()([selector][, filter])
filter:进一步筛查
prev():查找指定元素的前一个同胞元素
prevAll():查找指定元素前面的所有同胞元素
prevUntil():查找指定元素前面指定范围内的所有同胞元素
.prevUntil()([selector][, filter])
filter:进一步筛查

​ 这里加上选择器:

​ 后兄弟选择器:指定元素后面跟随的所有符合条件的元素(可以是多个)
​ 格式:元素~指定元素 (~隔开)
​ $("prev~siblings") $("元素~指定元素")

​ 后相邻选择器:与指定元素相邻的后一个元素
​ 格式:元素+指定元素 (+隔开)
​ $("prev+next") $("元素+指定元素")

祖先遍历

parent():查找指定元素的直接父元素
parents():查找指定元素的所有祖先元素
parentsUntil():查找指定元素向上指定范围的所有祖先元素
/*
.parentsUntil()([selector][, filter])
filter:进一步筛查
*/
eg:
$("li").parentsUntil("div#d1","#d2"); //向上查找id=d1的祖先元素,不超过id=d2的范围
作者:睎原文地址:https://www.cnblogs.com/05xy/p/17234465.html

%s 个评论

要回复文章请先登录注册