제이쿼리

jQuery 요소 선택기

jQuery는 CSS 선택기를 사용하여 HTML 요소를 선택합니다.

$("p")는

요소를 선택합니다.

$("p.intro")는 class="intro"가 있는 모든

요소를 선택합니다.

$("p#demo")는 id="demo"인 첫 번째

요소를 선택합니다.

jQuery 속성 선택기

jQuery는 XPath 표현식을 사용하여 특정 속성이 있는 요소를 선택합니다.

$("[href]")는 href 속성이 있는 모든 요소를 ​​선택합니다.

$("[href='#']")는 href 값이 "#"인 모든 요소를 ​​선택합니다.

$("[href!='#']")는 href 값이 "#"과 같지 않은 모든 요소를 ​​선택합니다.

$("[href$='.jpg']")는 href 값이 ".jpg"로 끝나는 모든 요소를 ​​선택합니다.

jQuery CSS 선택기

jQuery CSS 선택기는 HTML 요소의 CSS 속성을 변경하는 데 사용할 수 있습니다.

다음 예에서는 모든 p 요소의 배경색을 빨간색으로 변경합니다.

제목입니다

문단입니다.

이것은

AJAX에서 이 텍스트를 변경하도록 합니다

Change Content

jQuery - 获得内容和属性

jQuery DOM 操作

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

 

 

<script></script>

$(document).ready(function(){

  $("#btn1").click(function(){

    alert("Text: " + $("#test").text());     >>>>>>>text()方法

  });

  $("#btn2").click(function(){

    alert("HTML: " + $("#test").html());    》》》》》》》》html（）方法

  });

});

 

这是段落中的粗体文本。

显示文本

显示 HTML

 

 

 

 

 

<script></script>

$(document).ready(function(){

  $("button").click(function(){

    alert("Value: " + $("#test").val());      >>>>>>>>>val（）方法

  });

});

 

姓名：

显示值

 

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

 

 

 

<script></script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#w3s").attr("href"));     》》》》》》》attr（）方法

  });

});

 

W3School.com.cn

显示 href 值

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

<script></script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text("Hello world!");     》》》》》》设置text（）方法

  });

  $("#btn2").click(function(){

    $("#test2").html("Hello world!");    》》》》》设置html（）方法

  });

  $("#btn3").click(function(){

    $("#test3").val("Dolly Duck");    》》》》》设置val（）方法

  });

});

这是段落。

这是另一个段落。

Input field:

设置文本

设置 HTML

设置值

 

 

 

 

 

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

<script></script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text(function(i,origText){

      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

    });     》》》》》回调函数

  });

  $("#btn2").click(function(){

    $("#test2").html(function(i,origText){

      return "Old html: " + origText + " New html: Hello world! (index: " + i + ")";

    });    》》》》》》回调函数

  });

});

这是粗体文本。

这是另一段粗体文本。

显示旧/新文本

显示旧/新 HTML

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

<script></script>

$(document).ready(function(){

  $("button").click(function(){

    $("#w3s").attr("href","http://www.w3school.com.cn/jquery");

  });

});

W3School.com.cn

改变 href 值

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

$(document).ready(function(){

       $("button").click(function(){

       $("#a1").attr({

           "href":"http://www.w3school.com.cn",

           "title":"W3School jQuery 教程"

       });

       });

});

      百度

  

   改变

 

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

$(document).ready(function(){

  $("button").click(function(){

    $("#w3s").attr("href", function(i,origValue){

      return origValue + "/jquery";

    });

  });

});

w3school.com.cn

改变 href 值

jQuery - 요소 추가

새 HTML 콘텐츠 추가

새 콘텐츠를 추가하는 네 가지 jQuery 메서드를 알아봅니다.

append() - end of selected element

prepend() - 선택한 요소의 시작 부분에 내용 삽입

after() - 선택한 요소 뒤에 내용 삽입

before() - 선택한 요소 앞에 내용 삽입

jQuery add() 메서드

jQuery add() 메서드 사용 내용 삽입 선택한 요소의 끝에서.

$(document).ready(function(){

$("#b2").click(function(){

$("p"). append("추가된 텍스트.");》》append() 메서드

});

$("#b3").click(function(){

$("ol").append("

추가된 텍스트

.");

});

});

asdfsdfads

asdfsa

bbbbbbbb
ccccccc
3. 텍스트 추가

목록 추가

append()를 통해 여러 가지 새로운 요소 추가 및 prepend() 메소드

위의 예에서는 선택한 요소/HTML의 시작/끝에만 텍스트를 삽입했습니다.

그러나 append() 및 prepend() 메소드는 매개변수를 통해 무제한의 새 요소를 수신할 수 있습니다. 텍스트/HTML은 위의 예와 같이 jQuery를 통해 생성되거나 JavaScript 코드 및 DOM 요소를 통해 생성될 수 있습니다.

functionappendText()

{

var txt1="

Text.

" // HTML에 새 요소 생성

var txt2=$("

").text("Text."); // jQuery를 사용하여 새 요소 만들기

var txt3=document.createElement("p");

txt3.innerHTML="Text."; // DOM을 통해 텍스트 생성

$("body").append(txt1,txt2,txt3); //새 요소 추가

}

단락입니다.

텍스트 추가

after() 및 before() 메서드 쿼리

jQuery after() 메서드는 선택한 요소 뒤에 콘텐츠를 삽입합니다.

jQuery before() 메서드는 선택한 요소 앞에 콘텐츠를 삽입합니다.

$(document).ready(function(){

$("#btn1").click(function(){

$("img"). before("

전

"); >>>>>>>>방법

});

$("#btn2").click(function() {

$("img").after("이후

");

});

});

이미지 앞에 텍스트 추가

이미지 뒤에 텍스트 추가

after() 및 before() 메소드를 통해 여러 가지 새로운 요소 추가

after() 및 before() 메소드는 매개변수를 통해 무제한의 새 요소를 수신할 수 있습니다. 새로운 요소는 텍스트/HTML, jQuery 또는 JavaScript/DOM을 통해 생성될 수 있습니다.

function afterText()

{

var txt1="

I

" // HTML에 요소 생성

var txt2 =$("

").text("love "); // jQuery를 통해 요소 생성

var txt3=document.createElement("big");

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3) // img 뒤에 새 요소 삽입

}

이미지 뒤에 텍스트 추가

jQuery - 요소 삭제

요소/콘텐츠 삭제

요소와 콘텐츠를 삭제해야 하는 경우 일반적으로 다음 두 가지 jQuery 메서드를 사용할 수 있습니다.

remove() - 선택한 요소(및 해당 하위 요소) 삭제

empty() - 선택한 요소에서 하위 요소를 제거합니다.

jQuery Remove() 메서드

jQuery Remove() 메서드는 선택한 요소에서 하위 요소를 제거합니다. 선택된 요소 요소와 그 하위 요소를 선택합니다.

$(document).ready(function(){

$("button").click(function(){

$("#div1"). Remove(); 》》》》empty() 메소드로 변경 가능

});

});

div의 일부 텍스트입니다.

div의 단락입니다. .

이것은 div의 또 다른 단락입니다.

div 요소 삭제

삭제된 요소 필터링

jQuery Remove() 메소드는 다음과 같은 매개변수도 허용합니다. 삭제된 요소를 필터링할 수 있습니다.

이 매개변수는 jQuery 선택기 구문일 수 있습니다.

다음 예에서는 class="italic"인 모든

요소를 삭제합니다.

(document).ready(function(){

$("button") .click(function(){

$("p").remove(".italic"); 》》》》매개변수 허용

});

});

div에 있는 문단입니다.

div에 있는 또 다른 문단입니다.

》》》》매개변수를 정의하는 클래스 설정

이것은 div의 또 다른 단락입니다.

class="italic"인 모든 p 요소를 제거하세요

요소 선택기

jQuery 요소 선택기는 이름을 기준으로 요소를 선택합니다.

페이지의 모든

요소 선택:

$("p")

$(document).ready(function(){
$( "버튼").click(function(){
$("p").hide(); ******
});
});

#id selector

jQuery #id selector는 HTML 요소의 id 속성을 통해 지정된 요소를 선택합니다.

페이지에 있는 요소의 ID는 고유해야 하므로 페이지에 있는 고유한 요소를 선택하려면 #id 선택기를 전달해야 합니다.

ID로 요소를 선택하는 구문은 다음과 같습니다.

$(document).ready(function(){
$("button").click(function(){
$ ("#test").hide(); *******
});
});

.class 선택기

jQuery 클래스 선택기 클래스를 지정하여 요소를 찾을 수 있습니다.

구문은 다음과 같습니다.

$(document).ready(function(){
$("button").click(function(){
$( ".test ").hide();
});
});

getParameter가 가져오는 것은 String 유형입니다. 또는 제출된 양식의 값이나 특정 양식으로 제출된 데이터를 읽는 데 사용됩니다.