jQuery 常见的基本操作

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头： $() 。

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合

（1）元素选择器

jQuery元素选择器基于元素名选取元素。

语法：

$("p")

（2）id选择器

通过HTML元素的id属性选取指定的元素。使用 # 标识

页面中元素的id应该是唯一的，当需要在页面中选取唯一的元素时可以使用id选择器。

语法：

$("#app")

（3）class选择器

通过指定的class查找元素。使用 . 标识

语法：

$(".test")

（4）更多选择器

• $("*")：选取所有元素
• $(this)：选取当前HTML元素
• $(“p.intro”)：选取class为intro的<p>元素
• $(“p:first”)： 选取第一个<p>元素
• $(“ul li:first”)：选取第一个<ul> 元素的第一个<li> 元素
• $(“ul li:first-child”)：选取每个 <ul> 元素的第一个 <li> 元素
• $("[href]")：选取带有href属性的元素
• $(":button")：选取所有 type=“button” 的 元素 和 元素。如果去掉冒号，$(“button”)只能获取 <button> 元素。
• $(“tr:even”)：选取偶数位置的 元素

jQuery事件

（1）什么是事件

• 页面对不同访问者的响应叫做事件。

• 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

• 实例：

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素

• 在事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。

（2）常见DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

（3）jQuery事件方法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

示例：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

（4）常用的jQuery事件方法

• 基本事件

  • $(document).ready()：文档已完全加载事件
  • click()：点击事件
  • dbclick()：双击事件
  • hover()：光标悬停事件
  • focus()：元素获取焦点

• keypress, keydown, keyup的区别:

  • keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
  • keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
  • keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

案例1：获取按键代码或字符的ASCII码：

$(window).keypress(function(event){
    //获取事件对象，里面包含各种有用的信息。
    console.log(event);
    
    //event.which是获取ASCII码，前面的函数是将ASCII码转换成字符，空格键和Enter键输出均为空白。
    console.log(String.fromCharCode(event.which));
    
    //从event对象中key属性获取字符，但是Enter键的key值为"Enter"，空白键还是空白" "。
    console.log(event.key);
});

案例2：传递数据给事件处理函数

//语法：
jQueryObject.keypress( [[ data ,]  handler ] );

（1）data：通过event.data传递给事件处理函数的任意数据;

（2） handler：指定的事件处理函数;

// 只允许按下的字母键生效, 65~90是所有大写字母的键盘代码范围.
var validKeys = { start: 65, end: 90  };
$("#keys").keypress( validKeys, function(event){
    var keys = event.data;  //拿到validKeys对象.
    return event.which >= keys.start && event.which <= keys.end;
} );

jQuery 元素操作

jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

（1）元素内容获取和设置

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• attr() - 方法用于设置/改变或获取属性值

<div>
			内容
			<a href="http://www.baidu.com">百度一下</a>
		</div>
		
		<input type="text" value="hello"><br />
		
		
		<button class="text">获取文本Text</button>
		<button class="html">获取内容HTML</button>
		<button class="val">获取值value</button>
		<button class="attr">获取属性attr</button>
		
		<script type="text/javascript">
			$(function() {
				// text() 
				// 没有参数表示获取纯文本内容
				// 带有参数表示修改内容
				$(".text").click(function(){
					console.log($("a").text("百度一下"));
				})
				
				// html()
				// 没有参数表示获取内容,包含标签
				// 带有参数表示修改内容,会以标签的格式显示
				$(".html").click(function(){
					console.log($("div").html());
				})
				
				// val()
				// 没有参数表示获取value属性值
				// 带有参数表示修改value值
				$(".val").click(function(){
					console.log($("input").val());
				})
				
				// // attr()
				// 带有一个参数表示获取指定属性的值
				// 带有两个参数表示修改指定属性的值
				// 如果有多个属性需要修改时,使用{}对象表示
				$(".attr").click(function(){
					$("a").attr("target", "_blank");
					console.log($("a").attr("href")); //获取href属性的值
					
					$("input").attr({ //修改input元素的多个属性
						type: "password",
						value: "123",
						name: "passwd"
					})
				})
			})

（2）元素的添加及删除

• 添加新元素/内容

  • append() - 在被选元素的结尾插入内容。追加
  • prepend() - 在被选元素的开头插入内容。
  • after() - 在被选元素之后插入内容。
  • before() - 在被选元素之前插入内容。
  • append与prepend在选择元素内部嵌入，after和before是在元素外面追加。

<div>
			<p>目标元素</p>
		</div>
		<button class="addInner">内部添加元素</button>
		<button class="addOuter">外部添加元素</button>
		
		<script type="text/javascript">
			
			$(function(){
				// append() 和 prepend() 表示在指定元素内部的开头或结尾添加元素
				// 添加的元素与指定元素是父子关系
				$(".addInner").click(function() {
					$("div").append("<span>末尾的元素</span>");
					$("div").prepend("<input/>")
				})
				
				$(".addOuter").click(function(){
					// after() 和 before() 表示在指定元素前面和后面添加元素
					// 添加的元素与指定元素是兄弟关系
					$("div").after("<h1>外部元素</h1>");
					$('div').before("<ul><li>列表</li></ul>");
				})
			})
			
		</script>

删除元素/内容

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

<ul>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ul>
		<div>
			<a href="#">百度</a>
			<a href="#">新浪</a>
		</div>
		
		<button class="remove">remove</button>
		<button class="empty">empty</button>

		<script type="text/javascript">
			$(document).ready(function() {
				// remove()移除自己及其所有的子元素
				$(".remove").click(function() {
					$("ul").remove();
				})
				
				// empty()移除所有的子元素
				$(".empty").click(function(){
					$("div").empty();
				})
				
			})
		</script>
		
		
		<section class="father">
			<p>其他元素</p>
			<p class="son">段落</p>
		</section>
		<section class="other">xsdfad</section>
		<button class="delete">删除</button>
		<script type="text/javascript">
			$(function() {
				
				$(".delete").click(function() {
					// 以下两行代码是等价的
					// 选择元素后再过滤元素,然后删除
					$("section").remove(".other");
					//根据过滤器选择元素，再删除
					$("section.other").remove();
				})
				
				
			})
		</script>

（3）CSS的获取与设置

• 添加CSS

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作

<style type="text/css">
			.color {
				background-color: lightcyan;
				color: red;
				border: 1px solid blue;
			}
			
			.font {
				font: italic bold 40px/46px "楷体";
			}
			.size {
				width: 200px;
				height: 200px;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		
		<div>
			这是一段文本
		</div>
		<button class="add">添加样式</button>
		<button class="del">移除样式</button>
		<button class="toggle">切换样式</button>
		
		<script type="text/javascript">
			$(document).ready(function() {
				$(".add").click(function(){
					$("div").addClass("color font size"); //类似于className
				})
				
				$(".del").click(function(){
					$("div").removeClass("size");
				})
				
				$(".toggle").click(function(){
					$("div").toggleClass("color");
				})
			})
		</script>
		
		<h1 style="color: red;">这是标题</h1>
		<script type="text/javascript">
			$(function(){			
				console.log($("h1").css("color"))			
				// ele.style
				$("h1").css({color: "blue", backgroundColor: "pink", "font-size": "50px"})
			})			
		</script>

（4）jQuery尺寸

需要注意的地方，设置了 box-sizing 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

jQuery 遍历

（1）什么是遍历

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

可以在家族树中向上移动（祖先），向下移动（子孙），水平移动（同袍）.这种移动被称为对 DOM 进行遍历

（2）祖先

• parent() - 返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历
• parents() - 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。可以使用可选参数来过滤对祖先元素的搜索。
  示例：

$(function(){
	$("p").parents(); //返回所有的祖先元素
    $("p").parents("ul"); //通过过滤器返回指定的祖先元素ul
});

• parentsUntil() - 返回介于两个给定元素之间的所有祖先元素，不包含指定的元素。

（3）后代

• children() - 返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。也可以使用可选参数来过滤对子元素的搜索。
  示例：

$(function(){
	$("ul").children(); //返回ul元素中的所有直接子元素
				
	$("ul").children(".one"); //返回ul元素中所有类名为one的所有直接子元素
});

• find() - 返回被选元素的后代元素，一路向下直到最后一个后代。
  示例：

$(function(){
	$(".grand").find(".one"); //返回返回指定元素中所有类名为one的后代元素
				
	$(".grand").find("*"); //返回指定元素的所有后代元素
});

（4）同袍

同胞拥有相同的父元素。

• siblings() - 返回被选元素的所有同胞元素。可以使用可选参数来过滤对同胞元素的搜索。
• next() - 返回被选元素的下一个同胞元素。该方法只返回一个元素。
• nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素。

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

（5）过滤

first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

• first() - 返回被选元素的首个元素。
• last() - 返回被选元素的最后一个元素。
• eq() - 返回被选元素中带有指定索引号的元素。索引号从0开始。

$(document).ready(function(){
  $("div p").first(); //返回<div>中第一个p元素
  $("div p").last();  //返回<div>中最后一个p元素
  $("p").eq(1);		  //返回整个文档中第二个p元素
});

filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

• filter() - 返回匹配标准的所有元素。
• not() - 返回不匹配标准的所有元素。

$(document).ready(function(){
	$("li").filter(".one");	//返回所有类名为one的<li>元素		
	$("li").not(".one"); //返回所有类名不为one的<li>元素
});

not 和 eq 可以实现反选的效果。

//选取索引值不为 1 的 p 元素，并把背景颜色设置为黄色
$("p").not(":eq(1)").css("background-color","yellow");

jQuery 效果

jQuery有方法可以很快的实现 隐藏、显示、切换，滑动，淡入淡出，以及动画等效果，哇哦！

（1）隐藏/显示

hide() / show() - 隐藏/显示 HTML 元素
语法：
toggle() - 切换 hide() 和 show() 方法

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

//参数说明：
//speed，可选参数，规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
//callback，可选参数，隐藏或显示完成后所执行的函数名称。

（2）淡入淡出

fadeIn() - 淡入已隐藏的元素
fadeOut() - 淡出可见元素
fadeToggle() - 在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo() - 允许渐变为给定的不透明度（值介于 0 与 1 之间）
注意：

• 大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。
• fadeTo() 没有默认参数，必须加上 slow/fast/Time

（3）滑动

slideDown() - 向下滑动元素。
slideUp() - 向上滑动元素。
slideToggle() - 在 slideDown() 与 slideUp() 方法之间进行切换。

		<style type="text/css">
			div {
				width: 500px;
				height: 200px;
				border: 1px solid red;
				background-color: hotpink;
			}
		</style>
	</head>
	<body>
		<button class="hide">隐藏</button>
		<button class="show">显示</button>
		<button class="toggle">切换显示和隐藏</button>
		<button class="fadein">淡入</button>
		<button class="fadeout">淡出</button>
		<button class="fadetoggle">切换淡入淡出</button>
		<button class="slideup">向上滑动</button>
		<button class="slidedown">向下滑动</button>
		<button class="slidetoggle">切换滑动</button>
		<div></div>
		
		<script type="text/javascript">
			
			$(document).ready(function(){
				// hide() 隐藏元素
				// show() 显示元素
				// toggle() 切换显示和隐藏元素
				
				$(".hide").click(function() {
					$("div").hide("slow", function(){
						// alert("success");
					});
				})
				
				$(".show").click(function(){
					$("div").show("fast", function(){
						// alert("show")
					});
				})
				//显示与隐藏的切换
				$(".toggle").click(function(){
					$("div").toggle(2000, function(){
						// alert("切换完成")
					});
				})
				//淡入
				$(".fadein").click(function(){
					$("div").fadeIn(1000)
				})
				//淡出
				$(".fadeout").click(function(){
					$("div").fadeOut(2000);
				})
				//切换淡入淡出
				$(".fadetoggle").click(function(){
					$("div").fadeToggle(1500);
				})
				//向上滑动
				$(".slideup").click(function(){
					$("div").slideUp(2000);
				})
				//向下滑动
				$(".slidedown").click(function(){
					$("div").slideDown(1000);
				})
				//滑动切换
				$(".slidetoggle").click(function(){
					$("div").slideToggle(500);
				})		
			})
			
		</script>

（5）链（Chaining）

我们都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);