概念
封装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