1 개요 1. JQuery란 무엇인가요? JQuery는 JS 작업을 단순화하고 JS 기능을 확장하는 JavaScript 라이브러리입니다. 2. 분리 원칙 JQuery는 가져오기와 사용의 분리 원칙을 따릅니다. 즉, 를 사용하여 사용할 다른 <script> 태그를 만듭니다. </span></p> <h2><span style="font-size: 18px"> 3. 기본 구문 </span></h2> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).action();</pre><div class="contentsignin">로그인 후 복사</div></div></div> <p><span style="font-size: 18px"> HTML 요소를 가져오고 요소에 지정된 작업을 수행합니다. </span></p> <h1><span style="font-size: 14pt"> 두 개의 선택기 </span></h1> <h2><span style="font-size: 18px"> 1. 기본 선택기 </span></h2> <p><span style="font-size: 18px"> CSS 선택기와 마찬가지로 JQuery 기본 선택기는 태그, 카테고리 및 ID를 기반으로 HTML 요소를 선택합니다. </span></p> <h2><span style="font-size: 18px"> 2. 결합 선택기 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">$(selector01,selector02,selectorN): 어떤 조건을 충족하는 요소의 컬렉션을 가져옵니다. </span></p></li> <li><p><span style="font-size: 18px">$(selector01selector02): 동시에 여러 조건을 충족하는 요소를 가져옵니다. </span></p></li> <li><p><span style="font-size: 18px">$(selector01 selector02): 첫 번째 조건을 만족하는 요소의 하위 요소 중 두 번째 조건을 만족하는 요소를 가져옵니다. </span></p></li> </ul> <h2><span style="font-size: 18px"> 3. 속성 선택기 </span></h2> <p><span style="font-size: 18px"> 속성을 기반으로 요소를 선택합니다. </span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> $("[attr]"): attr 속성이 있는 모든 요소를 가져옵니다. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr='value']"): 지정된 속성 값을 가진 모든 요소를 가져옵니다. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr!='value']"): 지정된 속성을 갖고 값이 지정된 값과 같지 않은 모든 요소를 가져옵니다. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr$='value']"): 지정된 속성을 갖고 값이 지정된 값으로 끝나는 모든 요소를 가져옵니다. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr^='value']"): 지정된 속성이 있고 해당 값이 지정된 값으로 시작하는 모든 요소를 가져옵니다. </span></p></li> </ul> <h2><span style="font-size: 18px"> 4.$(this) </span></h2> <p><span style="font-size: 18px">은 일반적으로 현재 개체, 즉 메서드의 호출자를 가져오기 위해 메서드 내에서 사용됩니다. </span></p> <h1><span style="font-size: 14pt">3가지 요소 연산</span></h1> <h2><span style="font-size: 18px"> 1. 요소 생성</span></h2> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$("<tag>")</pre><div class="contentsignin">로그인 후 복사</div></div></div> <p><span style="font-size: 18px"> 객체를 생성할 때 JQuery에서 사용하는 HTML 태그는 <tag> 태그의 시작 부분만 될 수 있거나 다음을 포함할 수도 있습니다. 시작과 끝< ;tag></tag>에 </span><span style="font-size: 18px"> 세부정보를 포함할 수도 있습니다(예: </span></p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><tag style="xxxxx">content</tag></pre><div class="contentsignin">로그인 후 복사</div></div></div>).<ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> 不能够直接使用标签名创建对象,即$("tagName")不能创建对象,这一点不同于JavaScript。</span></p></li> <li><p><span style="font-size: 18px"> 不能够单独使用标签结束标识创建对象,即$("</tag>")不能创建对象。</span></p></li> </ul> <h2><span style="font-size: 18px"> 2.获取内容 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">text():设置或者返回所选元素的文本内容。</span></p></li> <li><p><span style="font-size: 18px">html():设置或者返回所选元素的内容(包含HTML标签)。</span></p></li> <li><p><span style="font-size: 18px">val():设置或者返回所选字段的值。</span></p></li> </ul> <h2><span style="font-size: 18px"> 3.内部插入 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> append():在结尾(后端)添加子元素。</span></p></li> <li><p><span style="font-size: 18px"> prepend():在开头(前端)添加子元素。</span></p></li> <li><p><span style="font-size: 18px"> appendTo():将操作对象作为子对象添加到参数对象结尾。</span></p></li> </ul> <h2><span style="font-size: 18px"> 4.外部插入 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> before():在前面添加兄弟元素。</span></p></li> <li><p><span style="font-size: 18px"> after():在后面添加兄弟素。</span></p></li> <li><p><span style="font-size: 18px"> insertBefore():在前面插入兄弟元素。</span></p></li> <li><p><span style="font-size: 18px"> insertAfter():在后面插入兄弟元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 5.删除元素 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">remove():删除自身及子元素。</span></p></li> <li><p><span style="font-size: 18px">empty():删除子元素。</span></p></li> <li><p><span style="font-size: 18px">remove("根据基本选择器选择指定元素"):删除基本选择器中指定元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 6.获取子元素 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">children():获取全部子元素。</span></p></li> <li><p><span style="font-size: 18px">children("基本组合选择器"):获取具有自定标签与指定属性的子元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 7.筛选 </span></h2> <p><span style="font-size: 18px"> 如果一个选择器返回的结果不是一个对象,而是多个对象构成的集合,可以使用以下方法获取集合中的指定对象:</span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> eq(index):获取集合中指定索引位置的对象,索引从0开始。</span></p></li> <li><p><span style="font-size: 18px"> filter(":even"):获取集合中所有索引为奇数的对象。</span></p></li> <li><p><span style="font-size: 18px"> filter(":odd"):获取集合中所有索引为偶数的对象。</span></p></li> <li><p><span style="font-size: 18px"> slice(index):获取索引大于指定值的对象。</span></p></li> <li><p><span style="font-size: 18px"> slice(0,index):获取索引小于指定值的对象。</span></p></li> <li><p><span style="font-size: 18px"> not(selector):选择指定对象以外的全部对象。</span></p></li> </ul> <h1><span style="font-size: 14pt">四 属性操作</span></h1> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">attr("attrName"):获取属性值。</span></p></li> <li><p><span style="font-size: 18px">attr("attrName","attrValue"):修改属性值。</span></p></li> <li><p><span style="font-size: 18px">removeAttr("atrrName"):删除属性。</span></p></li> </ul> <h1><span style="font-size: 14pt">五 常用操作</span></h1> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">遍历对象:$.each(obj,function(i,n)),i是索引,n是当前遍历子对象。</span></p></li> <li><p><span style="font-size: 18px">获取单选按钮与复选框的选择状态:$(this).is(":checked")。</span></p></li> </ul> <h1><span style="font-size: 14pt">六 常用标签及其操作</span></h1> <h2><span style="font-size: 18px"> 1.select </span></h2> <h3><span style="font-size: 18px">⑴增加选项 </span></h3> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).options[index]=new Option(name,value);//按照索引增加$(selector).add(option,before);//按照指定位置增加</pre><div class="contentsignin">로그인 후 복사</div></div></div> <h3><span style="font-size: 18px">⑵删除选项</span></h3> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).length=0;//全部删除$(selector).remove(index);//按索引删除</pre><div class="contentsignin">로그인 후 복사</div></div></div> <h3><span style="font-size: 18px">⑶option</span></h3> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">option.index: 인덱스 속성 값을 설정하고 반환합니다. </span></p></li> <li><p><span style="font-size: 18px">option.text: 텍스트를 설정하고 반환합니다. </span></p></li> <li><p><span style="font-size: 18px">option.value: 값을 설정하고 반환합니다. </span></p></li> <li><p><span style="font-size: 18px">option.selected: 선택 상태(true/false)를 설정하고 반환합니다. </span></p></li> </ul> <p> </p>