二刷jQuery(以尚硅谷入门)

2022-03-02 21:33:24 阅读：159 来源： 互联网

1.jQuery的使用

1.使用jQuery在线cdn文件jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。https://www.bootcdn.cn/jquery/

2.下载jQuery官方文档，有.js和.min.js两种版本

2.jQuery的两把利器

jquery在编写时，底层代码可简单地抽象成以下代码，由此可以看出，最终暴露出的$和jQuery本质上都是jquery函数，而它的返回值是一个对象

(function (window) {
    var jQuery = function () {
      return new xxx()
    }

    window.$ = window.jQuery = jQuery
  })(window)

3.jQuery核心函数

* 当成一般函数使用人: $(param)
* param是function: 参数为函数 : 当DOM加载完成后，执行此回调函数，相当于window.onload = function(文档加载完成的监听)，有区别，后面会解释，面试题之一
* param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
* param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
* param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回

  /*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
  //1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数
  $(function () { // 绑定文档加载完成的监听
    // 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
    $('#btn').click(function () { // 绑定点击事件监听
      // this是什么? 发生事件的dom元素(<button>)
      // alert(this.innerHTML)
      // 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
      alert($(this).html())
      // 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
      $('<input type="text" name="msg3"/><br/>').appendTo('div')
    })
  })

A.appendto(B)，把A追加到B后边

4.jQuery对象

<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象

/*
1. 伪数组
* Object对象
* length属性
* 数值下标属性
* 没有数组特别的方法: forEach(), push(), pop(), splice()
*/

console.log($buttons instanceof Array) // false

2. 基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标
-->

5.基本选择器

* 基本
      * #id
      * tagName/*
      * .class
      * selector1,selector2,selector3: 并集
      * selector1selector2selector3: 交集

6.层次选择器

<!--
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. ancestor descendant
  在给定的祖先元素下匹配所有的后代元素
2. parent>child
  在给定的父元素下匹配所有的子元素
3. prev+next
  匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings
  匹配 prev 元素之后的所有 siblings 元素
-->

7.过滤选择器

* 过滤
      * 在原有匹配元素中筛选出其中一些
      * :first
      * :last
      * :eq(index)
      * :lt
      * :gt
      * :odd
      * :even
      * :not(selector)
      * :hidden
      * :visible
      * [attrName]
        //7. 选择有title属性的li元素
        // $('li[title]').css('background', 'red')
      * [attrName=value]
        //8. 选择所有属性title为hello的li元素
         $('li[title="hello"]').css('background', 'red')

8.表单过滤器

* 表单
      * :input
      * :text
      * :checkbox
      * :radio
      * :checked: 选中的

9.工具方法

<!--
1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
-->

$.each

//1. $.each(): 遍历数组或对象中的数据
  var obj = {
    name: 'Tom',
    setName: function (name) {
      this.name = name
    }
  }
  $.each(obj, function (key, value) {
    console.log(key, value)
  })

json与js互转

/*
  JSON.parse(jsonString)   json字符串--->js对象/数组
  JSON.stringify(jsObj/jsArr)  js对象/数组--->json字符串
  */

10.属性

* 操作标签的属性, 标签体文本
* attr(name) / attr(name, value): 读写非布尔值的标签属性
* prop(name) / prop(name, value): 读写布尔值的标签属性
* removeAttr(name)/removeProp(name): 删除属性
* addClass(classValue): 添加class
* removeClass(classValue): 移除指定class
* val() / val(value): 读写标签的value
* html() / html(htmlString): 读写标签体文本

标签：jQuery,name,DOM,对象,标签,元素,二刷,以尚
来源： https://blog.csdn.net/qq_52438590/article/details/123239994

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

二刷jQuery(以尚硅谷入门)