jQuery基础

最新推荐文章于 2024-04-27 18:00:34 发布
最新推荐文章于 2024-04-27 18:00:34 发布
阅读量641 收藏 10
点赞数 1
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51445423/article/details/131687458
版权

文章目录

一、jQuery简介

jQuery版本介绍

  • 1.X(兼容老版本IE，文件较大)
  • 2.x(部分IE8及以下版本不支持)
  • 3.x(完全不支持IE8及以下版本，提供了新的API，提供了不包含AJAX/动画API的版本)

jQUery版本下载地址

CDN引入：

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

本地引入：

<head>
    <script src="jquery-1.9.1.min.js"></script>
</head>

jQuery快速使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function () {
        // 请将jQuery代码书写在这里 ...
        alert('Hello,World!');
    });
</script>
</body>
</html>

jQuery两把利器

  • jQuery核心函数：$()或jQuery(),jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
  • jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

二、jQuery核心函数

jQuery选择器

  • 标签选择器
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<script>
	$('div').css('background', 'red');
</script>
  • id选择器
<button>按钮1</button>
<button id="btn">按钮2</button>
<button>按钮3</button>
<script>
	$('#btn').css('background', 'red');
</script>
  • class选择器
<p class="red">我是段落1</p>
<p>我是段落2</p>
<p class="red">我是段落3</p>
<scrpit>
	$('.red').css('background', 'red');
</scrpit>
  • 通配符选择器
<div class="content">
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</div>
<script>
    //选择页面中class为content的div下所有元素，设置其背景为红色
	$('.content *').css('background', 'red');
</script>
  • 并集选择器
<p>我是段落</p>
<button>我是按钮</button>
<div>我是div</div>
<h1>我是大标题</h1>
<script>
    //选择页面中所有的段落与按钮，设置其背景为红色
	$('p,button').css('background', 'red');
</script>
  • 交集选择器
<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>
    //选择页面中所有class为red的段落，设置其背景为红色
	$('p.red').css('background', 'red');
</script>
  • 子代选择器
<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子元素，设置其背景为红色
	$('ul>span').css('background', 'red');
</script>
  • 后代选择器
<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元素，设置其背景为红色
	$('ul span').css('background', 'red');
</script>
  • 兄弟选择器
<ul>
    <span>我是ul的span1</span>
    <li id="box">我是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>
    //选中id为box的下一个兄弟li，设置其背景为红色
	$('#box+li').css('background', 'red');
    //选中id为box的后边的兄弟li，设置其背景为红色
    $('#box~li').css('background', 'red');
</script>
  • 过滤选择器
<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>
    //实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行,:odd代表选取下标为奇数的行
	$('tr:even').css('background', 'red');
    //实现让表格的最后一行的背景变为红色
    $('tr:last').css('background', 'red');
	//实现让下标（从0开始）小于2的行数的背景变为红色
    $('tr:lt(2)').css('background', 'red');
	//实现让下标（从0开始）大于2的行数的背景变为红色
    $('tr:gt(2)').css('background', 'red');
	//实现让下标（从0开始）等于2的行数的背景变为红色
    $('tr:eq(2)').css('background', 'red');
	//实现让下标（从0开始）不等于2的行数的背景变为红色
    $('tr:not(tr:eq(2))').css('background', 'red');
</script>
  • 内容筛选器
<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');
    //实现让内容为span标签的单元格的背景变为红色
    $('td:has(span)').css('background', 'red');
    //实现让内容为空的单元格的背景变为红色
    $('td:empty').css('background', 'red');
	//实现让内容不为空的单元格的背景变为红色
    $('td:parent').css('background', 'red');
</script>
  • 属性筛选器
<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
<script>
	//查找herflang属性的标签元素，设置其背景为红色
    $('[hreflang]').css('background', 'red');
    //查找hreflang属性值是en的所有超链接，设置其背景为红色
    $('a[hreflang="en"]').css('background', 'red');
	//查找hreflang属性值不是en的所有超链接，设置其背景为红色
    $('a[hreflang!="en"]').css('background', 'red');
    //查找hreflang属性值是en或者以en开头的所有超链接，设置其背景为红色
    $('a[hreflang|="en"]').css('background', 'red');
	//或者
	$('a[hreflang^="en"]').css('background', 'red');
	//查找hreflang属性值是以给定值CN结尾的元素，设置其背景为红色
    $('a[hreflang$="CN"]').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');
</script>
  • 可见性筛选器
<p style="display: block">我是显示段落</p>
<p style="display: none">我是隐藏段落</p>
<script>
	//让隐藏的段落显示出来
    $('p:hidden').css('display', 'block');
	//让显示的段落隐藏起来
    $('p:visible').css('display', 'none');
</script>
  • 子元素筛选器
<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>
<script>
	//选择所有父级元素ul下的第一个子元素li，设置其背景为红色
    $('ul li:first-child').css('background', 'red');
	//选择所有父级元素ul下的最后一个子元素li，设置其背景为红色
    $('ul li:last-child').css('background', 'red');
	//选择所有父级元素ul下的第二个子元素li，设置其背景为红色
    $('ul li:nth-child(2)').css('background', 'red');
</script>
  • 表单选择器
<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');
	//选中复选框、单选框，然后输出标签信息
    console.log($(':checkbox')[0]);
	console.log($(':radio')[0]);
</script>
  • 表单状态选择器
<form>
    <input type="text" autofocus><br>
    <input type="checkbox" checked>复选框<br>
    <input type="radio" disabled>单选框<br>
    <select>
        <option selected>列表项1</option>
        <option>列表项2</option>
    </select>
</form>
<script>
	//输出表单获取焦点、表单选中、表单禁用、表单列表项选中的状态所在的标签信息
    console.log($(':focus')[0]);
    console.log($(':checked')[0]);
    console.log($(':disabled')[0]);
    console.log($(':selected')[0]);
</script>

jQUery工具

  • $.each方法

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

//给定一个数组，使用$.each方法进行遍历输出
var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
$.each(arr, function (index, element) {
    console.log(index, element);
});

//给定一个对象，使用$.each方法进行遍历输出
var obj = {
    name: 'Tom',
    age: 28,
    speak: function () {}
};
$.each(obj, function (key, value) {
    console.log(key, value);
});
  • $.trim方法

去掉字符串起始和结尾的空格

var str = '    hello    ';
console.log($.trim(str));//hello
  • $.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的请求。

//执行一个异步的HTTP GET请求，从服务器加载数据。
$.ajax({
    url: '/user/login',
    type: 'get',
    data: {
        username: 'zhangsan',
        password: '123456'
    },
    dataType: 'text',
    success: function (response) {
        alert(response);
    },
    error: function (response) {
        alert(response);
    }
});

//执行一个异步的HTTP POST请求，从服务器加载数据。
$.ajax({
    url: '/user/login',
    type: 'post',
    data: {
        username: 'zhangsan',
        password: '123456'
    },
    dataType: 'text',
    success: function (response) {
        alert(response);
    },
    error: function (response) {
        alert(response);
    }
});
  • $.get方法

使用一个HTTP GET请求从服务器加载数据。

$.get('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {
    alert(response);
});
  • $.post方法
$.post('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {
    alert(response);
});

三、jQuery核心对象

属性

  • attr()

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

<p id="content" title="我是段落标题">我是段落</p>
<script>
	//设置p标签的title属性为”我是attr修改后的段落标题“
    $('#content').attr('title', '我是attr修改后的段落标题');
    
    //读取p标签的title属性并输出
    console.log($('#content').attr('title'));
</script>
  • prop()

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

<input type="checkbox">复选框
<script>
	//设置复选框的状态为选中状态
    $(':checkbox').prop('checked', 'true');
	
    //读取复选框的选中状态并输出
    console.log($(':checkbox').prop('checked'));
</script>
  • val()

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

<input type="text">
<script>
    //设置文本框的值为”123456“
	$(':text').val('123456');
    
    //读取文本框的值并输出
    console.log($(':text').val());
</script>

样式

  • css()
<div>我是div</div>
<script>
	//设置div的背景颜色为红色，字体颜色为白色
    $('div').css({
    'background': 'red',
    'color': 'white'
});

    //获取div的背景颜色和字体颜色并输出
    console.log($('div').css('background'));
	console.log($('div').css('color'));
</script>
  • addClass()

为每个匹配的元素添加指定的样式类名。

<style>
	.beauty {
    font-weight: bold;
    font-size: 18px;
    color: coral;
}
</style>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>
<script>
    //为所有的li添加样式”beauty“
	$('li').addClass('beauty');
</script>
  • removeClass()

移除集合中每个匹配元素上一个，多个或全部样式。

<style>
	.beauty {
    font-weight: bold;
    font-size: 18px;
    color: coral;
}
</style>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>
<script>
    //为所有的li移除样式”beauty“
	$('li').removeClass('beauty');
</script>
  • hasClass()

确定任何一个匹配元素是否有被分配给定的样式类。

<style>
	.beauty {
    font-weight: bold;
    font-size: 18px;
    color: coral;
}
</style>
<p class="beauty"></p>
<script>
	//判断p标签是否包含”beauty“的样式
    console.log($('p').hasClass('beauty'));
</script>
  • toggleClass()

为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在。如果存在（不存在）就删除（添加）一个样式类.

<style>
	.hide {
    width: 100px;
    height: 100px;
    display: none;
}
</style>
<button>按钮</button>
<div>我是div</div>
<script>
    //当单击按钮的时候，隐藏div，再次单击按钮的时候，显示div
	$('button').click(function () {
    $('div').toggleClass('hide');
});
</script>
  • 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的值。

<style>
	.box {
    margin: 30px;
    padding: 20px;
    border: 10px;
    width: 100px;
    height: 100px;
    background: coral;
}
</style>
<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>
  • offset()

相对页面左上角的坐标

<style>
	.box {
    width: 100px;
    height: 100px;
    background: coral;
}
</style>
<div class="box"></div>
<script>
    //获取div相对页面左上角的坐标
	var offset = $('.box').offset();
	console.log(offset.left, offset.top);//8 8
</script>
  • position()

相对于父元素左上角的坐标

<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>
<div class="box-container">
    <div class="box"></div>
</div>
<script>
    //获取div相对于父元素左上角的坐标
	var offset = $('.box').position();
	console.log(offset.left, offset.top);//20 20
</script>
  • scrollLeft()

读取/设置滚动条的X坐标，该方法读写合一。

//读取页面滚动条的Y坐标(兼容chrome和IE)
var scrollLeft = $(document.body).scrollLeft()+$(document.documentElement).scrollLeft();

//设置页面滚动条滚动到指定位置(兼容chrome和IE)
$('body,html').scrollLeft(60);

//设置页面的宽度为2000px，设置滚动条的X轴坐标为300px，要求兼容各种浏览器
$('body').css('width', '2000px');
$('html,body').scrollLeft(300);
  • scrollTop()

读取/设置滚动条的Y坐标，该方法读写合一。

//读取页面滚动条的Y坐标(兼容chrome和IE)
var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();

//设置页面滚动条滚动到指定位置(兼容chrome和IE)
$('body,html').scrollTop(60);

//设置页面的高度为2000px，设置滚动条的Y轴坐标为300px，要求兼容各种浏览器
$('body').css('height', '2000px');
$('html,body').scrollTop(300);

操作

  • text()

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

<p></p>
<script>
	//设置p段落标签的内容为“我是段落”
    $('p').text('我是段落');
    
    //获取p段落标签的内容并输出
    console.log($('p').text());
</script>
  • html()

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

<ul></ul>
<script>
	//设置ul列表标签的li列表项
    var li = '<li>我是列表项</li>';
	$('ul').html(li);
    
    //获取ul列表中的列表项并输出
    console.log($('ul').html());
</script>
  • append()

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

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>
<script>
	//为当前的ul向后添加一个列表项
    var last = '<li>我是最后一个列表项</li>';
	$('ul').append(last);
</script>
  • appendTo()

将指定的内容追加到当前匹配的所有元素的最后面。

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>
<script>
	//为当前的ul向后添加一个列表项
    var last = '<li>我是最后一个列表项</li>';
	$(last).appendTo($('ul'));
</script>
  • prepend()

向当前匹配的所有元素内部的最前面插入指定内容。

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>
<script>
	//为当前的ul向前添加一个列表项
    var first = '<li>我是第一个列表项</li>';
	$('ul').prepend(first);
</script>
  • prependTo()

将指定的内容追加到当前匹配的所有元素的最前面。

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>
<script>
	//为当前的ul向前添加一个列表项
    var first = '<li>我是第一个列表项</li>';
	$(first).prependTo($('ul'));
</script>
  • after()

在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

<div>我是div</div>
<script>
	//：在div的后边插入一个段落
    var after = '<p>我是段落</p>';
	$('div').after(after);
</script>
  • before()

在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。

<div>我是div</div>
<script>
	//在div的前边插入一个段落
    var before = '<p>我是段落</p>';
	$('div').before(before);
</script>
  • insertAfter()

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

<div>我是div</div>
<script>
	//在div的后边插入一个段落
    var content = '<p>我是段落</p>';
	$(content).insertAfter($('div'));
</script>
  • insertBefore()

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

<div>我是div</div>
<script>
	//在div的前边插入一个段落
    var content = '<p>我是段落</p>';
	$(content).insertBefore($('div'));

</script>
  • empty()

删除所有匹配元素的子元素。

<ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>
<script>
    //将ul列表下所有的子节点全部移除
	$('ul').empty();
</script>
  • remove()

删除所有匹配的元素。同时移除元素上的事件及 jQuery 数据

<ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>
<script>
	//将ul列表下所有的p子节点全部移除
    $('ul>p').remove();
</script>
  • replaceWith()

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

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
<script>
    //将ul下的所有li替换为p标签
	$('ul>li').replaceWith('<p>我是段落</p>');
</script>
  • replaceAll()

.replaceAll()和.replaceWith()功能类似，但是目标和源相反。

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
<script>
	//将ul下的所有li替换为p标签
    $('<p>我是段落</p>').replaceAll($('ul>li'));
</script>
  • clone()

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

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
<script>
	//为ul列表创建一个深克隆并追加到body后
    var ul = $('#ul').clone();
	$('body').append(ul);
</script>
  • parent()

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>
<script>
    //输出id为two的li的父元素
	console.log($('#two').parent()[0]);
</script>
  • children()

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

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>
<script>
    //输出ul下的所有子元素
	var childrens = $('ul').children();
    for (var i = 0; i < childrens.length; i++) {
        console.log(childrens[i]);
    }
</script>
  • prev()

获取集合中每个匹配元素紧邻的前一个兄弟元素，可以提供一个可选的选择器来进行筛选。

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>
<script>
	//获取id为two元素的前一个兄弟元素并输出
    console.log($('#two').prev()[0]);
</script>
  • prevAll()

获得集合中每个匹配元素的所有前面的兄弟元素，可以提供一个可选的选择器来进行筛选。

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>
<script>
    //获取id为two元素的前边所有的兄弟元素并输出
	var prevs = $('#two').prevAll();
    for (var i = 0; i < prevs.length; i++) {
        console.log(prevs[i]);
    }

</script>
  • next()

获取集合中每个匹配元素紧邻的后一个兄弟元素，可以提供一个可选的选择器来进行筛选。

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>
<script>
	//获取id为two元素的后一个兄弟元素并输出
    console.log($('#two').next()[0]);
</script>
  • nextAll()

获得集合中每个匹配元素的所有后面的兄弟元素，可以提供一个可选的选择器来进行筛选。

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>
<script>
	//获取id为two元素的后边所有的兄弟元素并输出
    var nexts = $('#two').nextAll();
    for (var i = 0; i < nexts.length; i++) {
        console.log(nexts[i]);
    }
</script>
  • siblings()

获得集合中每个匹配元素的兄弟元素，可以提供一个可选的选择器来进行筛选。

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>
<script>
    //获取id为two元素的所有兄弟元素并输出
	var siblings = $('#two').siblings();
    for (var i = 0; i < siblings.length; i++) {
        console.log(siblings[i]);
    }
</script>

遍历

  • each()

遍历一个jQuery对象，为每个匹配元素执行一个函数

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

<script>
	//获取每一个li元素并把每一个li元素的标签及内容输出
    $('li').each(function (index, element) {
    console.log(index, element);
    });
</script>

筛选

  • first()

获取匹配元素集合中第一个元素。

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>
<script>
    //设置ul下第一个li的背景为红色
	$('ul>li').first().css('background', 'red');
</script>
  • last()

获取匹配元素集合中最后一个元素。

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>
<script>
    //设置ul下最后一个li的背景为红色
	$('ul>li').last().css('background', 'red');
</script>
  • eq()

获取匹配元素集合中指定位置索引的一个元素。索引下标从0开始

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>
<script>
    //设置ul下第二个li的背景为红色
	$('ul>li').eq(1).css('background', 'red');
</script>
  • not()

从匹配的元素集合中移除指定的元素。

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>
<script>
	//设置ul下li标签的背景为红色，排除第二个li
    var two = $('ul>li').eq(1);
	$('ul>li').not(two).css('background', 'red');
</script>
  • filter()

筛选元素集合中匹配表达式或通过传递函数测试的元素集合。

.filter(selector)//一个用于匹配元素的选择器字符串
.filter(function(index))//一个函数作用测试集合中的每个元素。this是当前的DOM对象
.filter(element)//一个或多个DOM元素来匹配当前元素集合
.filter(jQuery object)//现有jQuery对象，用于进一步筛选当前元素集合

<ul>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
</ul>
<script>
    //查找所有id为two的li标签设置其背景为红色
	$('ul>li').filter('[id=two]').css('background', 'red');
</script>

事件

  • resize()

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

$(window).resize(function () {
    //当浏览器窗口的尺寸改变时，控制台输出“浏览器尺寸改变了”
    console.log('浏览器尺寸改变了');
});
  • scroll()

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

<style>
	body {
    height: 2000px;
}
</style>
<script>
    //当浏览器窗口的滚动条滚动时，控制台输出“浏览器滚动条改变了”
	$(window).scroll(function () {
    console.log('浏览器滚动条改变了');
});
</script>
  • on()

在选定的元素上绑定一个或多个事件处理函数。

<button>按钮</button>
<script>
    //为按钮添加单击事件，当按钮单击的时候，向控制台输出“按钮被单击了”
	$('button').on('click',function () {
    console.log('按钮被单击了');
});
</script>
  • off()

移除一个事件处理函数。

<button>按钮</button>
<script>
    //为按钮添加单击事件，然后再解绑，这时候你在点击按钮看看是不是不会输出信息了
	$('button').on('click',function () {
    console.log('按钮被单击了');
    });
    $('button').off('click');
</script>
  • delegate()

设置事件委托。

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>
<script>
    //为ul下的所有li添加单击事件，要求将该单击事件委托给ul，当单击li时，所对应的li背景变为红色
	$('ul').delegate('li', 'click', function () {
    this.style.background = 'red';
    });

</script>
  • undelegate()

移除事件委托。

<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').undelegate('click');

</script>

事件对象

对象属性名称对象属性描述
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()

当获取焦点时触发所绑定的函数。

<input type="text">
<script>
    //当文本框获取焦点时，设置其背景为红色
	$(':text').focus(function () {
    $(this).css('background', 'red');
    });
</script>
  • blur()

当失去焦点时触发所绑定的函数。

<input type="text">
<script>
    //当文本框获取焦点时，设置其背景为红色，当文本框失去焦点时，设置其背景为绿色
	$(':text').focus(function () {
    $(this).css('background', 'red');
    });
    $(':text').blur(function () {
        $(this).css('background', 'green');
    });
</script>
  • change()

当内容改变时触发所绑定的函数。

<input type="text">
<script>
    //当文本框内容改变时，就向控制台输出当前文本框的内容
    $(':text').change(function () {
        console.log($(this).val());
    });
</script>

<select>
    <option>河北</option>
    <option>河南</option>
    <option>上海</option>
    <option>北京</option>
    <option>广东</option>
</select>
<script>
    //当选择框的内容改变时，就向控制台输出当前选中项的内容
	$('select').change(function () {
    console.log($(this).val());
});
</script>
  • select()

当内容选择时触发所绑定的函数。

<input type="text" value="123456">
<script>
    //当文本框的内容被选择时，就向控制台输出当前文本框的内容
	$('input').select(function () {
    console.log($(this).val());
    });
</script>
  • submit()

当表单提交时触发所绑定的函数。

<form action="#">
    <input type="submit">
</form>
<script>
    //当表单提交的时候，弹出对话框“表单提交了”
	$('form').submit(function () {
    alert('表单提交了');
    });
</script>
  • click()

鼠标单击时调用所绑定的函数。

<button>按钮</button>
<script>
    //为按钮绑定一个单击函数，然后点击按钮，在控制台输出“按钮被单击了”
	$('button').click(function () {
    console.log('按钮被单击了');
    });
</script>
  • dblclick()

当鼠标双击时调用所绑定的函数。

<button>按钮</button>
<script>
    //为按钮绑定一个双击函数，然后双击按钮，在控制台输出“按钮被单击了”
	$('button').dblclick(function () {
    console.log('按钮被双击了');
	});
</script>
  • mousedown()

当鼠标左键按下的时候调用所绑定的函数。

<button>按钮</button>
<script>
    //鼠标左键按下的时候，控制台输出“鼠标左键按下”
	$('button').mousedown(function () {
    console.log('鼠标左键按下');
	});

</script>
  • mouseup()

当鼠标左键松开的时候调用所绑定的函数。

<button>按钮</button>
<script>
    //当鼠标左键松开的时候，控制台输出“鼠标左键松开”
	$('button').mouseup(function () {
    console.log('鼠标左键松开');
    });
</script>
  • mouseenter()

当鼠标进入目标元素的时候调用所绑定的函数。

<style>
	.outer {
    width: 200px;
    height: 200px;
    background: coral;
}

.inner {
    width: 100px;
    height: 100px;
    background: pink;
}
</style>
<div class="outer">
    <div class="inner"></div>
</div>
<script>
    //当鼠标移到外层div的时候，向控制台输出“mouse enter”
	$('.outer').mouseenter(function () {
    console.log('mouse enter');
    });
</script>
  • mouseleave()

当鼠标离开目标元素的时候调用所绑定的函数。

<style>
	.outer {
    width: 200px;
    height: 200px;
    background: coral;
}

.inner {
    width: 100px;
    height: 100px;
    background: pink;
}
</style>
<div class="outer">
    <div class="inner"></div>
</div>
<script>
    //当鼠标移出外层div的时候，向控制台输出“mouse leave”
	$('.outer').mouseleave(function () {
    console.log('mouse leave');
    });
</script>
  • mouseover()

当鼠标进入目标元素的时候调用所绑定的函数。

mouseenter事件和mouseover的不同之处是事件的冒泡的方式。mouseenter 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。

<style>
	.outer {
    width: 200px;
    height: 200px;
    background: coral;
}

.inner {
    width: 100px;
    height: 100px;
    background: pink;
}
</style>
<div class="outer">
    <div class="inner"></div>
</div>
<script>
    //当鼠标移到外层div的时候，向控制台输出“mouse over”，鼠标移到内层div的时候，向控制台输出“mouse over”，
	$('.outer').mouseover(function () {
    console.log('mouse over');
    });
</script>
  • mouseout()

当鼠标离开目标元素的时候调用所绑定的函数。

mouseleave事件和mouseout的不同之处是事件的冒泡的方式。mouseleave 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。

<style>
	.outer {
    width: 200px;
    height: 200px;
    background: coral;
}

.inner {
    width: 100px;
    height: 100px;
    background: pink;
}
</style>
<div class="outer">
    <div class="inner"></div>
</div>
<script>
    //当鼠标移出外层div的时候，向控制台输出“mouse out”
	$('.outer').mouseout(function () {
    console.log('mouse out');
    });
</script>
  • mousemove()

当鼠标指针在元素内移动时，mousemove事件就会被触发，任何HTML元素都可以接受此事件。

<style>
	.outer {
    width: 200px;
    height: 200px;
    background: black;
    position: absolute;
    left: 20px;
    top: 20px;
}
</style>
<div class="outer"></div>
<script>
    //鼠标在div内移动，获取当前鼠标相对div的位置坐标
	$('.outer').mousemove(function (event) {
    console.log(event.offsetX, event.offsetY);
	});	
</script>
  • hover()

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

<style>
	.outer {
    width: 200px;
    height: 200px;
    background: black;
}
</style>
<div class="outer"></div>
<script>
    //当鼠标进入div设置背景为红色，当鼠标移出div设置背景为绿色，默认背景为黑色
	$('.outer').hover(function () {
    $(this).css('background', 'red');
    }, function () {
        $(this).css('background', 'green');
    });
</script>
  • keydown()

当键盘按键按下的时候调用绑定的函数。

<input type="text">
<script>
    //当键盘按键按下的时候，输出当前的按键
	$(':text').keydown(function (event) {
    console.log(event.key);
    });
</script>
  • keyup()

当键盘按键松开的时候调用绑定的函数。

<input type="text">
<script>
    //当键盘按键松开的时候，输出当前的按键
	$(':text').keyup(function (event) {
    console.log(event.key);
    });
</script>
  • keypress()

keypress与keydown类似，当键盘按键按下的时候调用绑定的函数。

<input type="text">
<script>
    //当键盘按键松开的时候，输出当前的按键
	$(':text').keypress(function (event) {
    console.log(event.key);
    });
</script>

动画

  • hide()

隐藏元素。

<style>
	.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
	}
</style>
<div class="box"></div>
<script>
    //创建一个显示div，然后隐藏该元素
	$('.box').hide();
    //创建一个隐藏div，然后显示该元素
    $('.box').show();
</script>
  • toggle()

如果隐藏就设置为显示，如果显示就设置为隐藏。

<style>
	.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
    }
</style>
<button>隐藏/显示</button>
<div class="box"></div>
<script>
    //点击控制div显示和隐藏
	$('button').click(function () {
    $('.box').toggle();
    });
</script>

渐变

  • fadeIn()

通过淡入的方式显示匹配元素。

<style>
	.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: none;
    }
</style>
<button>淡入</button>
<div class="box"></div>
<script>
    //按钮，控制div缓慢淡入
	$('button').click(function () {
    $('.box').fadeIn('slow');
    });
</script>
  • fadeOut()

通过淡出的方式隐藏匹配元素。

<style>
	.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
    }
</style>
<button>淡出</button>
<div class="box"></div>
<script>
    //按钮，控制div缓慢淡出
	$('button').click(function () {
    $('.box').fadeOut('slow');
    });
</script>
  • fadeToggle()

用淡入淡出动画显示或隐藏一个匹配元素。

<style>
	.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
    }
</style>
<button>淡出/淡入</button>
<div class="box"></div>
<script>
    //按钮，控制div淡入和淡出
	$('button').click(function () {
    $('.box').fadeToggle('slow');
    });
</script>

滑动

  • slideDown()

用滑动动画显示一个匹配元素。

<style>
	.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: none;
    }
</style>
<button>滑动显示</button>
<div class="box"></div>
<script>
    //创建一个按钮，控制div滑动显示
	$('button').click(function () {
    $('.box').slideDown();
    });
</script>
  • slideUp()

用滑动动画隐藏一个匹配元素。

<style>
	.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
    }
</style>
<button>滑动隐藏</button>
<div class="box"></div>
<script>
    //创建一个按钮，控制div滑动隐藏
	$('button').click(function () {
    $('.box').slideUp();
    });
</script>
  • slideToggle()

用滑动动画显示或隐藏一个匹配元素。

<style>
	.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
    }
</style>
<button>滑动隐藏/滑动显示</button>
<div class="box"></div>
<script>
    //创建一个按钮，控制div滑动显示和滑动隐藏
	$('button').click(function () {
    $('.box').slideToggle();
    });
</script>
  • animate()

根据一组 CSS 属性，执行自定义动画，并且支持链式调用。

<style>
	.box {
    width: 100px;
    height: 100px;
    background: black;
    }
</style>
<button>自定义动画</button>
<div class="box"></div>
<script>
    //创建一个div，默认div宽高100px，背景颜色为黑色，先让div宽度变为200px，再让div高度变为200px
	$('.box')
    .animate({
        width: '200'
    })
    .animate({
        height: '200',
    });
</script>
  • stop()

停止匹配元素当前正在运行的动画。

独立寒秋-
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JQuery的作用详解
KaiFa_XiaoYang的博客
12-30 1969
一、 jQuery是什么？ jQuery是一个JavaScript库，是由John Resig创建于2006年1月的开源项目，jQuery凭借着简介的语法和跨平台的兼容性，极大简化了JavaScript开发人员遍历HTML文档，操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript程序员的设计思路和编写程序的方式。简单地来说： 1、jQuery是一个优秀的JavaScript库。 2、jQuery极大地简化了JavaScript编程。 3、jQu
JQuery基础
gorgeoustudy的博客
08-28 175
概念：一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScrip...
jQuery
最新发布
vV_Leon的博客
04-27 1753
学习jQuery
jquery
打杂人
11-14 1716
$(document).ready(function(){   $("button").click(function(){   $("p").after(" W3School.");   }); }); This is a heading This is a paragraph. This is another paragraph. 请点击这里 *****
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
Jquery基础
12-13
Jquery基础及个人心得，选择器，常用方法、监听事件，event事件：阻止默认事件
Jquery
Listner的博客
02-04 616
了解Jquery 什么是JQuery jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQueryJavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。简单来说，Jquery是简化版的JS Jquery的优点： ...
jQuery cdn使用介绍
adobe1992
07-06 1390
如果您不希望下载并存放jQuery，那么也可以通过 CDN（内容分发网络）引用它，下面是具体实现，有类似需求的各位可以参考下哈，希望对你有所帮助。 如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。  百度、谷歌和微软的服务器都存有 jQuery 。  jQuery 百度 cdn(国内肯定选择百度或新浪) 加载地址： 未压缩： 
JQuery
哈
11-09 287
JQuery 在DOM文档载入完成后执行，语法： $(function(){ ..... });

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

独立寒秋-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值