jQuery基础

2022-10-30  本文已影响0人  t遇见

一、认识jQuery

jQuery就是一个JavaScript函数库

内部包含了大量的封装好的、可以直接调用的 JS函数

官方网站：

网址：https://www.jquery.com
下载历史版本：下载页面中下拉页面到最底部，可以看到这个链接记录

image.png
下载对应的版本文件
image.png
二、页面加载事件
JavaScript中提供了一个window.onload等待页面DOM元素和静态资源加载完成后再去执行事件中的代码，保障代码执行时可以访问页面中的所有数据
jQuery中提供了一个document.ready()等待页面DOM元素加载完成后执行回调函数内部的代码，保障代码执行时可以访问页面中的所有DOM元素 
// 完整语法，编写过程过于繁琐
$(document).ready(function() {
  // 等待页面DOM加载完成后执行的代码
})
// jQuery进行了页面加载方式简化
// jQuery提供了/封装了一个jQuery()函数
jQuery(function() {
  // 等待页面加载后执行的代码
})
// 【推荐的最终语法】
// jQuery再次进行封装，将jQuery()封装成了$()
// jQuery = $
$(function() {
  // 等待页面DOM结构加载完成后执行代码
})

三、标签选择器
jQuery提供了一个选择器语法，可以快捷的根据css选择器选择页面中需要的标签

// 选择并获取到的标签对象：jQuery对象
$("css选择器")

(1） 认识jQuery对象

// 1、认识jQuery对象
// JS语法，选择标签
const _ct = document.querySelector("#container")
// JS选择器：标签对象、DOM对象
console.log('_ct', _ct)
// jQ语法，选择标签
const $ct = $("#container")
// JQ选择器：jQuery对象，是一个类似数组的集合
console.log('$ct', $ct)
// JS对象-> jQ对象：JS对象转换后就可以使用jQuery的函数
const jqObj = $(_ct)
console.log(jqObj)
// jQ对象-> js对象
const jsObj = $ct.get(0)
console.log(jsObj)

（2） 常见选择器
官方文档：https://jquery.cuishifeng.cn/

image.png 

<body>
  <div id="container">
    <h3>琵琶行 <small>白居易</small></h3>
    <p class="impt">浔阳江头夜送客，枫叶荻花秋瑟瑟。</p>
    <p>主人下马客在船，举酒欲饮无管弦。</p>
    <p>醉不成欢惨将别，别时茫茫江浸月。</p>
    <p>忽闻水上琵琶声，主人忘归客不发。</p>
    <p>寻声暗问弹者谁，琵琶声停欲语迟。</p>
    <p>移船相近邀相见，添酒回灯重开宴。</p>
    <p class="impt">千呼万唤始出来，犹抱琵琶半遮面。</p>
    <p>转轴拨弦三两声，未成曲调先有情。</p>
    <p>弦弦掩抑声声思，似诉平生不得志。 </p>
    <div>
      <p>低眉信手续续弹，说尽心中无限事</p>
    </div>
    <hr>
    <button id="btn1">id选择器</button>
    <button id="btn2">class选择器</button>
    <button id="btn3">标签选择器</button>
    <button id="btn4">包含选择器</button>
    <button id="btn5">子类选择器</button>
    <button id="btn6">伪类选择器</button>
  </div>
  <script src="./js/jquery-2.2.4.js"></script>
  <script>
    $("#btn1").click(function () {
      // id选择器
      const $ct = $("#container")
      $ct.css("border", "solid 1px red")
    })
    $("#btn2").click(function () {
      // class选择器
      const $ps = $(".impt")
      $ps.css("background-color", "pink")
    })
    $("#btn3").click(function () {
      // 标签选择器
      const $p = $("p")
      $p.css("border-bottom", "orangered 2px solid")
    })
    $("#btn4").click(function () {
      // 包含选择器
      const $ps = $("#container p")
      $ps.css("border-bottom", "pink 5px solid")
    })
    $("#btn5").click(function () {
      // 子类选择器
      const $ps = $("#container > p")
      $ps.css("border-bottom", "green solid 2px")
    })
    $("#btn6").click(function () {
      // 伪类选择器
      const $p = $("#container > p:nth-of-type(1)")
      $p.css("border-bottom", "solid 2px red")
    })
    // 其他选择器，请移步官方文档...
  </script>
</body>

四、jQuery动画
jQuery针对网页中的常见的动画效果进行了封装

/ 当用户点击了id="box"的标签时，执行传递给click()处理单击事件的回调函数
$("#box").click(回调函数)
// $("#box")  选择器，选择了页面中id="box"的标签
// click()    处理单击事件的函数，jQuery是JS函数库，所有的操作都是函数式开发
// click(回调函数)   当单击事件发生了之后，调用回调函数
$("#box").click(function() {
  // 处理单击事件发生后的操作
})

② 常用绑定函数

遵循JavaScript中处理方式！对原生JS的处理进行了扩展

  • 阻止冒泡：event.stopPropagation()

  • 阻止默认行为：event.preventDefault()

六、BOM/DOM
（1） BOM
BOM操作，依然使用原生JavaScript中的内建对象进行操作

jQuery中可以将DOM对象转还成jQuery对象进行操作

console.log(window, "BOM对象")
console.log($(window), "jQuery对象,支持使用jQuery提供的功能函数")

（2） DOM
DOM操作都是对网页文档中标签对象的增删改查

① 查询DOM节点

语法 描述
$(css选择器) jQuery选择器

② 新增DOM节点

语法 描述
$("<标签名称>") 创建一个节点<br />如：$("<div>")
$box.append($new) 将$new节点，追加到$box的子节点的末尾[记]
$new.appendTo($box) 将$new节点，追加到$box的子节点的末尾
$box.prepend($new) 将$new节点，插入到$box的第一个子节点位置[记]
$new.prependTo($box) 将$new节点，插入到$box的第一个子节点位置
$ex1.after($ex2) 将$ex2添加到$ex1的后面（同级/兄弟节点）[记]
$ex1.before($ex2) 将$ex2添加到$ex1的前面[记]
$ex2.insertAfter($ex1) 将$ex2添加到$ex1的后面（同级/兄弟节点）
$ex2.insertBefore($ex1) 将$ex2添加到$ex1的前面

③ 查询节点

语法 描述
$ps.eq(index) 获取索引位置的jQuery对象
$ps.get(index) 获取索引位置的JS对象
$ps.first() 获取第一个匹配的jQuery对象
$ps.last() 获取最后一个匹配的jQuery对象
$ps.children() 获取子节点
$ps.parents() 获取所有父节点
$ps.parent() 获取唯一的直接父节点
$ps.next() 获取下一个兄弟节点
$ps.nextAll() 获取后面所有兄弟节点
$ps.prev() 获取上一个兄弟节点
$ps.prevAll(0) 获取前面所有的兄弟节点

④ 删除节点

语法 描述
$box.remove() 删除当前节点
$box.empty() 删除$box中所有的子节点

（3） DOM 属性

语法 描述
$box.attr(name, value) 给名称为name的属性设置value值[记]
$box.attr(name) 获取名称为name的属性值[记]
$box.removeAttr(name) 删除名称为name的属性值[记]
$box.prop(name, value) 给名称为name的属性设置value值
$box.prop(name) 获取名称为name的属性值
$box.removeAttr(name) 删除名称为name的属性值

（4） DOM样式

语法 描述
$box.css(key, value) 给名称为key的样式设置value值
$box.css({k1:v1, k2:v2...}) 给$box同时设置多个样式
$box.css(key) 获取$box中名称为key的样式

（5） DOM内容

语法 描述
$box.text(内容) 设置文本内容
$box.text() 获取文本内容
$box.html(内容) 设置富文本内容
$box.html() 获取父文本内容

（6） class样式处理

语法 描述
$box.addClass(cname) 给$box添加一个类名称
$box.removeClass(cname) 删除$box上的一个类名称
$box.toggleClass(cname) TODO
上一篇 下一篇

猜你喜欢

热点阅读