jQueryのフロントエンドの学習知識

以前のDOMとBOMは、ブラウザと対話する方法を知っている、このブログは、jQueryのの知識を紹介します学び、その後、我々はそれの役割が何であるかのjQueryを学ぶ、以前の研究により、JS文が実現するのは非常に長い見つけることは難しくありません関数がライン文の多くを書くために、jQueryのDOMオブジェクトは、jQueryオブジェクトの形成を包む声明JSと比較して、コードを書くことで、jQueryのはさらに簡単です。

、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(){}])

オフ()メソッド.onを削除するには()イベントハンドラバウンド

おすすめ

転載: blog.csdn.net/w819104246/article/details/89854270