二刷jQuery(以尚硅谷入门)

目录

1.jQuery的使用

2.jQuery的两把利器

3.jQuery核心函数

4.jQuery对象

5.基本选择器

6.层次选择器

7.过滤选择器

8.表单过滤器

 9.工具方法

10.属性

---

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的两把利器

<!--
1. jQuery核心函数
  * 简称: jQuery函数($/jQuery)
  * jQuery库向外直接暴露的就是$/jQuery
  * 引入jQuery库后, 直接使用$即可
    * 当函数用: $(xxx)
    * 当对象用: $.xxx()
2. jQuery核心对象
  * 简称: jQuery对象
  * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
  * 使用jQuery对象: $obj.xxx()
-->

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): 读写标签体文本