jQuery选择器与效果

jQuery选择器与效果

jQuery是一个JavaScript函数库，是一个“写的少，做的多”的javascript库。
jQuery选择器：
jQuery选择器允许我们对HTML元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
jQuery 中所有选择器都以美元符号开头：$()。jQuery元素选择器基于元素名选取元素。例如：在页面中选取所有<p>元素，我们只要这样写：$(“p”);
只要用美元符号加上括号和元素名就可以选取

元素。
jQuery id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以我们要在页面中选取唯一的元素需要通过 #id 选择器。
Id选择器和元素选择器有点像，例如：我要选取ID名为text的值，我们可以这样写：KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲text”); 相比元素选择器…(“.text”);
在选择器中，比较常用的选择器大致就这三种。
jQuery效果：隐藏和显示
在jQuery中我们可以使用hide()和show()这两种方法来隐藏和显示HTML元素，也可以用toggle()方法，它的效果等同于hide()和show();
代码如下：

使用toggle()，等同于hide()与show()这两个方法，代码如下：

相比hide()和show()这个方法只要一个按钮就可实现隐藏与显示。
jQuery效果：淡入和淡出
在在jQuery中我们可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()。
fadeIn()用于淡入已隐藏的元素：
fadeIn()在使用时可以带参数，如"slow"、“fast” 或毫秒。 参数是 fading 可以是完成后所执行的函数名称。代码如下 ：

第一个DIV没有参数，所以在运行时它出现的比较快，而第二个有参数slow就会变慢。在第三的时候就是我们自己定义要在多少毫秒内完成淡入这个过程。
fadeOut()，方法用于淡出可见元素。与fadeIn()一样，可带参数，代码如下：

还是一样的代码只不过将fadeIn修改成了fadeOut，
fadeToggle()方法可以在fadeOut()与fadeIn()中进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。它的参数与那两个方法一样，代码如下：

而fadeTo()方法是允许渐变为给定的不透明度，是一个控制元素透明的方法，
代码如下：

效果如图：