jQuery的语法和基本使用整理

桃扇骨 2023-03-13 13:55 1阅读 0赞

### jQuery的语法和基本使用整理 ###

*   *   *  1. jQuery 导入方式
         *   *  1.1 下载导入
             *  1.2 CDN载入
             *  1.3 jQuery 命名冲突解决
         *  2. jQuery 语法
         *   *  2.1 jQuery 与 js 对象转换
             *  2.2 jQuery 选择器
             *  2.3 jQuery DOM
             *  2.4 jQuery 事件
             *  2.5 jQuery 遍历
         *  3. jQuery 异步请求：get/post/ajax
         *   *  3.1 get
             *  3.2 post
             *  3.3 ajax
             *  3.4 JasonUtils - 自定义

[jQuery 参考手册][jQuery]

jQuery，是一个 JavaScript 脚本类库文件，简化了JS编程。  
JQuery 是2006年8月诞生的一个开源项目，凭借简洁的语法和跨平台的兼容性，极大地简化了 JavaScript 开发遍历 HTML 文档、操作 DOM 、处理事件、执行动画和开发 Ajax 的操作，其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。

### 1. jQuery 导入方式 ###

#### 1.1 下载导入 ####

从官网下载 jQuery 库：[https://jquery.com/download/][https_jquery.com_download]

导入(/web/js/ 目录下)：

#### 1.2 CDN载入 ####

CDN，内容分发网络。  
官网 CDN 选择 minified (压缩版) 即可：[https://code.jquery.com/][https_code.jquery.com]  
载入：

官网：
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

其他站点 CDN ：

百度：
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    谷歌：
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    微软：
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

> 许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。因此当他们访问我们的站点时，会从缓存中加载 jQuery，这样可以`减少加载时间`。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以`提高加载速度`。

#### 1.3 jQuery 命名冲突解决 ####

多个JS库很有可能会导致 jQuery 命名冲突，解决办法：

var jq=$.noConflict(); // 帮助您使用自己的名称（比如 jq）来代替 $ 符号。

### 2. jQuery 语法 ###

#### 2.1 jQuery 与 js 对象转换 ####

JS 对象 与 jQuery 对象的属性和方法各自独立，不能相互调用。  
JS DOM 转 jQuery：

var jqObj = $(jsObj);

jQuery 转 JS DOM：

var jqObj = $("#div1");
    var jsObj1 = jqObj.get(0); // 方式1
    var jsObj2 = jqObj[0]; // 方式2 √

#### 2.2 jQuery 选择器 ####

参考手册：[https://www.w3school.com.cn/jquery/jquery\_ref\_selectors.asp][https_www.w3school.com.cn_jquery_jquery_ref_selectors.asp]

**① 基本选择器**：

*  id选择器：`$("#id");`
 *  类选择器：`$(".className");`
 *  标签选择器：`$("标签名");`
 *  通配符选择器：`$("*");`

**② 层次选择器**：  
从父子关系和胸弟关系来进行选择页面节点。

*  `$("a b");` a节点的所有后代节点b都被选中
 *  `$("a > b");` a节点的所有子节点b都被选中
 *  `$("a + b");` a节点之后的第一个胸弟节点b
 *  `$("a ~ b");` a节点之后的所有胸弟节点b

**③ 过滤选择器**：  
【基本过滤】从位置的角度来对页面的标签进行过滤选择。

*  `$("tagName:first");` 选择第一个tagName标签
 *  `$("tagName:last");` 选择最后一个tagName标签
 *  `$("tagName:eq(2)");` 选择脚标为2的tagName标签
 *  `$("tagName:gt(2)");` 选择脚标大于2的tagName标签
 *  `$("tagName:lt(2)");` 选择脚标小于2的tagName标签

【内容过滤】节点值是否为空，节点值是否包含指定的字符串。

*  `$("tagName:empty");` tagName节点中没有子元素(文本元素,其他子元素)
 *  `$("tagName:contains('aaa')");` tagName节点是否包含指定字符串
 *  `$("tagName:has(.one)");` tagName节点是否包含class为one的tagName元素

【属性过滤】从节点的属性来过滤筛选节点:有无属性,属性值等于,不等于,包含,多重过滤。

*  `$("tagName[id]")` :tagName节点是否包含id属性
 *  `$("tagName[id='cc']")` : tagName节点属性值是否为cc
 *  `$("tagName[id!='cc']")` :tagName节点属性值是否不为cc
 *  `$("tagName[id^='cc']")` :tagName节点属性值是否以cc为开头
 *  `$("tagName[id$='cc']")` :tagName节点属性值是否以cc为结尾
 *  `$("tagName[title*='cc']")` :tagName节点属性值是否包含cc
 *  `$("tagName[title*='cc'][name='ee'][id!='ff']")` : tagName节点属性值title是否包含cc,属性值name是否为ee,id属性是否不是ff

> 属性过滤的下标从 0 开始，因为拿到的是个数组。

【子元素过滤】选择父元素下的子元素(第1个,最后1个,第几个子元素) 。语法中的空格不能少。

*  `$("tagName :first‐child")` :tagName节点下的第一个子节点
 *  `$("tagName :last‐child")` :tagName节点下的最后一个子节点
 *  `$("tagName :nth‐child(2)")` :tagName节点下的第二个子节点
 *  `$("tagName :only-child")` :tagName如果只有一个子元素，就选中该子元素

> tagName 后的空格不能少； 子元素过滤器下标从 1 开始；

#### 2.3 jQuery DOM ####

内容操作：

*  `.html("html content")` : 设置/获取标签内容，解析 html 标签，相当于 .innerHTML
 *  `.text("text content")` : 设置/获取标签内容，不解析 html 标签，相当于 .innerText
 *  `.val(string)` : 多用于 input 元素，设置/获取 value 属性，相当于 .value

属性操作：

*  `.attr("属性名", "属性值")` : 获取/设置元素的属性，相当于 .setAttribute()
 *  `.removeAttr("属性名")` : 删除属性，相当于 .removeAttirbute()

使用：`获取第2个li节点的title属性和文本内容`

#### 2.4 jQuery 事件 ####

参考手册：[https://www.w3school.com.cn/jquery/jquery\_ref\_events.asp][https_www.w3school.com.cn_jquery_jquery_ref_events.asp]  
jQuery 是为处理 HTML 事件而特别设计的，更恰当且更易维护的代码规则：

*  所有 jQuery 代码置于事件处理函数中；
 *  所有事件处理函数置于文档就绪事件处理器中；
 *  jQuery 代码置于单独的 .js 文件中；
 *  如果存在名称冲突，则重命名 jQuery 库。

**JS 与 jQuery 事件对比**：

**jQuery 事件绑定的两种方式**：

**监听页面加载完成**：

使用：`输入框的获取/失去焦点默认值点击事件`

#### 2.5 jQuery 遍历 ####

参考手册：[https://www.w3school.com.cn/jquery/jquery\_ref\_traversing.asp][https_www.w3school.com.cn_jquery_jquery_ref_traversing.asp]

使用：`js 与 jQuery 遍历方式对比`

### 3. jQuery 异步请求：get/post/ajax ###

参考手册：[https://www.w3school.com.cn/jquery/jquery\_ref\_ajax.asp][https_www.w3school.com.cn_jquery_jquery_ref_ajax.asp]  
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON，同时您能够把这些外部数据直接载入网页的被选元素中。

*  $(selector).**load**(url,data,callback) 把远程数据加载到被选的元素中
 *  $.**ajax**(options) 把远程数据加载到 XMLHttpRequest 对象中
 *  $.**get**(url,data,callback,type) 使用 HTTP GET 来加载远程数据
 *  $.**post**(url,data,callback,type) 使用 HTTP POST 来加载远程数据
 *  $.**getJSON**(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
 *  $.**getScript**(url,callback) 加载并执行远程的 JavaScript 文件

> 参数说明：  
> @selector, jQuery 元素选择器语法  
> @url, 被加载的数据的 URL（地址）  
> @data, 发送到服务器的数据的键/值对象  
> @callback, 当数据被加载时，所执行的函数  
> @type, 被返回的数据的类型 (html,xml,json,jasonp,script,text)  
> @options, 完整 AJAX 请求的所有键/值对选项

#### 3.1 get ####

`$.get(url, data, callback, type)` : 使用GET 来加载远程数据

*  url:请求的路径
 *  data:请求的参数
 *  callback: 当数据被加载时，所执行的函数
 *  type: 被返回的数据的类型 (html,xml,json,jasonp,script,text)

使用：`get 异步请求参数并输出响应信息`

#### 3.2 post ####

`$.post(url, data, callback, type)` : 使用POST 来加载远程数据

*  url:请求的路径
 *  data:请求的参数
 *  callback: 当数据被加载时，所执行的函数
 *  type: 被返回的数据的类型 (html,xml,json,jasonp,script,text)

使用：`post 异步请求参数并输出响应信息`

#### 3.3 ajax ####

`$.ajax([settings])` 是低层级 AJAX 函数的语法。  
$.ajax 提供了比高层级函数更多的功能，但是同时也更难使用。

*  option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
 *  async，设置是否为异步请求
 *  contentType，设置请求头Content-Type，默认值：“application/x-www-form-urlencoded”
 *  **data**，请求参数
 *  **dataType**，响应正文的数据类型(“html”, “xml”, “json”, “jasonp”, “script”, “text”)
 *  complete(XHR, TS)，请求完成的回调函数
 *  error，请求失败的回调函数
 *  **success**，请求成功的回调函数
 *  timeout，设置请求延迟时间
 *  **type**，请求方式(Get/Post)
 *  **url**，请求路径
 *  xhr，获取异步请求对象

使用：`ajax 异步请求 post 方式发送参数并输出响应信息`

使用：`验证用户名是否存在，给出合适的提示`  
regist.jsp

CheckUsernameServlet.java

@WebServlet(name = "CheckUsernameServlet", urlPatterns = "/checkUsername")
    public class CheckUsernameServlet extends HttpServlet { 
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            request.setCharacterEncoding("utf-8");
            String username = request.getParameter("username");
            UserService userService = new UserServiceImpl();
            try { 
                boolean flag = userService.checkUsername(username);
                String msg = flag ? "用户名可用" : "用户名已存在";
                Map<String, Object> map = new HashMap<>();
                map.put("flag", flag);
                map.put("msg", msg);
    
                JsonUtils.writeJsonStr(response, map);
            } catch (Exception e) { 
                e.printStackTrace();
            }
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            doPost(request, response);
        }
    }

UserServiceImpl.java

public class UserServiceImpl implements UserService { 
        private UserDao userDao = new UserDaoImpl();
        @Override
        public boolean checkUsername(String username) throws Exception { 
            return userDao.checkUsername(username) == null;
        }
    }

#### 3.4 JasonUtils - 自定义 ####

/** * json 工具类 */
    public class JsonUtils { 
    
        /** * 将 java 对象转换成 json 字符串 * @param object java对象 * @return json字符串 * @throws Exception */
        public static String toJsonStr(Object object) throws Exception { 
            return new ObjectMapper().writeValueAsString(object);
        }
    
        /** * 将 java 对象转换为 json 字符串，将 json 响应到浏览器 * @param response 响应对象 * @param object java对象 */
        public static void writeJsonStr(HttpServletResponse response, Object object) { 
            response.setContentType("application/json;charset=utf-8");
            try { 
                String jsonStr = toJsonStr(object);
                response.getWriter().write(jsonStr);
            } catch (Exception e) { 
                e.printStackTrace();
            }
        }
    }

[jQuery]: https://www.w3school.com.cn/jquery/jquery_reference.asp
[https_jquery.com_download]: https://jquery.com/download/
[https_code.jquery.com]: https://code.jquery.com/
[https_www.w3school.com.cn_jquery_jquery_ref_selectors.asp]: https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
[https_www.w3school.com.cn_jquery_jquery_ref_events.asp]: https://www.w3school.com.cn/jquery/jquery_ref_events.asp
[https_www.w3school.com.cn_jquery_jquery_ref_traversing.asp]: https://www.w3school.com.cn/jquery/jquery_ref_traversing.asp
[https_www.w3school.com.cn_jquery_jquery_ref_ajax.asp]: https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp