jQuery 常见的基本操作

常见的基本操作"/>

jQuery 常见的基本操作

飞雷神之术

• jQuery 选择器
• • • （1）元素选择器
    • （2）id选择器
    • （3）class选择器
    • （4）更多选择器
• jQuery事件
• • • （1）什么是事件
    • （2）常见DOM事件
    • （3）jQuery事件方法
    • （4）常用的jQuery事件方法
• jQuery 元素操作
• • • （1）元素内容获取和设置
    • （2）元素的添加及删除
    • （3）CSS的获取与设置
    • （4）jQuery尺寸
• jQuery 遍历
• • • （1）什么是遍历
    • （2）祖先
    • （3）后代
    • （4）同袍
    • （5）过滤
• jQuery 效果
• • • （1）隐藏/显示
    • （2）淡入淡出
    • （3）滑动
    • （5）链（Chaining）

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="">百度一下</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);