jQuery入门

Paste_Image.png

jQuery是一个javascript库，它可以方便的选取HTML元素，并改变CSS样式，同时执行酷炫的动画。如何jQuery的设计初衷一样：write less, do more

在学习jQuery之前，需要对HTML、CSS和JavaScript有基本的了解，这不在本文的讨论范围之内，你可以在网上找各种教程和资料来学习。推荐菜鸟教程

01 jQuery选择器

jQuery可以选择HTML元素来改变他们的样式或者增加动画效果。jQuery选择器的基本格式为：$(selector).action()。$(selector)是选中的HTML元素，action是对选中的元素进行的动作。

• 通过HTML标签选择

比如选择HTML所有标签为p的元素，也就是段落，语法为$("p")

• 通过类class选择

比如选择类为color的元素，语法为$(".color")

• 通过id选择

比如选择id为name的元素，语法为$("#name")

此外，$("*")表示选中所有元素，$(this)表示选取当前HTML元素。
$(".button")表示选中button元素和type为button的input元素，而$("button")仅能选中button元素。

02 jQuery事件

jQuery事件是和用户的交互，用户用鼠标或键盘对文档元素做不同的操作，文档会根据操作渲染出不同的视图。主要事件有：

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

此外，还有一些比较常用的事件

• $(document).ready()

$(document).ready是文档就绪事件，它让我们在文档完全加载完后才能对元素进行操作。

• hover

hover事件用于模拟光标悬停事件，光标移动到元素上会发出mouseenter事件，光标离开元素会触发mouseleave事件。

03 jQuery动画

jQuery支持动画效果，可以让你的网页更加生动有趣。

• hide / show / toggle

支持元素的隐藏和显示，toggle切换hide和show。都支持可选的参数：hide(speed, callback) show(speed, callback) toggle(speed, callback)。其中speed参数是动画的时间，即隐藏/显示的速度，callback是回调函数。比如$("p").show(1000, foo)的效果是：p元素用1秒的时间显示完成后，执行回调函数foo。

• fadeIn / fadeOut / fadeToggle / fadeTo

fadeIn用来淡入已经隐藏的元素，fadeOut用来淡出已经显示的元素，fadeToggle用来切换fadeIn和fadeOut的效果，它们的方法都类似于：fadeIn(speed, callback),参数说明和上一小节类似。
fadeTo则可以指定渐变到哪个透明度，方法为：fadeTo(speed, opacity, callback),opacity的值为0到1之间。

• slideUp / slideDown / slideToggle

slideUp用来元素的向上滑动，slideDown用来元素的向下滑动，slideToggle用来在up和down之间切换。方法和参数的说明和上一小节类似：slideUp(speed, callback)

• animate

animate用于创建自定义动画。方法为：animate({params}, speed, callback) , 参数speed和callback的意义和之前一样，params定义成动画的CSS属性。你可以在params中定义多个属性：

$("p").animate(
  { 
    left:250px,    opacity:0.5,    height:250px,    width:150px
  }
)

• stop

stop用来停止正在进行的动画和效果。

04 jQuery HTML

jQuery拥有操作DOM的能力，可以读取/修改HTML元素的内容。

• 读取HTML元素内容

1. text()获取元素内容

比如$("p").text()获取段落p的内容

1. html()获取元素的html内容，包括html标签

比如$("p").html()获取段落p的html 内容

1. val()获取表单内容

比如$("#test").val()获取id为test的表单内容

• 设置HTML元素内容

很简单，只要在text()或html()或val()括号内填入你要设置的值，就能修改选中元素的内容。比如：$("p").text("Hello world!").那么段落p的内容就变成了 Hello world!

• 添加 / 删除元素

1. append / prepend

append用于在选中元素的尾部插入元素
prepend在选中元素的头部插入元素

1. after / before

after用于选中元素之后插入元素
before在选中元素之前插入元素

append和after的区别在于append是在元素内，而after是在元素外，prepend和before的区别也是如此

1. remove / empty

remove用于删除被选元素及其子元素
empty从被选元素中删除子元素，保留被选元素

• CSS类

1. addClass / removeClass / toggleClass

addClaass用于在选中元素上添加一个类
removeClass用于在选中元素上删除一个类
toggleClass用于在选中元素上添加和删除类的切换操作

1. css()

css()方法用于读取或设置选中元素的css样式。
$("p").css("background-color") 返回元素p的背景颜色
$("p").css("background-color", "yellow")设置元素p的背景颜色为黄色
$("p").css("background-color": "yellow", "height": 100px)设置元素p的多个css属性

05 jQuery遍历

jQuery对元素的遍历是根据DOM(文档对象模型)而建立的。

Paste_Image.png

图解：

• div是ul的父元素，ul是div的子元素

• ul有两个子元素li，两个子元素是同胞

• 祖先是父、祖父或曾祖父等等

• 后代是子、孙或曾孙等等

• 遍历祖先

方法	说明
parent	返回该元素的直接父元素
parents	返回该元素的祖先
parentsUntil	返回介于两个给定元素之间的祖先

• 遍历后代

方法	说明
children	返回该元素的直接子元素
find	find("*")返回该元素的所有后代

• 遍历同胞

方法	说明
sblings	返回所有的同胞元素
next	返回下一个同胞元素
prev	返回上一个同胞元素
nextAll	返回接下来所有的同胞元素
prevAll	返回之前所有的同胞元素
nextUntil	返回两个给定元素之间的同胞元素
prevUntil	返回两个给定元素之间的同胞元素

• 遍历过滤

方法	说明
first	选中被选所有元素的第一个元素
last	选中被选所有元素的最后一个元素
eq	eq(1)选中被选所有元素的第二个元素，索引从0开始
filter	匹配元素，比如filter(".name")选中name class类
not	不匹配元素，比如not(".name")选中非name class类

ENDING

作者：at小宇
链接：https://www.jianshu.com/p/e5660d47cd38