走进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() 表示选中某个元素的子级元素，括号内有写元素，表示选中子级中的某个元素，如果没有书写，则表示选中子级的所有元素
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
