概述
jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
引入jquery文件
<!-- 引入在线路径 -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> -->
<script src="../jquery/jquery.min.js"></script>
jquery.js 是未压缩版
jquery.min.js是压缩版
引入的jqery标签的顺序要在你的js之前引入优点
- 访问和操作dom元素更简单;
- 控制页面样式更优秀;
- 对页面事件处理简单;
- 可扩展的jquery插件。
jquery和js的不同
jquery是对js的封装，js能做到的jquery不一定能做到，但是jquery能做到的js一定能做到
入口函数
//jquery入口函数
$(function(){
console.log(jQuery)
console.log($)
})入口函数的不同点
- JavaScript 的入口函数是会等到所有内容，包括外部图片之类的文件加载完后，才执行。
- jQuery的入口函数会等到全部DOM元素加载完毕，但不会等到图片也加载完毕，就会提前执行。
- JS的入口函数如果有多个，后面创建的入口函数会覆盖前面创建的入口函数，说白了就只能有一个入口函数
- jQuery的入口函数可以有多个，后面创建的入口函数不会覆盖前面的入口函数。
js对象和jquery对象的相互转换
//获取js对象
let jsBox = document.getElementsByClassName('box')[0];
console.log(jsBox)
// jsBox.addEventListener()
//获取jquery对象
console.log( $('.box'))
//js对象和jquery对象的方法是不能公用的
// $('.box').addEventListener('click',function(){
// console.log(123)
// })
//js对象和jquery对象之间的相互转换
// js对象转 jquery对象
$(jsBox).css('color','red')
//jquery转js对象
// 通过[索引] 或者 get(索引)的方式
$('.box').get(0).addEventListener('click',function(){
console.log('被点击了')
})jquery选择器
过滤选择器
表单过滤选择器
操作内容
修改样式
操作类名
jquery控制元素显示和隐藏
jquery事件
$().on(事件, 子对象,data
)
// 其中 子对象可写可不写;// 事件: 使用最常用的map键值对的方式进行编写:
$().on(
{ '事件类型':function(){},
'事件类型':function(){}
}
)
$().off('被移除的事件');
// $('div').on({
// 'click': function (e) {
// console.log('单机事件')
// console.log($(e.currentTarget).attr('index'))
// },
// 'dblclick':function(){
// console.log('双机事件')
// },
// 'mouseover':function(){
// console.log('划入事件')
// }
// }
// )
$('body').on('click','div',function(){
console.log(123)
})jquery遍历方式
$('ul>li').each(function(i,e){
//i 索引
//e 当前的元素
console.log(i,e)
})操作节点
$('button:eq(1)').on('click',function(){
//清空后代元素
$('ul').empty();
})
$('button:eq(2)').on('click',function(){
//删除元素
$('ul').remove();
})代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery/jquery.js"></script>
</head>
<body>
<button>添加</button>
<button>empty</button>
<button>remove</button>
<button>查询父元素</button>
<button>查询子元素</button>
<button>查询后代元素</button>
<button>返回除自已以外的所有兄弟元素</button>
<button>返回下一个兄弟元素</button>
<button>返回后面所有的兄弟元素</button>
<ul>
<li class="one">
<span>456</span>
</li>
</ul>
</body>
<script>
$(function () {
$('button:eq(0)').on('click', function () {
//创建节点
let li = document.createElement('li');
$(li).text('我是li')
//将 li节点 添加到ul中
//父元将将子元素添加到末尾;
$('ul').append(li)
//父元将将子元素添加到开头;
// $('ul').prepend(li)
//把a追加到b的内部，位置位于b的结尾;
// $(li).appendTo($('ul').get(0))
// $(li).prependTo($('ul').get(0))
//将元素添加到此元素的后面
// $('.one').after(li)
//将元素添加到此元素的前面
// $('.one').before(li)
})
$('button:eq(1)').on('click', function () {
//清空后代元素
$('ul').empty();
})
$('button:eq(2)').on('click', function () {
//删除元素
$('ul').remove();
})
$('button:eq(3)').on('click', function () {
//查询父元素
console.log($('ul').parent());
})
$('button:eq(4)').on('click', function () {
//查询子元素
console.log($('ul').children());
})
$('button:eq(5)').on('click', function () {
//查询后代元素
console.log($('ul').find('*'));
})
$('button:eq(6)').on('click', function () {
//查询除自己所有的兄弟元素
console.log($('.one').siblings());
})
$('button:eq(7)').on('click', function () {
//查询下一个兄弟元素
console.log($('.one').next());
})
$('button:eq(8)').on('click', function () {
//获取之后所有的兄弟元素
console.log($('.one').nextAll());
})
})
</script>
</html>
