首页 > 其他分享> > jquery基础及插件

jquery基础及插件

2020-08-13 22:03:40 作者：互联网

选择器：

1.基本选择器：

ID选择器：      $("#id值")
标签选择器：     $("标签名")
类选择器：       $(".class值")

2.层级选择器[组合选择器]：

$(selA selB)    后代选择器：选择selA标签内部所有后代中的selB标签
$(selA>selB)    子代选择器：选择selA标签直接子代中的selB标签
$(selA+selB)    紧邻弟弟选择器
$(selA~selB)    后续所有弟弟选择器

3.过滤选择器

①简单过滤选择器

：first      $(sel:first)        获得第一个元素
：last                           获得最后一个元素
：eq(i)                          获得下标i的元素
：gt(i)                          下标大于i的元素
：lt(i)                          下标小于i的元素
：even                           下标为偶数元素
：odd                            下标为奇数元素
：not(selector) 【重点】           获得所有元素，不包括select元素

②内容过滤器

：empty                           标签体内部为空的标签
：parent                          标签体不为空的元素
：contains(text)【重点】            包含某个text文本元素
：has(内部后代标签selector)【重点】    过滤保留内部包含selector对应标签的元素

③可见性过滤选择器【重点】针对--display:none

:visible                           获得显示的标签
：hidden                           获得隐藏标签

④属性过滤选择器

[prop]                            含有prop属性的标签对象（明确写了prop属性）  
[prop_value]                      含有prop属性并且prop的属性值为value
表单特有的过滤：
     ：checked                     过滤保留被选中的元素（复选框，单选钮）
     ：selected                    被选中的元素

jquery中的dom操作

1.创建标签
   语法： $("标签全部内容+属性+文本")
   创建td标签：
   js: var tddom = document.createElement("td");
   jq: var jqdom = $("<td colspan='2'></td>");
2.添加标签
   语法：jqdom.append(子标签的jq的dom);
   在tr内添加一个td
   <tr id="tr"></tr>
   js: document.getElementById("tr").appendChild(tddom);
   jq: $("#tr").append(jqdom);
       $("#tr").append($("<td>武松</td>"))；
3.删除本标签
   语法：jq的dom.remove();
4.清空内部
   语法：jq的dom.empty();
   清空tr标签内的所有内容
   <tr id="tr">
       <td>asd</td>
   </tr>
   js: document.getElementById("tr").innerHTML="";
   jq: $("#tr").empty();
       $("#tr").html("");
5.找到弟弟标签
   语法：jqdom.next();
   js: nextSibling
   jq: next()
6.找到哥哥标签
   语法：jqdom.prev();
   js: xxx.previouSibling
7.所有儿子标签
   语法：jqdom.children()
   js: xxx.childNodes
8.找到直接父亲标签
   语法：jqdom.parent();
   js: xxx.parentNode

基于编程的事件绑定

核心语法：
jQuery的dom对象.on("事件名称"，事件函数)；

实例代码：
$("xx").on("click",function(event){
    //event是事件对象
    //event.target   事件的源标签   javascript类型的dom对象
    //this           事件源对象     javascript类型的dom对象
    如果要对当前的事件源对象调用jquery方法
    $(this).text();
    //当标签发生click事件后，执行。
})

动态绑定事件：
$("xx").live("click",function(){
    //动态为后添加的元素，只要符合选择器的条件，动态增加事件绑定
})

补充函数

1.jquerydom对象多个.
	jqdom.size();//jquery对象中元素个数
2.获得i下标元素
	jqdom.get(i);//获得i下标的dom对象(javascript类型的dom对象)
	jqdom.eq(i);//获得i下标的dom对象(jQuery类型的dom对象)
3.专门遍历jquerydom的方法
jqDom数组.each(function(i,e){
	//每次遍历运行
    //得到当前对象 e (javascript类型的dom对象)
    //$(e) jquery类型的
    //得到当前遍历的下标
})
4.数据绑定函数
	jqdom.data("key",value);//将value的以key为名字，绑定在jqdom的标签上.
	jqdom.data("key");//获得绑定在jqdom标签上名字为key的值.
5.find("选择器")[iquery自定义插件][了解]
	语法：jqdom.find("选择器")；
    从jqdom标签内部(后代标签中)查找，符合参数选择器的标签返回。
6.$("表单").serialize();//会将表单数据按照   name=value&name=value 自动拼接返回。
7.给后添加的标签，绑定，动态绑定
//jquery 1.8以前
$("标签").live("click",function(){
    事件函数代码
})
//jquery 1.9以后
$("父标签的选择器").on('事件名click','后添加的元素的选择器'，function(){
    事件函数
})
//$ 后面的选是on方法第二个参数选择器的父元素。

jQuery动画效果

效果方法：
显示消失
	show();//将标签从隐藏状态下逐步变成显示状态
	show(毫秒)；//显示过程所花的时间
    hide();//将标签消失
	hide(毫秒);//消失过程所消耗的时间

淡入淡出
    fadeIn(毫秒);//淡入  （显示）
	fadeOut(毫秒);//淡出  （消失）

卷动效果：（卷帘门效果）
    slideDown(毫秒);//卷下   显示
	slideUp(毫秒);//卷上     消失

自定义效果：
标签dom.animate(样式对象，毫秒值);
	样式对象：
   		 {"font-size":"100px","margin-left":"100px"	}
	//含义：使用一定的事件变化成指定的样式效果。

jquery插件

消息框 toastr

1.引入文件

2.使用方法及效果显示

3.设置位置及其他方法

放大镜 jqzoom

1.导入资源

jquery文件
放大镜的js文件
css文件

2.使用放大

1.准备一个img小图
<img src="small.jpg">
2.img外部套一个a标签，将大图的路径放在a标签的href
<a href="大图">
    <img src="small.jpg">
</a>
3.使用放大镜插件，添加放大效果和事件绑定。
	$("a标签").jqzoom();

日期插件 datepicker

1.引入资源
	注意：导入项目的资源全部导入，文件相对路径最好不要改变。
	<!--引入wdatepicker.js-->
<scriptn src="wdatepicker.js"></script>
2.给input输入框添加日历图标效果.
	<input class="Wdate">
3.提供好了显示日历的事件函数 WdatePicker
	<input class="Wdate" onclick="WdatePicker()">