제이쿼리 소개

1 개요

1. JQuery란 무엇인가요?

JQuery는 JS 작업을 단순화하고 JS 기능을 확장하는 JavaScript 라이브러리입니다.

2. 분리 원칙

JQuery는 가져오기와 사용의 분리 원칙을 따릅니다. 즉, <script>를 사용하여 사용할 다른 <script> 태그를 만듭니다. </script>

3. 기본 구문

$(selector).action();

HTML 요소를 가져오고 요소에 지정된 작업을 수행합니다.

두 개의 선택기

1. 기본 선택기

CSS 선택기와 마찬가지로 JQuery 기본 선택기는 태그, 카테고리 및 ID를 기반으로 HTML 요소를 선택합니다.

2. 결합 선택기

• $(selector01,selector02,selectorN): 어떤 조건을 충족하는 요소의 컬렉션을 가져옵니다.

• $(selector01selector02): 동시에 여러 조건을 충족하는 요소를 가져옵니다.

• $(selector01 selector02): 첫 번째 조건을 만족하는 요소의 하위 요소 중 두 번째 조건을 만족하는 요소를 가져옵니다.

3. 속성 선택기

속성을 기반으로 요소를 선택합니다.

• $("[attr]"): attr 속성이 있는 모든 요소를 ​​가져옵니다.

• $("[attr='value']"): 지정된 속성 값을 가진 모든 요소를 ​​가져옵니다.

• $("[attr!='value']"): 지정된 속성을 갖고 값이 지정된 값과 같지 않은 모든 요소를 ​​가져옵니다.

• $("[attr$='value']"): 지정된 속성을 갖고 값이 지정된 값으로 끝나는 모든 요소를 ​​가져옵니다.

• $("[attr^='value']"): 지정된 속성이 있고 해당 값이 지정된 값으로 시작하는 모든 요소를 ​​가져옵니다.

4.$(this)

은 일반적으로 현재 개체, 즉 메서드의 호출자를 가져오기 위해 메서드 내에서 사용됩니다.

3가지 요소 연산

1. 요소 생성

$("<tag>")</tag>

객체를 생성할 때 JQuery에서 사용하는 HTML 태그는 태그의 시작 부분만 될 수 있거나 다음을 포함할 수도 있습니다. 시작과 끝< ;tag>에 세부정보를 포함할 수도 있습니다(예:

<tag>content</tag>

).

• 不能够直接使用标签名创建对象，即$("tagName")不能创建对象，这一点不同于JavaScript。

• 不能够单独使用标签结束标识创建对象，即$("")不能创建对象。

2.获取内容

• text()：设置或者返回所选元素的文本内容。

• html()：设置或者返回所选元素的内容（包含HTML标签）。

• val()：设置或者返回所选字段的值。

3.内部插入

• append()：在结尾（后端）添加子元素。

• prepend()：在开头（前端）添加子元素。

• appendTo()：将操作对象作为子对象添加到参数对象结尾。

4.外部插入

• before()：在前面添加兄弟元素。

• after()：在后面添加兄弟素。

• insertBefore()：在前面插入兄弟元素。

• insertAfter()：在后面插入兄弟元素。

5.删除元素

• remove()：删除自身及子元素。

• empty()：删除子元素。

• remove("根据基本选择器选择指定元素")：删除基本选择器中指定元素。

6.获取子元素

• children()：获取全部子元素。

• children("基本组合选择器")：获取具有自定标签与指定属性的子元素。

7.筛选

如果一个选择器返回的结果不是一个对象，而是多个对象构成的集合，可以使用以下方法获取集合中的指定对象：

• eq(index)：获取集合中指定索引位置的对象，索引从0开始。

• filter(":even")：获取集合中所有索引为奇数的对象。

• filter(":odd")：获取集合中所有索引为偶数的对象。

• slice(index)：获取索引大于指定值的对象。

• slice(0,index)：获取索引小于指定值的对象。

• not(selector)：选择指定对象以外的全部对象。

四 属性操作

• attr("attrName")：获取属性值。

• attr("attrName","attrValue")：修改属性值。

• removeAttr("atrrName")：删除属性。

五 常用操作

• 遍历对象：$.each(obj,function(i,n))，i是索引，n是当前遍历子对象。

• 获取单选按钮与复选框的选择状态：$(this).is(":checked")。

六 常用标签及其操作

1.select

⑴增加选项

$(selector).options[index]=new Option(name,value);//按照索引增加$(selector).add(option,before);//按照指定位置增加

⑵删除选项

$(selector).length=0;//全部删除$(selector).remove(index);//按索引删除

⑶option

• option.index: 인덱스 속성 값을 설정하고 반환합니다.

• option.text: 텍스트를 설정하고 반환합니다.

• option.value: 값을 설정하고 반환합니다.

• option.selected: 선택 상태(true/false)를 설정하고 반환합니다.

위 내용은 제이쿼리 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!