Home > Article > Web Front-end > 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 paragraph.
This is another paragraph.
jQuery AJAX Example
$(document).ready(function(){
$("#b01").click(function(){ 》》》》》》》》》属性选择器
$('#myDiv').load('../jquery/test1.txt.htm'/*tpa=http://www.w3school.com.cn/jquery/test1.txt*/);
});
});
jQuery - 获得内容和属性
jQuery DOM 操作
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text()); >>>>>>>text()方法
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html()); 》》》》》》》》html（）方法
});
});
这是段落中的粗体文本。
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val()); >>>>>>>>>val（）方法
});
});
姓名：
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href")); 》》》》》》》attr（）方法
});
});
jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
$(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:
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()：
$(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 + ")";
}); 》》》》》》回调函数
});
});
这是粗体文本。
这是另一段粗体文本。
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
});
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";
});
});
});
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("
}) ;
});
asdfsdfads
asdfsa
ccccccc
Text.
"; // Create a new element in HTML var txt2=$("").text("Text."); / / Create a new element with jQueryvar 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 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.
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 parametersThis is another paragraph in the div.
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;