jQuery

2022-01-11 00:41:55

jQuery

概念：jQuery=JavaScript+query，是辅助JavaScript开发的类库，可以非常容易的操作DOM对象，是目前世界上最流行的js库。

jQuery初体验：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//使用$()代替window.onload
	$(function(){
		//使用选择器获取按钮对象，随后绑定单击响应函数
		$("#btnId").click(function(){
			//弹出Hello
			alert(‘Hello‘);
		});
	});

</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

常见问题：

使用jQuery要引入jQuery库。注意：包不要放在 web-inf/lib/ 下，最好放在 webcontent 下，和web-inf 同级。
jQuery中的$是什么？它是jQuery的核心函数

核心函数：$()

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数

传入参数为 [ 函数 ] 时：表示页面加载完成之后，执行此函数。相当于 window.onload = function(){}
```
$(function(){
		alert("hello")
});
```

传入参数为 [ HTML 字符串 ] 时：会为我们创建这个 html 标签对象

$("<div>" +
            "    <span>div-span1</span>" +
            "    <span>div-span2</span>" +
            "</div>").appendTo("body");//向body标签体中添加许多标签，注意一定要在body标签体被加载之后添加。

传入参数为 [ 选择器字符串 ] 时：会生成此选择器指定的jQuery对象。
传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 jQuery 对象

jQuery对象和DOM对象区分

DOM对象：通过getElementById()等方法查询出来的对象是DOM对象。
DOM 对象 Alert 出来的效果是：object HTML 标签名 Element
jQuery对象：通过 JQuery 提供的 API 创建的、通过 JQuery 包装的 Dom 对象都是jQuery对象。
jQuery 对象 Alert 出来的效果是：object Object
jQuery对象的本质：jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
注意：jQuery 对象和 DOM对象的属性方法都是不通用的。
Dom 对象和 jQuery 对象互转
1. dom--> jQuery ：$(DOM对象)即可
2. jQuery-->dom：先有jQuery对象，在通过数组的索引取出相应的DOM对象。jq.[index]或jq.get(index)
```
var $div = $("div");//生成jQuery对象
var firstDiv = $div[0];//取出DOM对象
var SecondDiv = $div.get(1);
```

选择器

基础选择器
$(“#id”); 根据 id 查询标签对象
$(“.class”); 根据类名查询标签对象
$(“tagName”); 根据标签名查询对象*: 选择所有的元素
selector1,selector2: 并集选择器，将两个选择器的结果合并返回
层级选择器
1. ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
2. parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
3. prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
4. prev ~ sibings 之后的兄弟元素选择器：匹配prev元素之后的所有兄弟siblings 元素
基本过滤器
1. :first 获取第一个元素
2. :last 获取最后的元素
3. :not(selector) 去除所有与给定选择器匹配的元素
4. :even 匹配所有索引值为偶数的元素
5. :odd 匹配所有索引值为奇数的元素
6. :eq(index) 匹配一个给定索引值的元素
7. :gt(index) 匹配所有大于给定索引值的元素
8. :lt(index) 匹配所有小于给定索引值的元素
9. :header 匹配如 h1, h2, h3 之类的标题元素
10. :animated 匹配所有正在执行动画效果的元素
```
//选择没有执行动画的最后一个div元素
$("div:not(:animated):last").css("background", "#bbffaa");
```
内容过滤器
1. :contains(text) 匹配包含给定文本的元素
2. :empty 匹配所有不包含子元素或者文本的空元素
3. :parent 匹配含有子元素或者文本的元素
4. :has(selector) 匹配含有选择器所匹配的元素的元素
```
//选择class为mini的div 元素
    $("div:has(.mini)").css("background", "#bbffaa");
```
属性过滤器
1. [attribute]匹配包含给定属性的元素。
2. [attribute=value]匹配给定的属性是某个特定值的元素
3. [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
4. [attribute^=value] 匹配给定的属性是以某些值开始的元素
5. [attribute$=value] 匹配给定的属性是以某些值结尾的元素
6. [attribute*=value] 匹配给定的属性包含某些值的元素
7. [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。
```
//选取 含有 title 属性, 且title 属性值不等于 test 的 div 元素
	$("div[title][title!=‘test‘]").css("background", "#bbffaa");
```
表单元素过滤器
1. :input 匹配所有input, textarea, select 和 button 元素
2. :text 匹配所有文本输入框
3. :password 匹配所有的密码输入框
4. :radio 匹配所有的单选框
5. :checkbox匹配所有的复选框
6. :submit 匹配所有提交按钮
7. :image 匹配所有 img 标签
8. :reset 匹配所有重置按钮
9. :button 匹配所有 input type=button或<button>按钮
10. :file 匹配所有 input type=file 文件上传
11. :hidden 匹配所有不可见元素,display:none 或 input type=hidden
12. :enabled 匹配所有可用元素
  
  :disabled 匹配所有不可用元素
  
  :checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象
  
  :selected 匹配下拉框被选中的所有option
```
var $selectedOptions = $(":checkbox > option : selected");//获取下拉框被选中的所有option
```
jquery元素筛选
1. eq() 获取给定索引的元素功能跟 :eq() 一样
2. first() 获取第一个元素功能跟 :first 一样
3. last() 获取最后一个元素功能跟 :last 一样
4. is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回true
5. not(exp) 删除匹配选择器的元素功能跟 :not 一样
6. has(exp) 返回包含有匹配选择器的元素的元素功能跟 :has 一样
7. find(exp) 返回匹配给定选择器的后代元素功能跟 ancestor descendant 一样
8. filter(exp) 留下匹配的元素
9. parent() 返回父元素
10. children(exp) 返回匹配给定选择器的子元素功能跟 parent>child 一样
11. next() 返回当前元素的下一个兄弟元素功能跟 prev + next 功能一样
12. nextAll() 返回当前元素后面所有的兄弟元素功能跟 prev ~ siblings 功能一样
13. nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
14. prev(exp) 返回当前元素的上一个兄弟元素
15. prevAll() 返回当前元素前面所有的兄弟元素
16. prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
17. siblings(exp) 返回所有兄弟元素
18. add() 把add 匹配的选择器的元素添加到当前 jquery 对象中

对象操作

内容操作
1. html() 可以设置和获取标签中的内容，不传参数是获取，传递参数是设置，设置的内容将覆盖原有的内容。跟 dom 属性 innerHTML 一样。
2. css() 能改变标签的css。
3. text() 它可以设置和获取起始标签和结束标签中的纯文本内容。跟 dom 属性 innerText 一样。
4. val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样
5. remove() 可以移除标签
属性操作
1. 通用属性操作
  1. attr() 设置和获取属性的值(不推荐操作 checked、readOnly、selected、disabled 等等)
    attr 方法还可以操作非标准的属性。比如自定义属性$("#one").attr("abc","cde")
  2. removeAttr() 删除属性
  3. prop() 设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等
  4. removeProp() 删除属性
2. 对class属性操作
  1. addClass 添加class属性值，多个class属性用空格分开。$("button").addClass("animated bounce")
  2. removeClass() 删除class属性值
  3. toggleClass() 切换class属性：toggleClass("one") 如果元素对象上存在class=“one”,就将属性删除掉。如果不存在class=“one”，就添加。
增删改操作
1. obj1.append(obj2) 对象1将对象2添加到元素内部、末尾
2. o1.prepend(o2) 对象1将对象2添加到元素内部、开头
3. o1.appendTo(o2) 对象1被添加到对象2的内部、末尾
4. prependTo
5. o1.clone().appendTo(o2) 对象1被复制到了对象2的元素内部、末尾
6. o1.after(o2) 将对象2添加到对象1的后边，二者是兄弟
7. before
8. o1.insertAfter(o2) 对象1会被添加到对象2后边
9. insertBefore
10. obj.remove() 将对象删除
11. empty() 清空对象的所有后代元素，但是保留该对象

动画

三种方式显示和隐藏元素
1. 默认显示和隐藏方式
  1. show([speed,[easing],[fn]])
  2. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
  3. easing：用来指定切换效果，默认是"swing"，可用参数"linear".swing代表慢快慢，linear是匀速的。
  4. fn：在动画完成时执行的函数，每个元素执行一次。
  5. hide([speed,[easing],[fn]])
  6. toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
  1. slideDown([speed],[easing],[fn])
  2. slideUp([speed,[easing],[fn]])
  3. slideToggle([speed],[easing],[fn])
3. 淡入淡出显示和隐藏方式
  1. fadeIn([speed],[easing],[fn])
  2. fadeOut([speed],[easing],[fn])
  3. fadeToggle([speed,[easing],[fn]])

遍历

传统方式：获取jq对象数组，通过for循环遍历。

jq对象.each(callback)

jq对象数组.each(function(index,element){}); index:就是元素在集合中的索引 element：就是集合中的每一个元素对象
回调函数

$("li").each(function (index,element){
    if("上海"==$(element).html()){
        //如果当前function返回为false，则结束循环(break)。
        //如果返回为true，则结束本次循环，继续下次循环(continue)
        return true;
    }
    alert(index+":"+$(element).html());
})

$.each(object, function(index,ele){ statement });

for(ele of jq对象数组)of：jquery3.0之后提供的方式

事件

JS 的事件是 onclick, jQuery 的事件都去掉了 on，直接就是 click。

事件绑定

jquery标准的绑定方式： jq对象.事件方法(回调函数)；
如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
on绑定事件/off解除绑定
jq对象.on("事件名称",回调函数)
jq对象.off("事件名称")：如果off方法不传递任何参数，则将组件上的所有事件全部解绑
事件切换：toggle
jq对象.toggle(fn1,fn2...)：当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

$( function(){} );和window.onload = function(){}的区别？

他们分别是在什么时候触发？

jQuery是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。

原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。
他们触发的顺序？

jQuery页面加载完成之后先执行

原生 js 的页面加载完成之后
他们执行的次数？

原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。

jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

事件的冒泡
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

如何阻止事件的冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

<script type="text/javascript">
			$(function(){
				$("#content").click(function (){
					alert("div被点击了。。。")
				});
				$("span").click(function (){
					alert("span被点击了。。。");
					return false;
				});
			})
		</script>
<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>
		
		<div id="msg"></div>	
		
		<br><br>
		<a href="http://www.hao123.com">WWW.HAO123.COM</a>	
	</body>

插件

增强jQuery的功能

$.fn.extend(object)：增强通过Jquery获取的对象的功能 $("#id")
$.extend(object)：增强JQeury对象自身的功能

$.extend({
            max:function (a,b){
                return a>b?a:b;
            },
            min:function (a,b){
                return a<b?a:b;
            }
        });
        //调用全局方法
        var max = $.max(4,3);
        //alert(max);

        var min = $.min(1,2);
        alert(min);

jQuery

码农公寓

jQuery

核心函数：$()

jQuery对象和DOM对象区分

选择器

对象操作

动画

遍历

事件

插件

相关文章