走进jQuery
一、什么是JS框架和库
JS框架和库都是将原本JS的部分功能集合成一个JS文件,并且在使用的时候,引入这个文件,便可以使用这里面的功能。
库和框架区别:
- 框架(framework)通常是强制执行解决方案的一种方式,就像一个模具,需要你把所需的原材料放在模具里面,然后成品就会出来,由于模具已经建好,所以原材料不能乱加,人家要什么你就给什么,这时控制权在模具,框架就像一门语言,有自己的世界。
- 库(library)的形式就不同,控制权在用户手中,想实现什么功能就实现什么功能,库只是帮你封装了大量实用的函数,帮助你实现自己的目的。
二、什么是jQuery
jQuery也是JS框架中的一种,它是2006年由一个17岁的美国人——约翰·莱西格创作出来的,可以说这是曾经世界上流行最为广泛的JS框架,没有之一,统治了JS十多年时间。
jQuery官网
2.1、jQuery优点
- 轻量级
- 免费开源
- 完善的文档
- 丰富的插件支持
- 完善的Ajax功能
- 不会污染顶级变量
- 强大的选择器功能
- 出色的DOM操作封装
- 出色的浏览器兼容性
- 可靠的事件处理机制
- 隐式迭代和链式编程操作
主旨口号:write less,do more(写的更少,干的更多,以更少的代码,实现更多的功能)
2.2、jQuery的基本功能
- 访问和操作DOM元素
既减少了代码的编写,又大大提高 了用户对页面的体验度。 - 控制页面的CSS样式
更方便快捷的来操作CSS样式,且jQuery 已经完成了浏览器兼容性处理。 - 完善的Ajax网络请求
使用AJAX可以极大提高用户体验和程序性能,jQuery框架中提供了专门处理网络请求的AJAX组件,使用jQuery中提供的方法来实现AJAX网络请求。 - 页面标签事件处理
让表现层与功能开发分离 - 整套的动画特效实现
可以满足开发中常见的动画效果实现,而且使用简单方便。 - 好用的工具方法和强大的插件支持
利用插件机制程序员可以方便的对原有的框架和功能进行扩展。这些插件的使用,极大丰富了页的展示效果
三、书写jQuery程序
3.1、引入方式
- 引入jquery-3.5.1.min.js文件,通过script标签的src属性引入;
- 建议在body的尾部引入,效率更高;
- 注意:不要在引入文件的那个script标签之间书写代码
- 版本问题:
- 要做IE兼容性处理,建议引入1.0版本
- 涉及安全性问题,需要3.0以上
3.2、入口函数
JQ的入口函数相当于原生JS的window.onload事件。
// 原生JS写法:
window.onload = function(){...}
// jQuery写法一:
jQuery(document).ready(function(){...})
console.log(jQuery===$);//说明$就是jQuery对象的简写
// jQuery写法二:
$(document).ready(function(){...})
// jQuery写法三:
$().ready(function(){...})
// jQuery写法四*重点*:
$(function(){...})
四、常用方法
4.1、事件绑定
语法:
$(selector).事件(function(){...});
$(selector).on(事件, function(){...});
代码举例:
// 原生的事件绑定
var btns = document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
console.log(this);
}
}
// onclick事件在JQ里可以直接写成click
$('button').click(function(){
console.log(this);
})
// 没有封装的事件需要用on
$('body').on('touchstart', function () {
$('p').css({'background': '#f00'});
console.log("123");
});
4.2、显示、隐藏与切换
语法:
$(selector).show(time); // 显示, time表示动画时长,单位为毫秒,下同
$(selector).hide(time); // 隐藏
$(selector).toggle(time); // 切换
//注意:凡是函数都要加 括号,函数就是所谓的方法,方法就是函数
五、访问html内容和访问文本内容
5.1、JQ中访问和修改文本
语法:
$(selector).html(); // 获取与修改选择器中的html内容
$(selector).text(); // 获取与修改选择器中的文本内容
例:
$('div').text('我是div标签');
$('div').html('<p>我是p标签</p>');
5.2、jQuery对象和DOM对象相互转换
使用jQuery($)获取的页面元素叫做JQ对象
而原生JS中使用document获取的页面元素称为JS对象(DOM对象)
不同对象之间是不能使用对方的方法的。也就是说JS的对象只能JS调用,如果JQ想要用的话,就必须进行对象转换。比如:this<------>$(this)
$("div").click(function(){
$(this).html("文本内容")
})
JS转JQ对象:
// 使用$()包裹起来就可以用转成成JQ对象
document.getElementsByTagName(element)
==>
$( document.getElementsByTagName(element) )
JQ转JS对象:
// 方法一:
$(element).get(0) ==> document.getElementsByTagName(element)
// 方法二:
$(element)[0] ==> document.getElementsByTagName(element)
六、css样式修改
语法:
$(selector).css()
css本身也是一个函数,其中的格式有两种:
第一种为单属性修改:
$(selector).css('key', 'value'); //只能修改一个属性和一个属性值
第二种为多属性修改:
$(selector).css({
'key': 'value',
'key': 'value'
....
}) //可以多属性修改,理论上可以修改无限多个属性
七、标签属性的修改
7.1、修改属性的两个方法
src、href、class、style、action等都属于标签属性,标签属性的修改不包括在css属性修改的范围之内。它的修改方法是:
$(element).attr(“k”,”v”);
$(element).prop(“k”,”v”);
书写格式与css属性修改相同。
7.2、prop和attr的区别
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
<input id="chk1" type="checkbox" />
<input id="chk2" type="checkbox" checked="checked" />
像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true
如果上面使用attr方法,则会出现:
console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//"checked"
尤其的在设置的时候prop的强大就体现出来了
// $("#chk2").attr("checked",undefined);
$("#chk2").prop("checked",false);
八、jQuery常用选择器
8.1、基础选择器
基本选择器 | 语法 | 功能 |
---|---|---|
ID选择器 | $(‘#ID名’) | 找到匹配指定ID的元素 |
元素(标签)选择器 | $(‘element名’) | 找到指定的元素 |
class选择器 | $(‘.class名’) | 找到匹配指定class的元素 |
通配符选择器 | $(‘*’) | 匹配所有元素 |
并集(组合)选择器 | $(‘sel,sel’) | 多个选择器匹配的元素合并 |
层级选择器 | 语法 | 功能 |
---|---|---|
后代选择器 | $(‘parent child’) | 当前元素的所有后代元素 |
直接后代选择器 | $(‘parent>child’) | 当前元素所有的子元素 |
下一个兄弟 | $(‘prev+next’) | 当前元素的下一个元素 |
后面所有兄弟 | $(‘prev~siblings’) | 当前元素后面的所有兄弟元素 |
提供可练习的html代码:
<button>选择所有段落标签</button>
<button>选择class为left的标签</button>
<button>选择id为box的标签</button>
<button>选择所有不分类型标签</button>
<button>选择ul里面的li标签</button>
<button>选择body下的第一级所有标签并添加边框</button>
<button>选择p后的一个div</button>
<button>选择p后的所有div</button>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<div class="left">类选择器</div>
<div class="left">类选择器</div>
<div id="box">id选择器</div>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
8.2、筛选选择器
基本筛选选择器 | 语法 |
---|---|
获取第一个元素 | $(‘ele:first’) |
获取最后一个元素 | $(‘ele:last’) |
获取指定索引的元素 | $(‘ele:eq(index)’) 方法eq(index) |
获取所有元素除某个 | $(‘ele:not(selector)’) |
获取索引为偶数的元素 | $(‘ele:even’) |
获取索引为奇数的元素 | $(‘ele:odd’) |
获取大于该索引元素 | $(‘ele:gt(index)’) |
获取小于于该索引元素 | $(‘ele:lt(index)’) |
获取所有标题类型元素 | $(‘ele:header’) |
提供可练习的html代码:
<button>选择第一个li</button>
<button>选择最后一个li</button>
<button>选择所有li排除最后一个</button>
<button>选择所有li排除第二个</button>
<button>选择所有索引值为偶数个li</button>
<button>选择所有索引值为奇数个li</button>
<button>选择大于第5个的li</button>
<button>选择小于第5个的li</button>
<button>选择等于第5个的li</button>
<button>选择所有标题标签</button>
<ul>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
</ul>
<h1>标题1标签</h1>
<h2>标题2标签</h2>
<h3>标题3标签</h3>
8.3、级别选择器相关方法
8.3.1、parent方法
$(selector).parent()
表示选中所有匹配元素的唯一父元素。
8.3.3、 children方法
$(selector).children()
表示选中某个元素的子级元素,括号内有写元素,表示选中子级中的某个元素,如果没有书写,则表示选中子级的所有元素