jQuery

第一章 jQuery介绍

1.1 jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！

什么是jQuery
顾名思义，也就是JavaScript和查询（Query），他就是JavaScript开发的js类库。
核心思想
write less, do more. 所以实现了浏览器兼容。

1.2 jQuery官网

官方地址：官网
官方文档：文档

1.3 jQuery版本

1.x （本教程所采用）
兼容老版本IE
文件较大，但兼容性最好
2.x
部分IE8及以下版本不支持
文件较小，执行效率更高
3.x
完全不再支持IE8及以下版本
提供了一些新的API
提供不包含AJAX/动画API的版本

1.4 jQuery引入方式

本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用

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

CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）

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

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

1.6 jQuery两把利器

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

第二章 jQuery核心函数

2.1 选择器

2.1.1 基本选择器

2.1.1.1 标签选择器

需求描述：选择页面中所有的div标签，设置其背景为红色

$('div').css('background', 'red');

2.1.1.2 id选择器

需求描述：选择页面中所有id为btn的按钮，设置其背景为红色

$('#btn').css('background', 'red');

2.1.1.3 class选择器

需求描述：选择页面中所有class为red的标签，设置其背景为红色

$('.red').css('background', 'red');

2.1.1.4 通配符选择器

需求描述：选择页面中class为content的div下所有元素，设置其背景为红色

$('.content *').css('background', 'red');

2.1.1.5 并集选择器

需求描述：选择页面中所有的段落与按钮，设置其背景为红色

$('p,button').css('background', 'red');

2.1.1.6 交集选择器

$('p.red').css('background', 'red');

2.1.2、层级选择器

2.1.2.1 子代选择器

需求描述：选择ul下的所有span子元素，设置其背景为红色

$('ul>span').css('background', 'red');

2.1.2.2 后代选择器

需求描述：选择ul下的所有span元素，设置其背景为红色

$('ul span').css('background', 'red');

2.1.2.3 兄弟选择器

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

$('#box+li').css('background', 'red');

需求描述：选中id为box的后边的兄弟li，设置其背景为红色

$('#box~li').css('background', 'red');

2.1.3 过滤选择器

2.1.3.1 基本筛选器

需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行

$('tr:even').css('background', 'red');

需求描述：实现隔行变色，让表格的偶数行的背景变为红色，:odd代表选取下标为奇数的行

$('tr:odd').css('background', 'red');

需求描述：实现让表格的第一行的背景变为红色

$('tr:first').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');

2.1.3.2 内容筛选器

需求描述：实现让内容为“男”的单元格的背景变为红色

$('td:contains("男")').css('background', 'red');

需求描述：实现让内容为span标签的单元格的背景变为红色

$('td:has(span)').css('background', 'red');

需求描述：实现让内容为空的单元格的背景变为红色

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

需求描述：实现让内容不为空的单元格的背景变为红色

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

2.1.3.3 属性筛选器

需求描述：查找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');
or
$('a[hreflang^="en"]').css('background', 'red');

需求描述：查找hreflang属性值是以给定值CN结尾的元素，设置其背景为红色

$('a[hreflang$="CN"]').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');

2.1.3.4 可见性筛选器

需求描述：让隐藏的段落显示出来

$('p:hidden').css('display', 'block');

需求描述：让显示的段落隐藏起来

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

2.1.3.5 子元素筛选器

需求描述：选择所有父级元素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');

2.1.4 表单选择器

2.1.4.1 表单类型选择器

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

$('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]);

2.1.4.2 表单状态选择器

需求描述：输出表单获取焦点、表单选中、表单禁用、表单列表项选中的状态所在的标签信息

console.log($(':focus')[0]);
console.log($(':checked')[0]);
console.log($(':disabled')[0]);
console.log($(':selected')[0]);

2.2 工具

2.2.1 $.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);
});

2.2.2 $.trim方法

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

需求描述：给定一个字符串，去掉该字符串的前后空格

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

2.2.3 $.type方法

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

需求描述：给定一个对象，输出该对象的类型

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

2.2.4 $.isArray方法

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

需求描述：给定一个对象，输出该对象是不是数组类型

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

2.2.5 $.isFunction方法

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

需求描述：给定一个对象，输出该对象是不是函数类型

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

2.3 ajax

2.3.1 $.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);
    }
});

2.3.2 $.get方法

方法描述：使用一个HTTP GET请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
});

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

2.3.3 $.post方法

方法描述：使用一个HTTP POST请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
});

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

第三章 jQuery核心对象

3.1 属性

3.1.1 属性

3.1.1.1 attr()

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

需求描述：设置p标签的title属性为”我是attr修改后的段落标题“

$('#content').attr('title', '我是attr修改后的段落标题');

需求描述：读取p标签的title属性并输出

console.log($('#content').attr('title'));

3.1.1.2 prop()

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

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

$(':checkbox').prop('checked', 'true');

需求描述：读取复选框的选中状态并输出

console.log($(':checkbox').prop('checked'));

3.1.1.3 val()

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

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

$(':text').val('123456');

需求描述：读取文本框的值并输出

console.log($(':text').val());

3.1.2 样式

3.1.2.1 css()

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

需求描述：设置div的背景颜色为红色，字体颜色为白色

$('div').css({
    'background': 'red',
    'color': 'white'
});

需求描述：获取div的背景颜色和字体颜色并输出

console.log($('div').css('background'));
console.log($('div').css('color'));

3.1.2.2 addClass()

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

需求描述：为所有的li添加样式”beauty“

$('li').addClass('beauty');

3.1.2.3 removeClass()

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

需求描述：为所有的li移除样式”beauty“

$('li').removeClass('beauty');

3.1.2.4 hasClass()

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

需求描述：判断p标签是否包含”beauty“的样式

console.log($('p').hasClass('beauty'));

3.1.2.5 toggleClass()

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

注意：如果存在（不存在）就删除（添加）一个样式类
需求描述：当单击按钮的时候，隐藏div，再次单击按钮的时候，显示div

$('button').click(function () {
    $('div').toggleClass('hide');
});

3.1.3 尺寸

3.1.3.1 width()

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

3.1.3.2 height()

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

3.1.3.3 innerWidth()

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

3.1.3.4 innerHeight()

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

3.1.3.5 outerWidth()

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

3.1.3.6 outerHeight()

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

3.1.3.7 综合演示

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

.box {
    margin: 30px;
    padding: 20px;
    border: 10px;
    width: 100px;
    height: 100px;
    background: coral;
}

<div class="box"></div>

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

3.1.4 位置

3.1.4.1 offset()

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

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

var offset = $('.box').offset();
console.log(offset.left, offset.top);

3.1.4.2 position()

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

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

var offset = $('.box').position();
console.log(offset.left, offset.top);

3.1.4.3 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);

3.1.4.4 scrollTop()

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

读取页面滚动条的Y坐标(兼容chrome和IE)

var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();

$('body,html').scrollLeft(60);

需求描述：设置页面的宽度为2000px，设置滚动条的X轴坐标为300px，要求兼容各种浏览器

$('body').css('height', '2000px');
$('html,body').scrollTop(300);

3.2 操作

3.2.1 DOM内部插入

3.2.1.1 text()

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

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

$('p').text('我是段落');

3.2.1.2 html()

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

var li = '<li>我是列表项</li>';
$('ul').html(li);

需求描述：获取ul列表中的列表项并输出

console.log($('ul').html());

3.2.1.3 append()

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

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

var last = '<li>我是最后一个列表项</li>';
$('ul').append(last);

3.2.1.4 appendTo()

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

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

var last = '<li>我是最后一个列表项</li>';
$(last).appendTo($('ul'));

3.2.1.5 prepend()

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

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

var first = '<li>我是第一个列表项</li>';
$('ul').prepend(first);

3.2.1.6 prependTo()

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

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

var first = '<li>我是第一个列表项</li>';
$(first).prependTo($('ul'));

3.2.2 DOM外部插入

3.2.2.1 after()

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

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

var after = '<p>我是段落</p>';
$('div').after(after);

3.2.2.2 before()

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

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

var before = '<p>我是段落</p>';
$('div').before(before);

3.2.2.3 insertAfter()

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

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

var content = '<p>我是段落</p>';
$(content).insertAfter($('div'));

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

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

var content = '<p>我是段落</p>';
$(content).insertBefore($('div'));

3.2.3 DOM移除

posted @ 2023-05-05 10:24 K1_KCY 阅读(29) 评论(0) 收藏举报

刷新页面返回顶部

dookie

jQuery

第一章 jQuery介绍

1.1 jQuery简介

1.2 jQuery官网

1.3 jQuery版本

1.4 jQuery引入方式

1.5 jQuery快速入门

1.6 jQuery两把利器

第二章 jQuery核心函数

2.1 选择器

2.1.1 基本选择器

2.1.1.1 标签选择器

2.1.1.2 id选择器

2.1.1.3 class选择器

2.1.1.4 通配符选择器

2.1.1.5 并集选择器

2.1.1.6 交集选择器

2.1.2、层级选择器

2.1.2.1 子代选择器

2.1.2.2 后代选择器

2.1.2.3 兄弟选择器

2.1.3 过滤选择器

2.1.3.1 基本筛选器

2.1.3.2 内容筛选器

2.1.3.3 属性筛选器

2.1.3.4 可见性筛选器

2.1.3.5 子元素筛选器

2.1.4 表单选择器

2.1.4.1 表单类型选择器

2.1.4.2 表单状态选择器

2.2 工具

2.2.1 $.each方法

2.2.2 $.trim方法

2.2.3 $.type方法

2.2.4 $.isArray方法

2.2.5 $.isFunction方法

2.3 ajax

2.3.1 $.ajax方法

2.3.2 $.get方法

2.3.3 $.post方法

第三章 jQuery核心对象

3.1 属性

3.1.1 属性

3.1.1.1 attr()

3.1.1.2 prop()

3.1.1.3 val()

3.1.2 样式

3.1.2.1 css()

3.1.2.2 addClass()

3.1.2.3 removeClass()

3.1.2.4 hasClass()

3.1.2.5 toggleClass()

3.1.3 尺寸

3.1.3.1 width()

3.1.3.2 height()

3.1.3.3 innerWidth()

3.1.3.4 innerHeight()

3.1.3.5 outerWidth()

3.1.3.6 outerHeight()

3.1.3.7 综合演示

3.1.4 位置

3.1.4.1 offset()

3.1.4.2 position()

3.1.4.3 scrollLeft()

3.1.4.4 scrollTop()

3.2 操作

3.2.1 DOM内部插入

3.2.1.1 text()

3.2.1.2 html()

3.2.1.3 append()

3.2.1.4 appendTo()

3.2.1.5 prepend()

3.2.1.6 prependTo()

3.2.2 DOM外部插入

3.2.2.1 after()

3.2.2.2 before()

3.2.2.3 insertAfter()

3.2.3 DOM移除

公告