jQuery를 프런트 엔드 학습 지식

DOM 및 BOM 브라우저와 상호 작용하는 방법을 알고 이전에 배운,이 블로그는 우리가 jQuery를 그것의 역할을 무엇인가 배울 이전의 연구에 의해, JS 문을 실현하기 위해 매우 긴 찾기 어렵지 않다 다음의 jQuery 지식을 소개하고합니다 함수 광고 문 많이 쓰고, JQuery와 DOM 객체, jQuery 오브젝트의 생성을 마무리 명령문 JS 비교 코드를 작성하고, jQuery를 훨씬 더 간단하다.

A, jQuery를 선택기 및 필터

1. 선택기

1.id选择器							$("#id")
2.标签选择器							$("标签名")
3.class选择器						$(".class名")
4.所有元素选择器						$("*")
5.子子孙孙选择器						$("x y")
6.儿子选择器							$("x>y")
7.弟弟选择器							$("x~y")(与自己同一层级的元素)
8.毗邻选择器							$(“x + y“)(找到紧挨在x后面的y元素)
9.属性选择器							[属性名]			
								 	[属性名=value]// 属性等于
									[属性名!=value]// 属性不等于
属性选择器例子
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");  		取属性值为checkbox的标签
$("input[type!='text']");// 		取属性值为text的标签

2. 필터

1.:first 					$("div:first")				找出div后代元素的第一个元素
2.:last						$("div:last")				找出div后代元素的最后一个元素
3.:eq(index)				$("div:eq(inde索引数字)")	找出div后代中指定索引位置的元素
4.:even 					$("div:even")				找出所有索引值为偶数的元素
5.:odd						$("div:odd")				找出所有索引值为奇数的元素
6.:gt(index)				$("div:gt(index)")		 	找出所有大于给定索引值的元素
7.:lt(index)				$("div:lt(index)")			找出所有小于给定索引值的元素
8.:not(元素选择器)			$(div:not(.c1))				移除所有满足not条件的标签
9.:has(元素选择器)			$("div:has(.c1)")		 	选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
10.:text
11.:password
12.:file
13.:radio
14.:checkbox
15.:submit
16.:reset
17.:button
11-17为表单筛选器 具体用法如下:
$(":checkbox")		找出所有的checkbox元素

등록 양식 객체에 폼 필터 (초점 그릴)

:enabled			找出不可用的标签
:disabled			找出可用的标签
:checked			找到被选中的标签(checkbox,radio)
:selected			找到被选中的标签(option)

3. 심사 방법

用法:		$("#id").方法
.next()	//下一个元素(同级)	.nextAll()	//下面的所有元素	.nextUntil("#i2")	//下面直到id为i2的所有元素
.prev()	//上一个元素(同级)	.prevAll()	//上面的所有元素	.prevUntil("#i2")	//上面直到id为i2的所有元素
.parent()//父亲元素			.parents()	//所有的父辈元素	.parentsUntil(“#i2”)//查找父辈的所有元素直到遇见id为i2的元素
$("#id").children()	//获取id为i2的儿子们元素
$("#id").siblings()	//获取id为i2的兄弟们元素

찾기
지정된 표현식과 일치하는 모든 요소를 검색 할 수 있습니다. 이 기능 요소는 처리되는 자손 좋은 방법을 찾는 것이다.
그의 가장 높은 효율을

用法:		$("div").find("a")

4. 동작 태그

1. 동작 패턴 (주로 동작 클래스)

1.addClass();// 添加指定的CSS类名。
2.removeClass();// 移除指定的CSS类名。
3.hasClass();// 判断样式存不存在
4.toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。

2. 작동 위치

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

3. 치수

height()
width()
innerHeight() //内容区加padding
innerWidth()
outerHeight()//内容加padding加border
outerWidth()

4. 텍스트 조작

1.HTML代码
1.	.html		取得所有匹配元素的内容
2.	.html(val)		设置所有匹配元素的html内容,用于添加标签
1.文本值
1.	.text			取得所有匹配元素的内容
2.	.text(val)		设置所有匹配元素的值
3.值
1.	.val()		永远默认获取第一个的值 value

5. 이벤트

이벤트 1. 일반적인 유형

click(function(){...})	点击
hover(function(){...})	悬浮
blur(function(){...})	失去焦点
focus(function(){...})	获取焦点
change(function(){...})
keyup(function(){...})

2. 바인딩 이벤트

时间的绑定方式      .on( events [, selector ],function(){})
events: 事件
selector: 选择器(可选的)
function: 事件处理函数

3. 제거 이벤트

.off(event[,selector][,function(){}])

오프 () CSTE 연구진 () 이벤트 핸들러 바인딩을 함께 제거하는 방법

추천

출처blog.csdn.net/w819104246/article/details/89854270