1. Toy模板网首页
  2. > Toy博客

jQuery基础

9月前 作者：独立寒秋- 分类：Toy博客 阅读(23) 违法举报

这篇具有很好参考价值的文章主要介绍了jQuery基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、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()

停止匹配元素当前正在运行的动画。文章来源地址https://www.toymoban.com/news/detail-551136.html

到了这里，关于jQuery基础的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Javascript知识【jQuery样式操作&案例：jQuery隔行换色】

    Javascript知识【jQuery样式操作&案例：jQuery隔行换色】

    💂 个人主页:  爱吃豆的土豆 🤟 版权:  本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主 💬 如果文章对你有帮助、 欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 🏆 人必有所执，方能有所成！ 🐋希望大家多多支持😘一起进步呀！ 目录 1，jQuery样式操作

    2024年02月21日
    浏览(53)
  • Javascript jQuery简介

    Javascript jQuery简介

    ✨前言✨ 1.jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式

    2024年01月21日
    浏览(59)
  • JavaScript的库——jquery

    JavaScript的库——jquery

    JavaScript的库——jquery 一、jQuery的hello 将代码写在一个闭包中 二、面试题： jQuery的ready函数和JavaScript的onload事件有什么区别？ 是null，因为拿不到box，代码在后面，还没有执行。 所以需要将代码放在后面： 但是就想将代码放在前面: 匿名 或者： 命名 onload事件： ready: 三、箭

    2024年02月16日
    浏览(43)

  • JavaScript --jQuery库

    目录  简介 注意事项： 常用的方法  示例  要使用jQuery 库，可以按照以下步骤进行： 引入 jQuery 库：在 HTML 文件的  head  或  body  部分引入 jQuery 库。您可以从官方网站下载 jQuery，或通过使用 CDN（内容分发网络）引入。例如，在使用 CDN 的情况下，您可以在 HTML 文件中添

    2024年02月14日
    浏览(37)
  • Maven中导入jQuery，前端页面中引用jQuery

    Maven中导入jQuery，前端页面中引用jQuery

    第一步pom文件中，配置maven坐标。 第二步，在前端页面中引用jQuery 注：该前端页面需要在web根目录即webapp目录下。可认为在maven中导入jQuery后，jquery.min.js文件放在目录webapp/webjars/jquery/3.3.1下。

    2024年02月09日
    浏览(44)
  • 前端Jquery学习

    前端Jquery学习

    jQuery语法 基础语法：$(selector).action() 文档就绪事件： 选择器 元素选择器：$(“p”) id选择器：$(“#id”) 类选择器：$(“.clazz”) 其他如下 语法 描述 $(“*”) 选取所有元素 $(this) 选取当前HTML元素 $(“p.intro”) 选取class为intro的p元素 $(“p:first”) 选取第一个p元素 $(“ul li:first”

    2024年02月08日
    浏览(33)

  • 前端小记——jQuery

    目录 jQuery简介 jQuery语法 jQuery加载模式 jQurey选择器 元素选择 文本内容插入 获取输入框的值 设置属性 CSS样式的操作 设置class属性 class切换 节点操作 事件的绑定 事件简写 事件对象 显示隐藏动画 上卷下拉动画 淡入淡出动画 jQuery 是一个轻量级的\\\"写的少，做的多\\\"的 JavaScrip

    2024年02月02日
    浏览(44)

  • javaScript和jQuery获取、设置textarea标签的内容（常见问题）

    昨天晚上在写代码的时候前端遇到一个bug，在js取值textarea中，我使用了getElementById方法对textarea标签取值，但不论如何取值，始终无法成功取到页面上输入的值并进行Ajax请求，一开始以为是ajax与后端接口之间数据传输出问题了，后来经过排查，就是对于textarea标签取值失败的

    2024年02月05日
    浏览(41)
  • JQuery前端之操作JSON的方法

    JQuery前端之操作JSON的方法

    转自：微点阅读  https://www.weidianyuedu.com 一、关于Json的数据格式 从结构上看，所有的数据最终都可以分成三种类型： 第一种类型是scalar（标量），也就是一个单独的string（字符串）或数字（numbers），比如“北京”这个单独的词。 第二种类型是sequence（序列），也就是若干个

    2024年02月03日
    浏览(35)

  • 【前端】jquery获取data-*的属性值

     通过jquery获取下面data-id的值 方法一：dataset()方法 方法二：jquery data()方法 通过点击事件，获取当前被点击的属性值 方法三：jquery attr()方法

    2024年02月07日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包