一.jquery基本概念
1.jQuery是什么?我们为什么要学习它?
(1).jQuery是一个JavaScript的函数库,内部封装了许多实用的功能函数;
(2).全球大约80%到90%的网站直接或间接的使用了jQuery,所以每一个前端开发者都应该了解它,学习它;
(3).jQuery主要是解决三大问题:1.消除了浏览之间的兼容性;2.DOM操作更加的简单;3.动画实现更加轻松;
(4).jQuery的基本思想是: Write Less,Do More (写得少做得多)
--------------------------------------------------------------------------------------
2. jQuery的下载导入与jQuery对象
(1).官网下载:jquery.com, 线上***环境推荐下载压缩版,学习推荐下载未压缩版,便于查看与分析源码;
(2).使用script标签将jquery.js导入到当前html文档中,推荐放到<body>尾部之前;
(3).jQuery对象其实就是一个DOM元素的集合;
(4).JQuery对象与DOM对象之间可以通过数组访问方式进行转换,或者使用jquery的get()方法;
(5).可以将一个匿名函数当做参数传递给$()函数来使用jQuery,并且允许多次调用,这是最简单的方式.
(6).链式操作是什么?
--------------------------------------------------------------------------------------
3. jQuery常用的核心方法与属性
(1).jQuery(selector[,context]): jQuery('选择器', '上下文')
[1]:选择器: 兼容css2.0,3.0;
[2]:上下文: 就是选择元素的范围,默认是当前文档document对象,可选的
(2).jQuery(html[,ownerDocument): jQuery('html标记字符','当前所在文档')
[1]:html可以一串字符串: $('<div>xxx</div>');
[2]:html标签属性可以写到标签里,也可以放一第二个js对象参数中
$('<div>',{"class":"red",text:"Hello",click:function(){}};
(3).$(funciton()): 是 $(document).ready()的缩写
[1].DOM树渲染完成,不必等待图片等资源加载完成就可以执行回调函数中的语句;
[2].$(function(){})内部仍然可以使用$(),并且不受外部$符冲突而重定义的影响;
[3].$(function(){}可调用多次,且不受调用位置的影响;
(4).each(function(i,this){}):对每一个匹配的DOM元素执行回调函数
[1].回调内部this默认指向的是DOM元素,而非jQuery对象,除用$(this)转化;
[2].return fase:终止并退出,return true: 终止当前循环并进入下一次循环;
(5).length属性:返回jQuery对象中的DOM元素数量
(6).get(n)和[n]: 按索引返回jQuery对象集合中匹配到的DOM元素;
[1].因为jQuery对象集合由DOM元素组成,所以可以用这个方法将jQuery对象转为DOM对象;
[2].不传参数,就是获取到所有的DOM元素.
(7).index(selector / element): index(选择器 / 元素)
[1].返回根据选择器或DOM元素在jQuery对象集合中的索引位置;
[2].不传参数则返回当前元素在jQuery元素集合中的位置;
--------------------------------------------------------------------------------------
4. jQuery的属性操作
(1).attr()和removeAttr(): 查询,设置和移除元素属性;
[1].attr('attr'): 获取属性;
[2].attr('attr','value'): 设置单个属性
[3].attr({attr,value,...}): 设置多个属性(对象字面量),属性值支持回调
(2).class类属性操作:addClass(),removeClass(),toggleClass(),设置,移除和切换元素的类名
[1].addClass('className'): 添加一个class属性;
[2].addClass('className'): 移除一个class属性;
[3].toggleClass('className'[,function(){}]):添加和删除class属性
(3).html(),text()和val(),获取元素的内容,均可接受回调返回的数据
[1].html(): 获取或设置元素中的html内容,function(i,old){...}
[2].text(): 获取或设置元素中的文本内容,function(i,old){...}
[3].val(): 获取表单元素中value属性的值,function(i,old){...}
--------------------------------------------------------------------------------------
5. jQuery中的css操作
(1).css():获取与设置元素的style属性,支持字符串和对象字面量与回调
(2).快捷方法:width(),height(),innerWidth()/inerHeight()/outerHeight()/outWidth()
--------------------------------------------------------------------------------------
6. jQuery中常用的选择器:
(1).通用选择器: *, 标签, 类选择器., id选择器 #
(2).层级选择器: 空格, >直接子元素, +相邻兄弟, ~ 所有兄弟
(3).属性选择器: [name]属性名, [name=value]名值, 支持简单的正则
(4).表单过滤器: 建议使用过滤方法替代
[1].位置: :first,:last,even偶数,odd奇数,eq(n),:gt(n),:lt(n)从0索引
[2].css3中的过滤器: :last-child,:first-child,nth-child()...从1索引
[3].表单过滤器:
第一组: 选择表单元素
1.:input: 选择<input><select><textarea><button>
2.:checkbox: 选择复选框 input[type="checkbox"]
3.:radio: 选择单选按钮 input[type="radio"]
4.:submit: 选择提交按钮 input[type="submit'] 或 button[type="submit"]
5.:reset: 选择重置按钮 input[type="reset'] 或 button[type="reset"]
6.:text: 只选择type="text"的表单元素
7.:password: 只选择type="password"密码框
8.:file: 只选择 input[type="file"]
9.:image: 只选择 input[type="image"]
第二组: 选择控件状态
1.:checked: 处于被选中状态,适用<checkbox>,<radio>
2.:disabled: 只选禁用元素
3.:enabled: 只选择启用元素
4.:focus: 只选择处于焦点的元素
5.:selectd: 选择处于选中状态的元素,适用于<select>
(5).内容过滤器:
[1].:contains('text'): 包含特定文本
[2].:empty(): 内容为空的元素
[3].:has(selector):包含匹配选择器的元素
[4].:parent: 至少包含一个子节点的元素
[5].:not(selector):获取排除掉匹配结果的元素
--------------------------------------------------------------------------------------
7. jQuery中常用的DOM操作
(1).插入与替换:
[1]append()和appendTo(): 将当前元素添加到父元素内部的尾部
1.$(父元素).append(当前元素);
2.$(当前元素).appendTo(父元素);
[2].prepend()和prependTo(): 将节点添加到父元素内部的头部
1.$(父元素).prepend(当前元素);
2.$(当前元素).prependTo(父元素);
[3].after()和insertAfter():将元素插入到当前节点的后面
1.$(前).after(后);
2.$(后).insertAfter(前)
[4].before()和insertBefore():将元素插入到当前节点的前面
1.$(后).before(前);
2.$(前).insertBefore(后)
[5].replaceWith()和replaceAll():替换掉匹配的html内容
1. $(原).replaceWith(新);
2. $(新).replaceAll(原);
(2).empty():删除匹配到的元素集合中所有的子节点
(3).remove(可用selector):删除匹配的元素
--------------------------------------------------------------------------------------
二.具体实例
1.jquery对象和dom对象的互换和简单使用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的导入与jQuery对象</title>
</head>
<body>
<ul>
<li>我是列表项01</li>
<li>我是列表项02</li>
<li>我是列表项03</li>
<li>我是列表项04</li>
<li>我是列表项05</li>
</ul>
<!--导入jQuery函数库-->
<script src="../lib/jquery.js"></script>
<script>
//DOM树创建完成就立即执行,不必等待外部资源(图片等)加载完成
// $(document)将整个document文档对象包装成jQuery对象
// 再调用jQuery的ready(),此时就可以用jQuery就可以访问全部文档内容了
$(document).ready(function(){
console.log($); // f(selector, context) {...}
console.log(typeof $); // "funciton"
console.log($()); // 返回:jquery的对象
console.log(typeof $()); // "object"
console.log($('li')); //将所有的li元素包装成一个jquery对象
// jquery对象是由由原始的dom的元素组成的一个数组,类似于dom元素集合
// 只有将dom元素通过$()函数包装(转换)成jquery对象后,才可以使用jquery提供的功能
// jquery对象数组中的每一个元素,都是一个dom元素对象,所以jquery与dom他们之间可以相互转换
//将第二个li转为dom对象
let li = $('li')[1];
//转为原生dom对象后,就可以使用原生的js语法来处理dom元素,例如,更新内容:
li.innerHTML = '<span style="color:red">我是新内容</span>';
//同样,还可以将转换后的li再转回jquery对象,这时又可以使用jquery中的方法来操作dom元素了
$('li').eq(1).html('<span style="color:lightgreen">我又回来了</span>');
});
//简写:直接传递一个匿名函数给$()
$(function(){
//暂时还没学习jquery方法,我们先用原生dom方法来操作元素
let li = $('li').get(3); // 从jquey对象中获取到第四个dom元素
li.innerHTML = '<span style="color:red">双来一波新内容</span>';
});
// 注意: $()可以执行多次,所以 $(function())也可以调用多次
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.jQueyr对象的核心访求与属性
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQueyr对象的核心访求与属性</title>
</head>
<body>
<script src="../lib/jquery.js"></script>
<script>
//1.$(selector/html/obj/function())
$('<ul class="list"></ul>').appendTo('body');
$('.list').append($('<li>iPhone Xr上市了,你的***还够用吗?</li>'));
//创建元素时添加元素
$('.list').append($('<li id="ten">我有10个,不怕</li>'));
//将创建元素的属性或方法,如果较多,推荐使用对象字面量的方式进行添加
$('.list').append($('<li>',{class:'iphone6sp',text:'我的6sp还能再战三年',click:function(){alert("iphone6sp")}}));
//$(function()):直接执行一个回调,这是执行jQuery代码最简单最常用的方式
$(function(){
$('.iphone6sp').css('color','red');
})
//each(function):对jquery对象中的每个元素进行回调处理,css()一会再详细介绍
$('li').each(function(){
//回调中this默认指向的DOM元素
// this.style.backgroundColor = 'lightgreen';
//如果想使用jquery中的方法,需要将DOM元素转为jquery对象
$(this).css('background-color','cyan');
});
//查看jQuery对象集合中的DOM数量
console.log($('li').length);
//get()和[],获取jquery对象中的dom,将jquery转为dom
$('li').get(0).style.backgroundColor = 'lightgreen'
$('li')[1].setAttribute('style','color: red');
console.log($('li').get().length); //不传参数返回全部元素
// index(selector/element)
console.log($('li#ten').index()); // 返回为第二个dom的数字索引: 1
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.属性操作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
</head>
<body>
<!--ul.list>li.item{列表项$}*3-->
<ul class="list">
<li class="item">列表项1</li>
<li class="item">列表项2</li>
<li class="item">列表项3</li>
</ul>
<script src="../lib/jquery.js"></script>
<script>
//常用属性操作
$('li:first-child').attr('id', 'first'); //设置新属性
console.log($('li').eq(0).attr('id')); // 查看属性,到控制台查看
$('li:eq(0)').removeAttr('id'); //移除属性
//因为class非常特殊,所以针对class专门定义一组操作方法
$('<style></style>').appendTo('head').text('.red {color: red}'); //创建临时样式
$('li:last-child').addClass('red'); // 添加类样式
$('li').last().removeClass('red'); // 移除类样式
//设置元素内容
$('li:eq(1)').html('<strong>php中文网</strong>');
console.log($('li').eq(0).text()); //查看元素文本内容
//因为当前元素是ul.list,所有要用find('input')将当前元素切换到文本框
$('.list').append('<input type="text">').find('input').val('请输入用户名'); //设置文本框内容
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.jQuery中的css操作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的css操作</title>
</head>
<body>
<script src="../lib/jquery.js"></script>
<script>
// (1).css():获取与设置元素的style属性,支持字符串和对象字面量与回调
// (2).快捷方法:width(),height(),innerWidth()/inerHeight()/outerHeight()/outWidth()
//在页面中创建一个div,进行设置
// $('<div>').attr('class','box').appendTo('body');
// $('<div>').attr({class:'box'}).appendTo('body');
$('<div>').addClass('box').appendTo('body');
$('.box').width(200);
$('.box').height(200);
// $('div').css('background-color', 'lightgreen'); //设置背景色
$('.box').css('backgroundColor', 'lightgreen'); // 属性名使用js驼峰语法也可以
//用链式调用进行简写
$('.box').width(200).height(200).css('background-color','skyblue');
//仅使用css方法,将所有样式全部以对象字面量方式进行设置
$('.box').css({
width: '200px',
height: '200px',
// backgroundColor: 'coral' //必须使用js驼峰语法
'background-color': 'coral' //'-'在js中是非常标识符,如果要用css语法,样式名要加引号
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.jQuery中常用的选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中常用的选择器</title>
<style>
.highlight {
background-color: yellow;
}
#title {
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<h3 id="title">前端课程</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>
<h3>JavaScrip</h3>
<ul>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</li>
</ul>
</li>
</ul>
邮箱:<input type="text"> <br>
密码:<input type="password"> <br>
<!--input:radio-->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<!--input:checkbox-->
<input type="checkbox" name="hobby[]" value="dance"checked>跳舞
<input type="checkbox" name="hobby[]" value="sing">唱歌
<br>
你的学历:
<select name="" id="">
<option value="">幼儿园</option>
<option value="小学" selected>小学</option>
<option value="">初中</option>
<option value="">其它</option>
</select>
<br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
<script src="../lib/jquery.js"></script>
<script>
//通用选择器
$('*').addClass('highlight'); //选择了页面中所有元素
$('li').addClass('highlight'); // 选择所有的 <li>标签
$('.highlight').css('color','red'); // 选择有class="highlight"的元素
$('#title').addClass('highlight'); // id选择器
//层级选择器
$('li:first h3').addClass('highlight'); // 选择第一个<li>下全部<h3>
$('li:first > h3').addClass('highlight'); // 仅选择子级元素,更深的级别忽略
//li:contains('HTML'):last 定位到第一个内容是html列表项上
$("li:contains('HTML'):last").addClass('highlight'); //验证定位效果
$("li:contains('HTML'):last + li").addClass('highlight'); //相依兄弟
$("li:contains('HTML'):last ~ li").addClass('highlight'); // 相邻所有兄弟
//属性选择器放在表单过滤器中一起讲
// 选择文本框
$('input[type="text"]').addClass('highlight'); // 属性选择器
$(':input').not(':submit').not(':disabled').addClass('highlight');
console.log($(':checkbox:checked').val()); // 当前选中的值
console.log($(':checkbox').not(':checked').val()); //未被选中的值
console.log($(':checkbox').val()); //默认返回被选中的值
console.log($(':input :selected').val()); // 注意过滤器之间必须要加空格,类:input并不针对select
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6. jQuery中的DOM修改删除操作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的DOM操作</title>
</head>
<body>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<script src="../lib/jquery.js"></script>
<script>
// (1).插入与替换:
// [1]append()和appendTo(): 将当前元素添加到父元素内部的尾部
// 1.$(父元素).append(当前元素);
// 2.$(当前元素).appendTo(父元素);
// [2].prepend()和prependTo(): 将节点添加到父元素内部的头部
// 1.$(父元素).prepend(当前元素);
// 2.$(当前元素).prependTo(父元素);
// [3].after()和insertAfter():将元素插入到当前节点的后面
// 1.$(前).after(后);
// 2.$(后).insertAfter(前)
// [4].before()和insertBefore():将元素插入到当前节点的前面
// 1.$(后).before(前);
// 2.$(前).insertBefore(后)
// [5].replaceWith()和replaceAll():替换掉匹配的html内容
// 1. $(原).replaceWith(新);
// 2. $(新).replaceAll(原);
// (2).empty():删除匹配到的元素集合中所有的子节点
// (3).remove(可用selector):删除匹配的元素
//元素内部添加
$('ul').append('<li>新元素1</li>'); // 添加到尾部
$('<li>新元素2</li>').appendTo('ul'); // 添加到尾部
$('ul').prepend('<li>新元素3</li>'); // 添加到头部
$('<li>新元素4</li>').prependTo('ul'); // 添加到头部
//元素前后添加
$('li:eq(2)').after('<li>新元素5</li>'); // 元素后添加
$('<li>新元素6</li>').insertAfter('li:eq(4)');
//替换:将li文本包含有: "新元素"内部的元素全部替换成指定元素
$('li:contains("新元素")').replaceWith('<li style="color:red">新元素</li>');
$('<li style="color:lightgreen">新元素</li>').replaceAll('li:contains("新元素")');
//删除
// $('li').remove(); // 不传参数是全部删除
// $('li').remove(':odd'); // 删除奇数(从0开始)
$('ul').empty(); // 等价于 $('li').remove();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三.问答: jQuery与原生javascript相比，有哪些优势，哪些劣势。
JavaScript的优点和缺点：
优点：
性能：由于JavaScript运行在客 户端，节省了web服务器的请求时间和带宽
轻量级的脚本语言，比较容易学习
运行在用户机器上，运行结果和处理相对比较快。
可以使用第三方附加组件来检查代码片段。
缺点：
安全问题：由于JavaScript在客 户端运行，可能被用于黑客目的。
渲染问题：在不同浏览器中的处理结果可能不同。
jquery与JavaScript相比，jQuery的语法更加简单。通过jQuery，可以很容易地浏览文档、选择元素、处理事件以及添加效果等，同时还允许开发者定制插件。
优点：
jQuery消除了JavaScript跨平台兼容问题。
相比其他JavaScript和JavaScript库，jQuery更容易使用。
jQuery有一个庞大的库/函数。
jQuery有良好的文档和帮助手册。
jQuery支持AJAX。
缺点：
由于不是原生JavaScript语言，理解起来可能会受到限制。
项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。