概念
封装javascript代码一个框架
特点
- 1.简化代码获得标签对象的代码
- 2.屏蔽浏览器差异
- 3.jquery插件自带UI效果
- 4.支持批量操作
使用步骤：
1.引用jquery的插件代码jquery.js文件 2.在网页中使用script标签引入js文件 <script ser = "外部jquery.js文件路径"></script> 3.使用 $("选择器") 作用：根据参数从网页中选择对应标签，返回 基本选择器： $("#id值") $(".class的值") $("标签名")
常用方法
jquerydom对象.css("样式name","样式的值");
jquerydom对象.text();//获得标签体的内容
jquerydom对象.text("值");//设置标签体的内容
jquerydom对象.html();
注意:
1.JavaScript对象不能调用方法，只有jQuery对象才能 2.将js的dom对象转化成jq的dom对象： var jqdom = $(jsdom); 3.jquery的dom对象的方法返回值，依然是当前jquerydom对象，所有部分方法支持链式调用
选择器
1.基本选择器 ID选择器：$("#id值") 标签选择器：$("标签名") 类选择器：$(".class值")
2.层级选择器（组合选择器） $(selA selB) 后代选择器：选择selA标签内部所有后代中的selB标签 $(selA>selB) 子代选择器：选择selA的直接子代元素中的selB $(selA+selB) 紧邻弟弟选择器 $(sel~sel后续弟弟) 后续所有弟弟选择器 3.过滤选择器 1.简单过滤 语法：$("选择器：过滤XX") ：first $(sel:first) 获得第一个元素 ：last 获得最后一个元素 ：eq（i） 获得下标i的元素 ：gt（i） 下标大于i的元素 ：lt（i） 下标小于i的元素 ：even 下标为偶数元素 ：odd 下标为奇数元素 ：not（selector） 获得所有元素，但是不包括select元素 2.内容过滤 ：empty 保留标签内部为空的标签 ：parent 保留标签内部有孩子的标签，没有孩子不保留 ：contains（text） 保留包含text文本元素的标签 ：has（内部后代标签selector） 保留内部包含selector对应标签的元素 3.可见性过滤 ：visible 获得显示的标签 ：hidden 获得隐藏的标签 4.属性过滤 [prop] 获得包含prop属性的标签对象 [prop=value] 获得包含prop属性并且属性值为value ：checked 获得选中的元素（复选框、单选钮） ：selected 获得被选中的元素
JQuery相关的DOM方法
访问属性： 1. text（） 获得标签体的普通文本 text（""） 修改标签的普通文本 2. css（"样式名字","样式的值"） 设置标签的样式 css（"样式名字"） 获得样式的值 3. html（） 获得标签体的内容（包含标签） html（"内容可以包含标签"） 4. val（） 获得input标签的value属性值 （相当于jsp的 dom.value） val（"文字"） 修改input标签的value值 5. prop（"属性名"，“属性值”） 设置标签的属性名对应的值 prop（"属性名"） 获得标签的属性值 事件绑定： 基于编程的事件绑定 语法：JQuery的dom对象.on（"事件名称"，事件函数）; 实例： $("xx").on("click",function(event){}); //event是事件对象 //event.target 事件原标签 JavaScript类型的dom对象 //this 事件源对象 JavaScript类型的dom对象 网页加载后运行 $(function(){ //网页加载完毕之后调用 }）;
动态绑定事件 语法：$("xx").live("click",function(){ //动态为后添加的元素，只要符合选择器的条件，就会动态增加事件绑定 })；
JQueryDOM操作方法
1.创建标签 语法：$（"标签全部内容标签+属性+文本"） 创建td标签： js var tddom = document.createElement("td"); jq var jqdom = $("<td></td>"); 2.添加标签 语法:jqdom.append(子标签的jq的dom); js document.getElementById("tr").appendChild(tddom); jq $("#tr").append(jqdom); 3.删除本标签 语法:jq的dom.remove(); 4.清空内部 语法：jq的dom.empty(); js: document.getElementById("tr").innerHTML =""; jq: $("#tr").empty(); $("#tr").html(""); 5.找到弟弟标签 语法：jqdom.next(); js nextSibling 6.找到哥哥标签 语法：jqdom.prev(); js xxx.previouSibling 7.所有儿子标签 语法：jqdom.children(); js: xx.childNodes 8.找到直接父标签 语法：jqdom.parent(); js xxx.parentNode
其他函数
1.jquerydom对象有多个 jqdom.size();//jquery对象中元素个数 2.获得i下标元素 jqdom.get(i);//获得的是JavaScript类型对象 jqdom.eq(i);//获得的是jquery类型对象 3.专门遍历jquery对象方法 jqDom数组.each(function(i,e){ //每次遍历运行 //得到当前对象 e （JavaScript类型） //得到当前遍历的下标 i }); 4.数据绑定函数 jqDom.data("key",value);//将value的值以key为名字，绑定在jqDom的标签上 jqDom.data("key");//获得绑定在jqDom标签上名字为key的值 5.find("选择器") 从jqDom标签内部（后代标签中）查找，符合参数选择器的标签返回 语法：jqDOM.find("选择器");
jQuery动画
效果方法： 显示消失 show()； //将标签从隐藏状态下逐步变成显示状态 show(毫秒); //显示过程所花的时间 hide(); //将标签消失 hide(毫秒); //消失过程所消耗的时间 淡入淡出 fadeIn(毫秒); //淡入 （显示） fadeOut(毫秒); //淡出 (消失) 卷动效果 slideUp 卷上消失 slideDown 卷下显示 自定义效果 标签dom.animate(样式对象，毫秒值); //使用一定的事件变化成指定的样式效果 样式对象：{"font-size":"100px","margin-left":"100px"}
JQuery插件
消息框toastr 1.引入js文件 jquery的js文件 toastr的js文件 2.引入相关的css文件 <!--导入jquery资源文件--> <script src="js/jquery-3.5.1.min.js"></script> <!--导入toastr的js资源文件--> <script src="js/toastr.min.js"></script> <!--导入toastr的css资源文件--> <link rel="stylesheet" href="css/toastr.min.css"/> API 语法：toastr.info("消息文字"); 方法：info、success、warning、error
放大镜jqzoom 1.导入资源 2.准备一个img的小图 3.给img外部套一个a标签，将大图的路径放在a标签中的href <a href="大图"> <img src="小图"> </a> 4.使用放大镜插件，添加放大效果和事件绑定 $("a标签".jqzoom(); 日期插件 1.导入资源 2.给input输入框添加日历图标效果 <input class="Wdate"> 3.绑定显示日历的事件函数 <input class="Wdate" onclick="WdatePicker()"> 表单验证插件 validate