JQUERY

jQuery Element Selector

jQuery uses CSS selectors to select HTML elements.

$("p") selects the

element.

$("p.intro") selects all

elements with class="intro".

$("p#demo") selects the first

element with id="demo".

jQuery Attribute Selector

jQuery uses XPath expressions to select elements with a given attribute.

$("[href]") Selects all elements with href attribute.

$("[href='#']") Selects all elements with href value equal to "#".

$("[href!='#']") Selects all elements with href value not equal to "#".

$("[href$='.jpg']") Selects all elements whose href value ends with ".jpg".

jQuery CSS Selector

jQuery CSS Selector can be used to change CSS properties of HTML elements.

The following example changes the background color of all p elements to red:

$(document).ready(function(){

  $("button").click(function(){              》》》》》》》元素选择器

    $("p").css("background-color","yellow");

  });

});

This is a heading

This is a paragraph.

This is another paragraph.

Click me

jQuery AJAX Example

$(document).ready(function(){

  $("#b01").click(function(){   》》》》》》》》》属性选择器

  $('#myDiv').load('../jquery/test1.txt.htm'/*tpa=http://www.w3school.com.cn/jquery/test1.txt*/);

  });

});

Let AJAX change this text

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 - Add elements

Add new HTML content

We will learn four jQuery methods for adding new content:

append() - Insert content at the end of the selected element

prepend() - Before being Insert content at the beginning of the selected element

after() - Insert content after the selected element

before() - Insert content before the selected element

jQuery append() method

jQuery append( ) method inserts content at the end of the selected element.

$(document).ready(function(){

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

$("p").append("Appended text.");》 》append() method

});

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

} $("ol").append("

Appended text

.");

}) ;

});

asdfsdfads

asdfsa

ccccccc

2. Append text

3. Append list

Add several new elements through the append() and prepend() methods

In the above example, we only insert text/HTML at the beginning/end of the selected element.

However, the append() and prepend() methods can receive an unlimited number of new elements via parameters. Text/HTML can be generated via jQuery (like in the example above), or via JavaScript code and DOM elements.

function appendText()

{

var txt1="

Text.

"; // Create a new element in HTML

var txt2=$("

").text("Text."); / / Create a new element with jQuery

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

txt3.innerHTML="Text."; //Create text through DOM

$("body").append(txt1 ,txt2,txt3); //Append new elements

}

This is a paragraph.

Query after() and before() methods

jQuery after() method inserts content after the selected element.

jQuery before() method inserts content before the selected element.

$(document).ready(function(){

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

$("img").before("

Before

"); >>> >>>>>Method

});

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

$("img").after("

After

");

});

});

Add text in front of the picture

Add text behind the picture

Through after() and before() methods Add several new elements

The after() and before() methods can receive an unlimited number of new elements through parameters. New elements can be created via text/HTML, jQuery or JavaScript/DOM. OnFunction afterst () {

var txt1 = "

i "; // Create elements with html

var txt2 = $ ("

"). Create element

var txt3=document.createElement("big"); // Create element through DOM txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3) ; elements and content , generally you can use the following two jQuery methods: remove() - delete the selected element (and its sub-elements)

empty() - delete the sub-elements from the selected element

jQuery remove() method

jQuery The remove() method removes the selected element and its child elements.

$(document).ready(function(){

$("button").click(function(){ $("#div1").remove(); 》》》》Can be changed to empty () method

});});

This is some text in the div.

This is a paragraph in the div.

This is another paragraph in the div.

Delete div elements

Filter deleted elements

The jQuery remove() method also accepts a parameter, allowing you to filter deleted elements.

This parameter can be any jQuery selector syntax.

The following example deletes all

elements with class="italic":

(document).ready(function(){

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

$("p" ).remove(".italic"); 》》》》Accepts a parameter

});

});

This is a paragraph in the div .

This is another paragraph in the div.

》》》》Set class to define parameters

This is another paragraph in the div.

Delete all class="italic" p element

Element selector

jQuery element selector selects elements based on their names.

Select all

elements in the page:

$("p")

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

#id selector

jQuery #id selector selects the specified element through the id attribute of the HTML element.

The id of the element in the page should be unique, so if you want to select the unique element in the page, you need to use the #id selector.

The syntax for selecting elements by id is as follows:

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

.class selector

jQuery class selector can find elements by the specified class.

The syntax is as follows:

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

getParameter gets all String types. Or it is used to read the value in the submitted form, or the data submitted in a certain form;