jQuery基础-程序员宅基地

技术标签： 前端  jquery  javascript  

文章目录

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

停止匹配元素当前正在运行的动画。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51445423/article/details/131687458

智能推荐

oracle 12c 集群安装后的检查_12c查看crs状态-程序员宅基地

文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下：http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态：[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态

解决jupyter notebook无法找到虚拟环境的问题_jupyter没有pytorch环境-程序员宅基地

文章浏览阅读1.3w次，点赞45次，收藏99次。我个人用的是anaconda3的一个python集成环境，自带jupyter notebook，但在我打开jupyter notebook界面后，却找不到对应的虚拟环境，原来是jupyter notebook只是通用于下载anaconda时自带的环境，其他环境要想使用必须手动下载一些库：1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境

国内安装scoop的保姆教程_scoop-cn-程序员宅基地

文章浏览阅读5.2k次，点赞19次，收藏28次。选择scoop纯属意外，也是无奈，因为电脑用户被锁了管理员权限，所有exe安装程序都无法安装，只可以用绿色软件，最后被我发现scoop，省去了到处下载XXX绿色版的烦恼，当然scoop里需要管理员权限的软件也跟我无缘了（譬如everything）。推荐添加dorado这个bucket镜像，里面很多中文软件，但是部分国外的软件下载地址在github，可能无法下载。以上两个是官方bucket的国内镜像，所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn

Element ui colorpicker在Vue中的使用_vue el-color-picker-程序员宅基地

文章浏览阅读4.5k次，点赞2次，收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了，例如：这里的:sty..._vue el-color-picker

迅为iTOP-4412精英版之烧写内核移植后的镜像_exynos 4412 刷机-程序员宅基地

文章浏览阅读640次。基于芯片日益增长的问题，所以内核开发者们引入了新的方法，就是在内核中只保留函数，而数据则不包含，由用户（应用程序员）自己把数据按照规定的格式编写，并放在约定的地方，为了不占用过多的内存，还要求数据以根精简的方式编写。boot启动时，传参给内核，告诉内核设备树文件和kernel的位置，内核启动时根据地址去找到设备树文件，再利用专用的编译器去反编译dtb文件，将dtb还原成数据结构，以供驱动的函数去调用。firmware是三星的一个固件的设备信息，因为找不到固件，所以内核启动不成功。_exynos 4412 刷机

Linux系统配置jdk_linux配置jdk-程序员宅基地

文章浏览阅读2w次，点赞24次，收藏42次。Linux系统配置jdkLinux学习教程，Linux入门教程（超详细）_linux配置jdk

随便推点

matlab(4)：特殊符号的输入_matlab微米怎么输入-程序员宅基地

文章浏览阅读3.3k次，点赞5次，收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图：_matlab微米怎么输入

C语言程序设计-文件(打开与关闭、顺序、二进制读写)-程序员宅基地

文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件，可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中，对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数，而关闭则使用fclose函数。在C语言中，可以使用fread和fwrite函数进行二进制读写。‍ Biaoge 于2024-03-09 23:51发布 阅读量：7 ️文章类型：【 C语言程序设计 】在C语言中，用于打开文件的函数是____，用于关闭文件的函数是____。

Touchdesigner自学笔记之三_touchdesigner怎么让一个模型跟着鼠标移动-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏13次。跟随鼠标移动的粒子以grid（SOP）为partical（SOP）的资源模板，调整后连接【Geo组合+point spirit（MAT)】，在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in（CHOP)鼠标位置到metaball的坐标，实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动

【附源码】基于java的校园停车场管理系统的设计与实现61m0e9计算机毕设SSM_基于java技术的停车场管理系统实现与设计-程序员宅基地

文章浏览阅读178次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计

Android系统播放器MediaPlayer源码分析_android多媒体播放源码分析 时序图-程序员宅基地

文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多，会从Java-&amp;amp;gt;Jni-&amp;amp;gt;C/C++慢慢分析，后面会慢慢更新。另外，博客只作为自己学习记录的一种方式，对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图

java 数据结构与算法 ——快速排序法-程序员宅基地

文章浏览阅读2.4k次，点赞41次，收藏13次。java 数据结构与算法 ——快速排序法_快速排序法

推荐文章

热门文章

相关标签