jQuery核心函数

jQuery核心函数
- 简介
- jQuery核心函数
- - 选择器
  - - 基本选择器
    - - 标签选择器
      - id选择器
      - class选择器
      - 通配符选择器
      - 并集选择器
      - 交集选择器
    - 层级选择器
    - - 子代选择器
      - 后代选择器
      - 兄弟选择器
    - 过滤选择器
    - - 基本筛选器
      - 内容筛选器
      - 属性筛选器
      - 可见性筛选器
      - 子元素筛选器
    - 表单选择器
    - - 表单类型选择器
  - 工具
  - - $.each方法
    - $.trim方法
    - $.type方法
    - $.isArray方法
    - $.isFunction方法
  - ajax
  - - $.ajax方法
- jQuery核心对象
- - 属性
  - - 属性
    - - attr()
      - prop()
      - val()
    - 样式
    - - css()
      - addClass()
      - removeClass()
      - hasClass()
      - toggleClass()
      - width()
      - height()
      - innerWidth()
      - innerHeight()
      - outerWidth()
      - outerHeight()
      - 综合演示
    - 位置
    - - offset()
      - position()
  - 操作
  - - DOM内部插入
    - - text()
      - html()
      - append()
      - appendTo()
      - prepend()
      - prependTo()
    - DOM外部插入
    - - after()
      - before()
      - insertAfter()
      - insertBefore()
    - DOM移除
    - - empty()
      - remove()
    - DOM替换
    - - replaceWith()
      - replaceAll()
    - DOM拷贝
    - - clone()
    - DOM遍历
    - - parent()
      - children()
  - 事件
  - - 浏览器事件
    - - resize()
      - scroll()
    - 事件绑定
    - - on()
      - off()
      - delegate()
      - undelegate()
    - 事件对象
    - 表单事件
    - - focus()
      - blur()
      - submit()
    - 鼠标事件
    - - click()
      - dblclick()
      - mousedown()
      - mouseup()
      - mouseenter()
      - mouseleave()
      - hover()
    - 键盘事件
    - - keydown()
      - keyup()
    - 鼠标事件
    - - click()
      - dblclick()
      - mousedown()
      - mouseup()
      - mouseenter()
      - mouseleave()
      - hover()
    - 键盘事件
    - - keydown()
      - keyup()

简介

jQuery最重要的两个部分分别是jQuery核心函数和jQuery核心对象

jQuery核心函数：即$()或jQuery()，$这个工具对象可以在项目任何位置使用，他可以使用css中的选择器来选择元素，亦或更简洁的使用DOM操作等等

jQuery核心对象：即执行jq核心函数返回的对象，jq对象拥有很多的属性和方法，让程序员更方便的操作dom

jQuery核心函数

选择器

基本选择器

标签选择器

将所有div标签背景设置为红色

 <body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script>
    $('div').css('background','red')
</script>
</body>复制

对应的原生js语句

 var divElements = document.querySelectorAll('div');
for (var i = 0; i < divElements.length; i++) {
  divElements[i].style.background = 'red';
}复制

id选择器

将id为d1的标签背景改为红色

 <body>
<div id="d1">div1</div>
<div>div2</div>
<div>div3</div>
<script>
    $('#d1').css('background','red')
</script>
</body>复制

对应的原生js语句

 var d1 = document.querySelector("#d1");
d1.style.background = "red";复制

class选择器

将class为red的标签背景改为红色

 <body>
<div class="red">div1</div>
<div>div2</div>
<div>div3</div>
<p class="red">p1</p>
<script>
    $('.red').css('background','red')
</script>
</body>复制

通配符选择器

将class为content的标签下的所有元素改为红色背景

 <body>
<div class="content">
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</div>
<script>
    $('.content*').css('background','red')
</script>
</body>复制

并集选择器

选择div标签和button标签并将背景改为红色

 <body>
<div>我是段落1</div>
<p>我是段落2</p>
<p>我是段落3</p>
<button>我是按钮</button>
<script>
    $('div,button').css('background','red')
</script>
</body>复制

交集选择器

将class为red的p标签背景改为红色

 <body>
<p class="red">我是段落1</p>
<p class="red">我是段落2</p>
<p class="red">我是段落3</p>
<div class="red">我是div1</div>
<div class="red">我是div2</div>
<div class="red">我是div3</div>
<script>
    $('p.red').css('background','red')
</script>
</body>复制

层级选择器

子代选择器

选择紧随ul下的span子元素，设置其背景为红色

 <body>
<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>
 
<script>
    $('ul>span').css('background','red')
</script>
</body>复制

后代选择器

选择ul下的所有span元素，设置其背景为红色

 <body>
<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>
 
<script>
    $('ul span').css('background','red')
</script>
</body>复制

兄弟选择器

选中id为box的下一个兄弟li，设置其背景为红色

 <body>
<ul>
    <span>我是ul的span1</span>
    <li id="fox">我是fox <span>我是fox的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>
 
<script>
    $('#fox+li').css('background','red')
</script>
</body>复制

过滤选择器

基本筛选器

将表单的奇数行染成红色，eveb表示选取下标为偶数的行，从0开始，odd为选取下标为奇数的行

 <body>
<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>
 
<script>
    $('tr:even').css('background', 'red');
</script>
</body>复制

让表格的第一行的背景变为红色

 $('tr:first').css('background', 'red');复制

让表格的最后一行的背景变为红色

 $('tr:last').css('background', 'red');复制

让下标（从0开始）小于2的行数的背景变为红色:lt

 $('tr:lt(2)').css('background', 'red');复制

让下标（从0开始）大于2的行数的背景变为红色:gt

 $('tr:gt(2)').css('background', 'red');复制

让下标（从0开始）等于(不等于)2的行数的背景变为红色

 $('tr:eq(2)').css('background', 'red');
$('tr:not(tr:eq(2))').css('background', 'red');复制

内容筛选器

让内容为“男”的单元格背景变为红色

 <body>
<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>
<script>
    $('td:contains("男")').css('background', 'red');
</script>
</body>复制

让内容为span标签的单元格的背景变为红色

 <body>
<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td><span>男</span></td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>
<script>
    $('td:has(span)').css('background', 'red');
</script>
</body>复制

让内容为空的单元格的背景变为红色

 $('td:empty').css('background', 'red');复制

让内容不为空的单元格的背景变为红色

 $('td:parent').css('background', 'red');复制

属性筛选器

查找具有hreflang属性值的所有超链接，设置其背景为红色

hreflang：设置链接的目标语言

 <body>
<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
 
<script>
    $('[hreflang]').css('background', 'red');</script>
</body>复制

查找hreflang属性值是(不是)en的标签并改为红色背景

 $('a[hreflang="en"]').css('background', 'red');
$('a[hreflang!="en"]').css('background', 'red');复制

查找hreflang属性值是en或以en开头(结尾时CN或以CN结尾)的标签并改为红色背景

 $('a[hreflang|="en"]').css('background', 'red');
$('a[hreflang$="en"]').css('background', 'red');复制

选择hreflang属性具有包含一个给定的子字符串CN的超链接，设置其背景为红色

 $('a[hreflang*="CN"]').css('background', 'red');复制

选择hreflang属性为zh-CN，title属性为Chinese的超链接，设置其背景为红色

 $('a[hreflang="zh-CN"][title="Chinese"]').css('background', 'red');复制

可见性筛选器

让隐藏的段落显示出来

 <body>
<p style="display: block">我是显示段落</p>
<p style="display: none">我是隐藏段落</p>
 
<script>
    $('p:hidden').css('display', 'block');
</script>
</body>复制

$('p:hidden') ：表示选取所有被隐藏的 <p> 元素

$('p:visible') ：表示选取所有已显示的 <p> 元素

让显示的段落隐藏起来

 $('p:visible').css('display', 'none');复制

子元素筛选器

选择所有父级元素ul下的第一个子元素li，设置其背景为红色

 <body>
<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>
<script>
    $('ul li:first-child').css('background', 'red')
</script>
</body>复制

选择所有父级元素ul下的最后一个子元素li，设置其背景为红色

 $('ul li:last-child').css('background', 'red');复制

选择所有父级元素ul下的第二个子元素li，设置其背景为红色

 $('ul li:nth-child(2)').css('background', 'red');复制

表单选择器

表单类型选择器

选中表单中的文本框、密码框、文件框、按钮、提交按钮、重置按钮等，设置其背景为红色

 <body>
<form>
    <input type="text"><br>
    <input type="password"><br>
    <input type="file"><br>
    <input type="button" value="按钮"><br>
    <input type="submit" value="提交按钮"><br>
    <input type="reset" value="重置按钮"><br>
</form>
 
<script>
    $('input:text').css('background', 'red');
    $('input:password').css('background', 'red');
    $('input:file').css('background', 'red');
    $('input:button').css('background', 'red');
    $('input:submit').css('background', 'red');
    $('input:reset').css('background', 'red');
</script>
</body>复制

选中复选框，然后输出标签信息

 <body>
<form>
    <input type="checkbox">复选框<br>
    <input type="checkbox">复选框2<br>
</form>
 
 
<script>
    console.log($(':checkbox')[0])
    console.log($(':checkbox')[1])
</script>
</body>复制

工具

$.each方法

方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1，其他对象通过其属性名进行迭代，与js中的forEach相同

 var arr = [1, 2, 3, 4, 5];
$.each(arr, function (index, element) {
    console.log(index, element);
});复制

$.trim方法

方法描述：去掉字符串起始和结尾的空格

 var str = '    hello    ';
console.log($.trim(str));复制

$.type方法

方法描述：确定JavaScript 对象的类型

 var str = 'hello';
console.log($.type(str)); // string复制

$.isArray方法

方法描述：用来测试指定对象是否为一个数组。

 var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
console.log($.isArray(arr)); // true复制

$.isFunction方法

方法描述：用来测试指定对象是否为一个函数

 var fun = function () {
    console.log("hello");
};
console.log($.isFunction(fun)); // true复制

ajax

$.ajax方法

方法描述：执行一个异步的HTTP的请求

 $.ajax({
    url: '/user/login',
    type: 'get',
    data: {
        username: 'zhangsan',
        password: '123456'
    },
    dataType: 'text',
    success: function (response) {
        alert(response);
    },
    error: function (response) {
        alert(response);
    }
});复制

jQuery核心对象

属性

attr()

方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

需求描述：设置p标签的id属性为”p2“

 <body>
<p id="p1">我是p标签</p>
<script>
   $('#p1').attr('id','p2')
</script>
</body>复制

输出p2标签的id属性

 $('#p1').attr('id','p2')
console.log($('#p2').attr('id'))复制

prop()

方法描述：专门操作属性值为布尔值的属性，该方法读写一体

需求描述：设置复选框的状态为选中状态

 <body>
<input type="checkbox">复选框
<script>
    $(':checkbox').prop('checked', 'true');
</script>
</body>复制

输出当前复选框状态

 console.log($(':checkbox').prop('checked'))
// true复制

val()

方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

需求描述：设置文本框的值为”123456“

 <body>
<input type="text">
<script>
    $(':text').val('123456');
    console.log($(':text').val()) // 123456
</script>
</body>复制

样式

css()

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性，用法与css选择器基本一致

设置div的背景颜色为红色，字体为白色

 <body>
<div>我是div</div>
<script>
    $('div').css({
        'background': 'red',
        'color': 'white'
    });
</script>
</body>复制

addClass()

方法描述：为每个匹配的元素添加指定的样式类名

将div标签添加一个名为d1的类

 <body>
<div>我是div</div>
<script>
    $('div').addClass("d1")
</script>
</body>复制

removeClass()

方法描述：移除集合中每个匹配元素上一个，多个或全部样式

 <body>
<div class="d1">我是div</div>
<div class="d2">我也是div</div>
<script>
    $('div').removeClass("d1")</script>
</body>复制

hasClass()

方法描述：确定任何一个匹配元素是否有被分配给定的样式类

判断div标签是否包含”d1“的样式

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .d1 {
            font-weight: bold;
            font-size: 18px;
            color: coral;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="d1">我是div</div>
<script>
    console.log($('div').hasClass('d1')); // true
</script>
</body>复制

toggleClass()

方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在

注意：如果存在（不存在）就删除（添加）一个样式类

当单击按钮的时候，隐藏div，再次单击按钮的时候，显示div

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .hide {
            width: 100px;
            height: 100px;
            display: none;
        }
 
    </style>
</head>
<body>
<button>按钮</button>
<div>我是div</div>
<script>
    console.log($('button').click(function (){
        // 点击按钮时将div标签添加名为hide的class
        $('div').toggleClass('hide')
    }))
</script>
</body>复制

width()

方法描述：获取内容元素width的值。

height()

方法描述：获取内容元素height的值。

innerWidth()

方法描述：获取内容元素width+padding的值。

innerHeight()

方法描述：获取内容元素height+padding的值。

outerWidth()

方法描述：outerWidth(false/true)，获取内容元素width+padding+border的值，如果是true再加上margin的值。

outerHeight()

方法描述：outerHeight(false/true)，获取内容元素height+padding+border的值，如果是true再加上margin的值。

综合演示

需求描述：创建按一个div，获取以上六种值

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .box {
            margin: 30px;
            padding: 20px;
            border: 10px;
            width: 100px;
            height: 100px;
            background: coral;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var $box = $('.box');
    console.log($box.width(), $box.height());// 100 100
    console.log($box.innerWidth(), $box.innerHeight());// 140 140
    console.log($box.outerWidth(), $box.outerHeight());// 160 160
    console.log($box.outerWidth(true), $box.outerHeight(true));// 220 220
</script>
</body>复制

位置

offset()

方法描述：相对页面左上角的坐标。

需求描述：获取div相对页面左上角的坐标

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: coral;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var offset = $('.box').offset();
    console.log(offset.left, offset.top); // 输出左偏移量和上偏移量
</script>
</body>复制

position()

方法描述：相对于父元素左上角的坐标。

需求描述：获取div相对于父元素左上角的坐标

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .box-container {
            width: 300px;
            height: 300px;
            background: pink;
            position: absolute;
            left: 20px;
            top: 20px;
        }
 
        .box {
            width: 100px;
            height: 100px;
            background: coral;
            position: absolute;
            left: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
<div class="box-container">
    <div class="box"></div>
</div>
<script>
    var offset = $('.box').position();
    console.log(offset.left, offset.top);
</script>
</body>复制

操作

DOM内部插入

text()

方法描述：设置/获取元素的文本内容，该方法读写合一。

需求描述：设置p段落标签的内容为“我是段落”

 <body>
<p></p>
<script>
    $('p').text('我是段落');
</script>
</body>复制

html()

方法描述：设置/获取元素的html内容，该方法读写合一。

需求描述：设置ul列表标签的li列表项

 <body>
<ul></ul>
<script>
    $('ul').html('<li>你好</li>');
</script>
</body>复制

append()

方法描述：向当前匹配的所有元素内部的最后面插入指定内容。

需求描述：为当前的ul向后添加一个列表项

 <body>
<ul>
    <li>l1</li>
    <li>l2</li>
</ul>
<script>
    $('ul').append('<li>l3</li>');
</script>
</body>复制

appendTo()

方法描述：将指定的内容追加到当前匹配的所有元素的最后面

prepend()

方法描述：向当前匹配的所有元素内部的最前面插入指定内容

prependTo()

方法描述：将指定的内容追加到当前匹配的所有元素的最前面

DOM外部插入

after()

方法描述：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点，而上面说的append则是将心节点插入元素内部，二者有本质区别

需求描述：在div的后边插入一个段落

 <body>
<div>我是div</div>
<script>
    $('div').after('<p>我是p标签</p>');
</script>
</body>复制

before()

方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容

insertAfter()

方法描述：.after()和.insertAfter() 实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。对于 .after()，选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter()，刚好相反，内容在方法前面，它将被放在参数里元素的后面

 <body>
<div>我是div</div>
<script>
    $('<p>我是p标签</p>').insertAfter('div');
</script>
</body>复制

insertBefore()

同理

DOM移除

empty()

方法描述：删除所有匹配元素的子元素。

需求描述：将ul列表下所有的子节点全部移除

 <body>
<ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>
<script>
    $('p').empty();
</script>
</body>复制

remove()

方法描述：删除所有匹配的元素。

注意：同时移除元素上的事件及 jQuery 数据

需求描述：将ul列表下所有的p子节点全部移除

 <ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>
<script>
    $('ul>p').remove();
</script>
</body>复制

DOM替换

replaceWith()

方法介绍：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

需求描述：将ul下的所有li替换为p标签

 <body>
<ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>
<script>
    $('ul>li').replaceWith('<p>我也是段落</p>');
</script>
</body>复制

replaceAll()

方法介绍：.replaceAll()和.replaceWith()功能类似，但是目标和源相反

 $('<p>我也是段落</p>').replaceAll('ul>li')复制

DOM拷贝

clone()

方法描述：创建一个匹配的元素集合的深度拷贝副本。如果传入一个true，则表示是否会复制元素上的事件处理函数，从jQuery 1.4开始，元素数据也会被复制遍历

需求描述：为ul列表创建一个深克隆并追加到body后

 <body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
<script>
    var ul = $('ul').clone('body')
   $('body').append(ul)
</script>
</body>复制

DOM遍历

parent()

方法描述：获取集合中每个匹配元素的父元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出id为two的li的父元素

 <body>
<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>
<script>
    console.log($('#two').parent()[0]);
</script>
</body>复制

children()

方法描述：获取集合中每个匹配元素的子元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出ul下的所有子元素

 <body>
<div>
    <ul>
        <p>我是段落1</p>
        <li>列表项1</li>
        <li id="two">列表项2</li>
        <li>列表项3</li>
        <p>我是段落2</p>
    </ul>
</div>
 
<script>
    var childrens = $('ul').children();
    for (var i = 0; i < childrens.length; i++) {
        console.log(childrens[i]);
    }
</script>
</body>复制

事件

浏览器事件

resize()

方法描述：为 JavaScript 的 “resize” 事件绑定一个处理函数，或者触发元素上的该事件。

需求描述：当浏览器窗口的尺寸改变时，控制台输出“浏览器尺寸改变了”

 $(window).resize(function () {
    console.log('浏览器尺寸改变了');
});复制

scroll()

方法描述：为 JavaScript 的 “scroll” 事件绑定一个处理函数，或者触发元素上的该事件。

需求描述：当浏览器窗口的滚动条滚动时，控制台输出“浏览器滚动条改变了”

 body {
    height: 2000px;
}复制

 $(window).scroll(function () {
    console.log('浏览器滚动条改变了');
});复制

事件绑定

on()

方法描述：在选定的元素上绑定一个或多个事件处理函数。

需求描述：为按钮添加单击事件，当按钮单击的时候，向控制台输出“按钮被单击了”

 <body>
<button>我是按钮</button>
<script>
    $('button').on('click',function () {
        console.log('按钮被单击了');
    });
</script>
</body>复制

off()

方法描述：移除一个事件处理函数

 $('button').on('click',function () {})
 
// 删除已绑定的事件
$('button').off('click');复制

delegate()

方法描述：设置事件委托

需求描述：为ul下的所有li添加单击事件，要求将该单击事件委托给ul，当单击li时，所对应的li背景变为红色

 <body>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>
<script>
    $('ul').delegate('li', 'click', function () {
        this.style.background = 'red';
    });
</script>
</body>复制

undelegate()

方法描述：移除事件委托

 <body>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>
<script>
    $('ul').delegate('li', 'click', function () {
        this.style.background = 'red';
    });
    
    // 移除ul下的事件委托
    $('ul').undelegate('click');
</script>
</body>复制

事件对象

对象属性名称	对象属性描述
event.currentTarget	当前执行的DOM元素
event.target	触发事件的DOM元素
event.pageX	相对于页面的左上角
event.pageY	相对于页面的顶部
event.clientX	相对于视口的左上角
event.clientY	相对于视口的顶部
event.offsetX	相对于事件元素左上角
event.offsetY	相对于事件元素顶部
event.key	键盘的按键信息
event.preventDefault()	阻止事件默认行为
event.stopPropagation()	防止事件向外冒泡

表单事件

focus()

方法描述：当获取焦点时触发所绑定的函数。

需求描述：当文本框获取焦点时，设置其背景为红色

 <body>
<input type="text">
<script>
    $(':text').focus(function () {
        $(this).css('background', 'red');
    });
</script>
</body>复制

blur()

方法描述：当失去焦点时触发所绑定的函数。

需求描述：当文本框获取焦点时，设置其背景为红色，当文本框失去焦点时，设置其背景为绿色

 $(':text').focus(function () {
    $(this).css('background', 'red');
});
$(':text').blur(function () {
    $(this).css('background', 'green');
});复制

submit()

方法描述：当表单提交时触发所绑定的函数。

需求描述：当表单提交的时候，弹出对话框“表单提交了”

 <body>
<form action="#">
    <input type="submit">
</form>
<script>
    $('form').submit(function () {
        alert('表单提交了');
    });
</script>
</body>复制

鼠标事件

click()

方法描述：当鼠标单击时调用所绑定的函数。

需求描述：为按钮绑定一个单击函数，然后点击按钮，在控制台输出“按钮被单击了”

 <body>
    <button>按钮
<script>
    $('button').click(function () {
        console.log('按钮被单击了');
    });
</script>
</body>复制

dblclick()

方法描述：当鼠标双击时调用所绑定的函数

mousedown()

方法描述：当鼠标左键按下的时候调用所绑定的函数

mouseup()

方法描述：当鼠标左键松开的时候调用所绑定的函数

mouseenter()

方法描述：当鼠标进入目标元素的时候调用所绑定的函数

mouseleave()

方法描述：当鼠标离开目标元素的时候调用所绑定的函数

hover()

方法描述：.hover()方法是同时绑定 mouseenter和 mouseleave事件

需求描述：当鼠标进入div设置背景为红色，当鼠标移出div设置背景为绿色，默认背景为绿色

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>
 
</div>
<script>
    $('div').hover(function () {
        $(this).css('background', 'red');
    }, function () {
        $(this).css('background', 'green');
    });
</script>
</body>复制

键盘事件

keydown()

方法描述：当键盘按键按下的时候调用绑定的函数。

需求描述：当键盘按键按下的时候，输出当前的按键

 <body>
<input type="text">
<script>
    $(':text').keydown(function (event) {
        console.log(event.key);
    });
</script>
</body>复制

keyup()

 });复制

```

鼠标事件

click()

方法描述：当鼠标单击时调用所绑定的函数。

需求描述：为按钮绑定一个单击函数，然后点击按钮，在控制台输出“按钮被单击了”

 <body>
    <button>按钮
<script>
    $('button').click(function () {
        console.log('按钮被单击了');
    });
</script>
</body>复制

dblclick()

方法描述：当鼠标双击时调用所绑定的函数

mousedown()

方法描述：当鼠标左键按下的时候调用所绑定的函数

mouseup()

方法描述：当鼠标左键松开的时候调用所绑定的函数

mouseenter()

方法描述：当鼠标进入目标元素的时候调用所绑定的函数

mouseleave()

方法描述：当鼠标离开目标元素的时候调用所绑定的函数

hover()

方法描述：.hover()方法是同时绑定 mouseenter和 mouseleave事件

需求描述：当鼠标进入div设置背景为红色，当鼠标移出div设置背景为绿色，默认背景为绿色

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>
 
</div>
<script>
    $('div').hover(function () {
        $(this).css('background', 'red');
    }, function () {
        $(this).css('background', 'green');
    });
</script>
</body>复制

键盘事件

keydown()

方法描述：当键盘按键按下的时候调用绑定的函数。

需求描述：当键盘按键按下的时候，输出当前的按键

 <body>
<input type="text">
<script>
    $(':text').keydown(function (event) {
        console.log(event.key);
    });
</script>
</body>复制

keyup()

方法描述：当键盘按键松开的时候调用绑定的函数

	<body>
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
	<script>
	$('div').css('background','red')
	</script>
	</body>

	var divElements = document.querySelectorAll('div');
	for (var i = 0; i < divElements.length; i++) {
	divElements[i].style.background = 'red';
	}

	<body>
	<div id="d1">div1</div>
	<div>div2</div>
	<div>div3</div>
	<script>
	$('#d1').css('background','red')
	</script>
	</body>

	var d1 = document.querySelector("#d1");
	d1.style.background = "red";

	<body>
	<div class="red">div1</div>
	<div>div2</div>
	<div>div3</div>
	<p class="red">p1</p>
	<script>
	$('.red').css('background','red')
	</script>
	</body>

	<body>
	<div class="content">
	<p>我是段落1</p>
	<p>我是段落2</p>
	<p>我是段落3</p>
	</div>
	<script>
	$('.content*').css('background','red')
	</script>
	</body>

	<body>
	<div>我是段落1</div>
	<p>我是段落2</p>
	<p>我是段落3</p>
	<button>我是按钮</button>
	<script>
	$('div,button').css('background','red')
	</script>
	</body>

	<body>
	<p class="red">我是段落1</p>
	<p class="red">我是段落2</p>
	<p class="red">我是段落3</p>
	<div class="red">我是div1</div>
	<div class="red">我是div2</div>
	<div class="red">我是div3</div>
	<script>
	$('p.red').css('background','red')
	</script>
	</body>

	<body>
	<ul>
	<span>我是ul的span1</span>
	<li>我是li1 <span>我是li1的span1</span></li>
	<li>我是li2 <span>我是li2的span2</span></li>
	<li>我是li3 <span>我是li3的span3</span></li>
	<span>我是ul的span2</span>
	</ul>

	<script>
	$('ul>span').css('background','red')
	</script>
	</body>

	<body>
	<table cellspacing="0px" cellpadding="10px" border="1px">
	<tr><td>张三</td><td>男</td><td>21</td></tr>
	<tr><td>李四</td><td>女</td><td>22</td></tr>
	<tr><td>王五</td><td>男</td><td>23</td></tr>
	<tr><td>赵六</td><td>女</td><td>24</td></tr>
	</table>

	<script>
	$('tr:even').css('background', 'red');
	</script>
	</body>

	$('tr:eq(2)').css('background', 'red');
	$('tr:not(tr:eq(2))').css('background', 'red');

	<body>
	<table cellspacing="0px" cellpadding="10px" border="1px">
	<tr><td>张三</td><td><span>男</span></td><td>21</td></tr>
	<tr><td>李四</td><td>女</td><td>22</td></tr>
	<tr><td>王五</td><td>男</td><td>23</td></tr>
	<tr><td>赵六</td><td>女</td><td>24</td></tr>
	</table>
	<script>
	$('td:has(span)').css('background', 'red');
	</script>
	</body>

	<body>
	<a href="" hreflang="en">en</a>
	<a href="" hreflang="en-UK">en-UK</a>
	<a href="" hreflang="zh-CN">zh-CN</a>

	<script>
	$('[hreflang]').css('background', 'red');</script>
	</body>

	$('a[hreflang="en"]').css('background', 'red');
	$('a[hreflang!="en"]').css('background', 'red');

	$('a[hreflang\|="en"]').css('background', 'red');
	$('a[hreflang$="en"]').css('background', 'red');

	<body>
	<p style="display: block">我是显示段落</p>
	<p style="display: none">我是隐藏段落</p>

	<script>
	$('p:hidden').css('display', 'block');
	</script>
	</body>

	<body>
	<ul>
	<li>我是列表项1</li>
	<li>我是列表项2</li>
	<li>我是列表项3</li>
	<li>我是列表项4</li>
	</ul>
	<script>
	$('ul li:first-child').css('background', 'red')
	</script>
	</body>

	<body>
	<form>
	<input type="text"><br>
	<input type="password"><br>
	<input type="file"><br>
	<input type="button" value="按钮"><br>
	<input type="submit" value="提交按钮"><br>
	<input type="reset" value="重置按钮"><br>
	</form>

	<script>
	$('input:text').css('background', 'red');
	$('input:password').css('background', 'red');
	$('input:file').css('background', 'red');
	$('input:button').css('background', 'red');
	$('input:submit').css('background', 'red');
	$('input:reset').css('background', 'red');
	</script>
	</body>

	<body>
	<form>
	<input type="checkbox">复选框<br>
	<input type="checkbox">复选框2<br>
	</form>


	<script>
	console.log($(':checkbox')[0])
	console.log($(':checkbox')[1])
	</script>
	</body>

	var arr = [1, 2, 3, 4, 5];
	$.each(arr, function (index, element) {
	console.log(index, element);
	});

jQuery核心函数

jQuery核心函数

目录

简介

jQuery核心函数

选择器

基本选择器

标签选择器

id选择器

class选择器

通配符选择器

并集选择器

交集选择器

层级选择器

子代选择器

后代选择器

兄弟选择器

过滤选择器

基本筛选器

内容筛选器

属性筛选器

可见性筛选器

子元素筛选器

表单选择器

表单类型选择器

工具

$.each方法

$.trim方法

$.type方法

$.isArray方法

$.isFunction方法

ajax

$.ajax方法

jQuery核心对象

属性

属性

attr()

prop()

val()

样式

css()

addClass()

removeClass()

hasClass()

toggleClass()

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

综合演示

位置

offset()

position()

操作

DOM内部插入

text()

html()

append()

appendTo()

prepend()

prependTo()

DOM外部插入

after()

before()

insertAfter()

insertBefore()

DOM移除

empty()

remove()

DOM替换

replaceWith()

replaceAll()

DOM拷贝

clone()

DOM遍历

parent()

children()

事件

	var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
	console.log($.isArray(arr)); // true

	var fun = function () {
	console.log("hello");
	};
	console.log($.isFunction(fun)); // true

	$.ajax({
	url: '/user/login',
	type: 'get',
	data: {
	username: 'zhangsan',
	password: '123456'
	},
	dataType: 'text',
	success: function (response) {
	alert(response);
	},
	error: function (response) {
	alert(response);
	}
	});

	<body>
	<p id="p1">我是p标签</p>
	<script>
	$('#p1').attr('id','p2')
	</script>
	</body>

	<body>
	<input type="checkbox">复选框
	<script>
	$(':checkbox').prop('checked', 'true');
	</script>
	</body>

	<body>
	<input type="text">
	<script>
	$(':text').val('123456');
	console.log($(':text').val()) // 123456
	</script>
	</body>

	<body>
	<div>我是div</div>
	<script>
	$('div').css({
	'background': 'red',
	'color': 'white'
	});
	</script>
	</body>

	<body>
	<div class="d1">我是div</div>
	<div class="d2">我也是div</div>
	<script>
	$('div').removeClass("d1")</script>
	</body>

	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<style>
	.d1 {
	font-weight: bold;
	font-size: 18px;
	color: coral;
	background-color: red;
	}
	</style>
	</head>
	<body>
	<div class="d1">我是div</div>
	<script>
	console.log($('div').hasClass('d1')); // true
	</script>
	</body>

	<body>
	<p></p>
	<script>
	$('p').text('我是段落');
	</script>
	</body>