jQuery

jQuery简介

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. 内部封装了js代码 使编程更加简单并且兼容所有的主流浏览器。
  3. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

 

 

 

 

 

 jQuery导入方式

  本地导入

    前往官网jquery.com下载源码之后在HTML文件中导入。

<script src="jQuery.js"></script>

 

    优点在于不会受到网络的影响。

  CDN导入

    前往CDN网站bootcdn获取链接之后加载使用。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<!-- 推荐使用3.4.1版本 -->

 

    优点在于不需要提前下载.

 

jQuery对象

  jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。

    $("#i1").html()的意思是:获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

    相当于: document.getElementById("i1").innerHTML;

  虽然 jQuery对象是包装 DOM对象后产生的,但是 jQuery对象无法使用 DOM对象的任何方法,同理 DOM对象也没不能使用 jQuery里的方法。

  使用jQuery需要有关键字声明。

  jQuery === $

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

 

查找标签

  基本选择器

复制代码
$('#d1')  // id选择器
$('.c1')  // class选择器
$('p')  // 标签选择器
$('div.c1')  // 查找class含有c1的div标签
$("#d1, .c1, p")  // 并列查找
$("x y")    // x的所有后代y(子子孙孙)
$("x > y")    // x的所有儿子y(儿子)
$("x + y")    // 找到所有紧挨在x后面的y
$("x ~ y")    // x之后所有的兄弟y
复制代码

 

    通过变量名来区分指代的是何种对象:

var pEle = ...     // 原生js对象
var $pEle = ...    // jQuery对象

 

  基本筛选器

    

复制代码
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
复制代码

 

    实例:

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

 

  属性选择器

 

[attribute]    // 含有属性
[attribute=value]    // 属性等于
[attribute!=value]    // 属性不等于

 

    实例:

$('[name]')    // 含有name属性
$('[name="tom"]')    // 含有name属性且值为tom
$('input[name="tom"]')    // 含有name属性且值为tom的input标签

 

  表单筛选器

复制代码
:text    // 查找属性值是text的form表单内的标签
:password    // 查找属性值是password的form表单内的标签    
:file    // 查找属性值是file的form表单内的标签
:radio    // 查找属性值是radio的form表单内的标签
:checkbox    // 查找属性值是checkbox的form表单内的标签
// 注意:checkbox会连同option默认的selected一起找到
:submit    // 查找属性值是submit的form表单内的标签
:reset    // 查找属性值是reset的form表单内的标签
:button    // 查找属性值是button的form表单内的标签
复制代码

    实例:

$(":checkbox")  // 找到所有的checkbox

 

筛选器方法

 

复制代码
.next()    // 查找当前元素的下一个同级元素
.nextAll()    // 查找当前元素的后面的全部同级元素
.nextUntil()    // 查找当前元素的后面的直到指定的同级元素
.prev()    // 查找当前元素的上一个同级元素
.prevAll()    // 查找当前元素的前面的全部同级元素
.prevUntil()    // 查找当前元素的前面的直到指定的同级元素
.parent()    // 查找当前元素的父辈元素
.parents()  // 查找当前元素的所有的父辈元素
.parentsUntil()    // 查找当前元素的父辈元素直到指定的父辈元素
.children()   // 查找当前元素的儿子元素
.siblings()   // 查找当前元素的兄弟元素
.find()    // 搜索所有与指定表达式匹配的元素
.filter()  // 从结果集中过滤出有指定样式类的
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
复制代码

 

  实例:

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

$("div").find("p")
$("div").filter(".c1")

 

  js与jQuery查找结果的区别

    使用原生js代码批量查找到标签之后 结果是一个数组

      需要索引取值之后才可以调用标签的一些方法

    使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)

      不需要索引取值 就可以直接调用封装的方法

    两者的转换:

var cEle = document.getElementsByTagName('input')
// 此时cEle是数组
var cEle1 = $(cEle)
// cEle1就是一个jQuery对象
var iEle1 = cEle1[0]
// iEle1就是js原生对象

 

节点操作

  样式操作

addClass();    // 添加指定的CSS类名。
removeClass();    // 移除指定的CSS类名。
hasClass();    // 判断样式存不存在
toggleClass();    // 切换CSS类名,如果有就移除,如果没有就添加。
css('属性名','属性值')  // 修改样式

 

    实例:

$("p").css("color", "red"); //将所有p标签的字体设置为红色

 

  位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

 

    实例:

复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相关示例之返回顶部</title>
  <style>
    .c1 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c2 {
        height: 2000px;
        width: 300px;
        background-color: red;
    }
  </style>
</head>
<body>
<div class="c2"></div>
<button id="b1" class="c1 hide">返回顶部</button>
<script src="jQuery.js"></script>
<script>

  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b1").removeClass("hide");
    }else {
      $("#b1").addClass("hide");
    }
  });
  $("#b1").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>
返回顶部
复制代码

 

  文本操作

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

    上述方法括号内不写参数就是获取值 写参数就是设置值。

    实例:

复制代码
/*
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
*/


// 设置复选框是否选中
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
复制代码

 

  属性操作

    用于ID等或自定义属性:

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

 

    用于checkbox和radio:

prop() // 获取属性
removeProp() // 移除属性

 

    attr全称attribute(属性) 

    prop全称property(属性)

    虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性

    attr适用于属性为静态的情况(不经常修改动态变化的)

    prop适用于动态变化的情况,尤其是选择类标签。

 

  文档处理

    添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

 

    添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

 

    添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

 

    添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

 

    移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

 

    克隆元素

$('id').clone()      // 仅仅克隆标签及其样式、属性
$('id').clone(true)  // clone(true)传递参数true克隆标签还会复制标签绑定的事件

 

事件

  绑定事件的方式

    // 方式1
        jQuery对象.事件名(function(){})
            $('#d1').click(function(){alert(123)})
        // 方式2
        jQuery对象.on('事件名',function(){})
            $('#d1').on('click',function(){alert(123)})

  常用事件

click(function(){...})    //当用户点击某个对象时调用的事件句柄。
hover(function(){...})    // 鼠标移到某元素之上
blur(function(){...})     // 元素失去焦点。
focus(function(){...})    // 元素获得焦点。
change(function(){...})    // 域的内容被改变。
keyup(function(){...})    // 某个键盘按键被松开

 

  阻止后续事件执行

    方式1:return false(推荐)

    方式2:e.preventDefault()

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>
复制代码

 

 

  事件冒泡

    当在点击之后连续触发了多个事件,被称为冒泡。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
    $("span").click(function () {
        alert("span");
        return false;
        // 如果不阻止就会触发三次
    });

    $("p").click(function () {
        alert("p");
        // return false;
        // 在此处阻止则触发两次
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>            
复制代码

 

  文档加载

// 原生js文档加载方式
window.onload = function () {}
// jQuery文档加载方式01
$(document).ready(function () {})
// jQuery文档加载方式02
$(function(){})

 

  事件委托

    事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。

复制代码
// 将body内部所有的点击事件委托给button按钮执行
$('body').on('click','button',function () {
// 创建一个button标签
var btnEle = document.createElement('button')
// 设置内部文本
btnEle.innerText = '点我'
// 将button标签添加到body内部
$('body').append(btnEle)
})
复制代码

 

  动画效果

复制代码
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义(了解即可)
animate(p,[s],[e],[fn])
复制代码

 

posted @   临江沂水  阅读(57)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示