概述
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>
