Jquery第二篇【选择器、DOM相关API、事件API】

电玩女神 2021-09-17 06:44 231阅读 0赞

# 前言 #

前面已经介绍过了Jquery这门语言，其实就是**一个javaScript的库**…能够简化我们书写的代码….本博文主要讲解**使用Jquery定位HTML控件【定位控件就是获取HTML的标签】，使用Jquery操作DOM的API**

# 选择器 #

**Jquery提供了九个选择器给我们用来定位HTML控件..**

*  目的：通过九类选择器，**能定位web页面（HTML/JSP/XML）中的任何标签**  
    
    
     *  （1）基本选择器  
        
        
         *  **直接定位id、类修修饰器、标签**
     *  （2）层次选择器  
        
        
         *  **有父子，兄弟关系的标签**
     *  （3）增强基本选择器  
        
        
         *  **大于、小于、等于、奇偶数的标签**
     *  （4）内容选择器  
        
        
         *  **定义内容为XXX、内容中是否有标签器、含有子元素或者文本的标签**
     *  （5）可见性选择器  
        
        
         *  **可见或不可见的标签**
     *  （6）属性选择器  
        
        
         *  **与属性的值相关**
     *  （7）子元素选择器  
        
        
         *  **匹配父标签下的子标签**
     *  （8）表单选择器  
        
        
         *  **匹配表单对应的控件属性**
     *  （9）表单对象属性选择器  
        
        
         *  **匹配表单属性具体的值**

**通过这九种的选择器，我们基本可以能获取HTML中任何位置的标签。**

![这里写图片描述][SouthEast]

--------------------

# Jquery关于DOM的API #

前面使用Jquery的选择器来获取到了HTML标签，**单纯得到标签是没有用的。我们要对其进行增删改，这样在网页上才能做出“动态”的效果**…

JavaScript的DOM能够操作CSS,HTML从而在网页上做出动态的效果..

![这里写图片描述][SouthEast 1]

**Jquery是对JavaScript的封装，那么Jquery在得到HTML标签后，也有对应的方法来获取标签的内容，动态创建、删除、修改标签。**从而在网页上做出动态的效果

## 追加 ##

*  **append()：追加到父元素之后**
 *  **prepend()：追加到父元素之前**
 *  **after()：追加到兄弟元素之后**
 *  **before()：追加到兄弟元素之前**

## 查询层次关系 ##

我们发现在选择器上就有层次关系的选择器，在API上也有层次关系的方法。**一般地，我们用方法来定位到对应的控件比较多**。

*  **children()：只查询子节点，不含后代节点**
 *  **next()：下一下兄弟节点**
 *  **prev()：上一下兄弟节点**
 *  **siblings()：上下兄弟节点**

## css样式 ##

*  **addClass()：增加已存在的样式**
 *  **removeClass()：删除已存在的样式**
 *  **hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式**
 *  **toggleClass()：如果标签有样式就删除，否则增加样式**

## 动画效果 ##

**往这些方法下设置参数，那么就可以控制它的隐藏、显示时间**

*  **show()：显示对象**
 *  **hide()：隐藏对象**
 *  **fadeIn()：淡入显示对象**
 *  **fadeOut()：淡出隐藏对象**
 *  **slideUp()：向上滑动**
 *  **slideDown()：向下滑动**
 *  **slideToggle()：上下切换滑动，速度快点**

## CSS尺寸属性 ##

**直接调用无参就是获取，给指定的参数就是修改**

*  **offset()：获取对象的left和top坐标**
 *  **offset(\{top:100,left:200\})：将对象直接定位到指定的left和top坐标**
 *  **width()：获取对象的宽**  
    
    
     *  **width(300)：设置对象的宽**
 *  **height()：获取对象的高**  
    
    
     *  **height(500)：设置对象的高**

## 标签内容和属性 ##

*  **val()：获取value属性的值**  
    
    
     *  **val(“”)：设置value属性值为”“空串，相当于清空**
 *  **text()：获取HTML或XML标签之间的值**  
    
    
     *  **text(“”)：设置HTML或XML标签之间的值为”“空串**
 *  **html()：得到标签下HTML的值**
 *  **attr(name,value)：给符合条件的标签添加key-value属性对** 
 *  **removeAttr()：删除已存在的属性**

## 增删改标签 ##

*  **`$("<div id='xxID'>HTML代码</div>")`：创建元素，属性，文本** 
 *  **remove()：删除自已及其后代节点**
 *  **clone()：只复制样式，不复制行为**
 *  **clone(true)：既复制样式，又复制行为**
 *  **replaceWith()：替代原来的节点**

## 迭代 ##

**由于Jquery对象都是被看成是一个数组，each()方法就是专门用来操作数组的**。

*  **each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象**

--------------------

# Jquery事件API #

**JavaScript一大特性就是事件驱动，当用户用了执行了某些动作以后，JavaScript就会响应事件，在事件的方法上，我们就可以对用户的动作“回馈”一些信息给用户！**

**Jquery也对JavaScript事件进行了封装**，我们看一下以下的API：

*  window.onload：在浏览器加载web页面时触发，**可以写多次onload事件，但后者覆盖前者**
 *  ready：在浏览器加载web页面时触发，可以写多次ready事件，**不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化**  
    
    
     *  **ready和onload同时存在时，二者都会触发执行，ready快于onload**
 *  **change：当内容改变时触发**
 *  **focus：焦点获取**
 *  **select：选中所有的文本值**
 *  **keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同**
 *  **mousemove：在指定区域中不断移动触发**
 *  **mouseover：鼠标移入时触发**
 *  **mouseout：鼠标移出时触发**
 *  **submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台**
 *  **click：单击触发**
 *  **dblclick：双击触发**
 *  **blur：焦点失去**

值得注意的是：**当用户执行动作的时候，浏览器会自动创建事件对象，传递进去给响应事件的方法【类似与监听器的原理】**，那么我们在**响应方法上就可以获取一些属性：**

![这里写图片描述][SouthEast 2]

[SouthEast]: /images/20210827/bf62078d07aa46de85f08d8d3b7842c8.png
[SouthEast 1]: /images/20210827/09d8ac531e554110a2a9b484d37f5a97.png
[SouthEast 2]: /images/20210827/061dee094ff54c2aab1186ba177412e4.png