jQuery核心函数

最新推荐文章于 2024-05-24 23:45:01 发布
最新推荐文章于 2024-05-24 23:45:01 发布
阅读量880 收藏 24
点赞数 22
分类专栏： 前端 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AZURE060606/article/details/136246108
版权

jQuery核心函数

目录

简介

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';
}

image-20240222233303073

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";

image-20240222233451071

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>

image-20240222234227539

通配符选择器

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

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

image-20240222234542978

并集选择器

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

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

image-20240222234748929

交集选择器

将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>

image-20240222234909993

层级选择器
子代选择器

选择紧随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>

image-20240223000610048

后代选择器

选择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>

image-20240222235908194

兄弟选择器

选中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>

image-20240223000747892

过滤选择器
基本筛选器

将表单的奇数行染成红色，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>

image-20240223003554552

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

$('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>

image-20240223004608727

让内容为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>

image-20240223004516213

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

$('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>

image-20240223005656477

查找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> 元素

image-20240223010403492

让显示的段落隐藏起来

$('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>

image-20240223010558363

选择所有父级元素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>

image-20240223010937992

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

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


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

image-20240223012504834

工具

$.each方法

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

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

image-20240223013142328

$.trim方法

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

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

image-20240223013254750

$.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>

image-20240223015400727

输出p2标签的id属性

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

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

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

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

image-20240223015709433

输出当前复选框状态

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>

image-20240223020153158

addClass()

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

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

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

image-20240223020615433

removeClass()

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

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

image-20240223020804227

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>

image-20240223021903177

位置
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>

image-20240223022225558

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>

image-20240223022409955

操作

DOM内部插入
text()

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

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

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

image-20240223022621582

html()

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

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

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

image-20240223022932368

append()

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

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

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

image-20240223023103177

image-20240223023806193

appendTo()

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

prepend()

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

prependTo()

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

DOM外部插入
after()

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

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

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

image-20240223023555591

image-20240223023913558

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>

image-20240223024207651

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>

image-20240223024530177

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>

image-20240223024929418

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>

image-20240223025339613

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>

image-20240223025456966

事件

浏览器事件
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()

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

Az_plus
关注
  • 22
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈Jquery核心函数
10-24
本文给大家简单介绍了jQuery的核心函数，以及详细介绍了7种重载方法中的3种，十分的实用，有需要的小伙伴可以参考下。
jQuery 核心函数
dengjuanshou7445的博客
08-17 91
函数描述 jQuery() 接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器。 jQuery.noConflict() 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库。 转载于:https://www.cnblogs.com/borter/p/9495569.html...
jQuery核心函数和对象
weixin_43041350的博客
07-27 66
jQuery核心函数和对象 核心函数： $() 这样就能调用核心函数 接收函数 $(function(){ alert(“hi”); }); 接收一个字符串片段 var $p =$("<p>段落<p>"); 返回一个jQuery对象，对象中保存了创建的DOM元素 接收一个字符串选择器 <div class="box1"></div> <div id="box2"></div> var $box1 = $(".bo1");
jquery核心函数
何小变
06-29 84
$()的参数 $():表示调用jQuery的核心函数 （1）接收一个函数 $(function(){}) （2）接收一个字符串 接收字符串选择器 $('div') <div>哈哈哈</div> 接收一个代码片段 $('<p>急急急</p>') //将在dom树上创建结点p,通过append方法挂载到父元素上 （3）接收一个DOM元素 将DOM元素转换为jQuery对象 ...
Jquery核心函数
a0103122120的博客
06-05 132
在Jquery中，所有的DOM对象都将封装成Jquery对象，而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作。 所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数，就是Jquery核心函数jquery(),也称为工厂函数。 jquery核心函数有7个重载，分别如下： jquery() 该函数返回一个...
JQuery核心函数$
weixin_51351637的博客
07-30 246
JavaScript和查询（Query），辅助JavaScript开发的js类库writeless，domore（写的更少，做的更多），实现了很多浏览器兼容的问题免费开源，让开发更便捷，例如操作文档对象，选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。...
jQuery核心函数-核心对象
一李
12-21 186
jQuery 查 优秀的Js函数库 链式调用 读写合一 jQuery核心函数 jQuery核心对象 <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script> //绑定文档加载监听 $...
jQuery核心函数，jQuery对象（学习笔记2）
幼儿园园长
01-29 212
一、什么是jQuery核心函数 jQuery()函数是jQuery库的最核心函数，jQuery的一切都是基于此函数的。该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便于使用jQuery对象提供的其他属性和方法对DOM元素进行操作。 jQuery()函数的功能非常强大，它可以将各种类型的参数智能地封装为jQuery对象。 $() 就代表调用jQuery的核心函数 二、jQue...
jQuery核心函数详解（JavaScript基础）
辰兮要努力
03-09 1195
【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！ 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步! 吾等采石之人，应怀大教堂之心，愿你们奔赴在各自的热爱中… 文章目录一、文章序言二、实践案例 一、文章序言 最近一段时间会陆续整理前端相关的基础知识，分享给初学者，愿共同进步，感兴趣的可以参考：.
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制——jQuery
weixin_70320000的博客
11-29 3194
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制
jQuery 核心函数以及jQuery对象
10-29
首先介绍 jQuery 的几个核心函数，在 jQuery 中它们起着至关重要的作用，在实际的前端开发过程中用到最多的也是它们。
JQuery核心函数是什么及使用方法介绍
10-22
主要为大家详细介绍了JQuery核心函数是什么，及使用方法介绍，感兴趣的小伙伴们可以参考一下
vue源码之mustache模板引擎1
qweasl_的博客
05-21 462
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1328
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 566
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
最新发布
2301_79969279的博客
05-24 1091
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 1148
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 540
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
jQuery代码解读
11-14
jQuery是一个非常流行的JavaScript库，它简化了JavaScript的编写，并提供了许多实用的功能。以下是一些解读jQuery代码的方法和技巧： 1.了解jQuery的基本结构：jQuery的核心代码包含在一个立即执行函数表达式(IIFE)中，该函数将window对象作为参数传递，并返回一个jQuery对象。这个jQuery对象是一个包含许多实用方法和属性的对象，可以用来操作DOM元素、处理事件、发送AJAX请求等。 2.阅读jQuery的文档：jQuery有非常详细的文档，可以在官方网站上找到。文档中包含了所有的API方法和属性，以及示例代码和解释。阅读文档可以帮助你更好地理解jQuery的工作原理和用法。 3.了解jQuery的选择器：jQuery的选择器是其最强大的功能之一，它可以让你轻松地选择DOM元素并对其进行操作。了解jQuery的选择器语法和用法可以帮助你更好地理解代码。 4.了解jQuery的链式调用：jQuery的方法通常可以链式调用，这意味着你可以在同一个jQuery对象上调用多个方法。这种方法可以使代码更加简洁和易于阅读。 5.了解jQuery的事件处理：jQuery提供了一种简单的方式来处理DOM事件，可以使用on()方法来绑定事件处理程序。这种方法可以使代码更加简洁和易于维护。 以下是一个使用jQuery的例子，它将在页面加载时隐藏一个元素，并在按钮点击时显示它： ```javascript $(document).ready(function() { $('#myElement').hide(); $('#myButton').click(function() { $('#myElement').show(); }); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值