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 元素的背景颜色更改为红色：
$(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 实例
$(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() - 设置或返回表单字段的值
$(document).ready(function(){
$(#btn1).click(function(){
alert(text: + $(#test).text()); >>>>>>>text()方法
});
$(#btn2).click(function(){
alert(html: + $(#test).html()); 》》》》》》》》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（）方法
});
});
w3school.com.cn
显示 href 值
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:
设置文本
设置 html
设置值
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 + );
}); 》》》》》》回调函数
});
});
这是粗体文本。
这是另一段粗体文本。
显示旧/新文本
显示旧/新 html
设置属性 - attr()
jquery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
$(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() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jquery append() 方法
jquery append() 方法在被选元素的结尾插入内容。
$(document).ready(function(){
$(#b2).click(function(){
$(p).append(appended text.);》》append（）方法
});
$(#b3).click(function(){
$(ol).append(
appended text.); });
});
asdfsdfads
asdfsa
aaaaaaa
bbbbbbb
ccccccc
追加文本
追加列表
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/html。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jquery 来生成文本/html（就像上面的例子那样），或者通过 javascript 代码和 dom 元素。
function appendtext()
{
var txt1=
text.
; // 以 html 创建新元素var txt2=$(
).text(text.); // 以 jquery 创建新元素var txt3=document.createelement(p);
txt3.innerhtml=text.; // 通过 dom 来创建文本
$(body).append(txt1,txt2,txt3); // 追加新元素
}
this is a paragraph.
追加文本
query after() 和 before() 方法
jquery after() 方法在被选元素之后插入内容。
jquery before() 方法在被选元素之前插入内容。
$(document).ready(function(){
$(#btn1).click(function(){
$(img).before(before); >>>>>>>>方法
});
$(#btn2).click(function(){
$(img).after(after);
});
});
在图片前面添加文本
在图片后面添加文本
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/html、jquery 或者 javascript/dom 来创建新元素。
function aftertext()
{
var txt1=i ; // 以 html 创建元素
var txt2=$().text(love ); // 通过 jquery 创建元素
var txt3=document.createelement(big); // 通过 dom 创建元素
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（）方法
});
});
this is some text in the div.
this is a paragraph in the div.
this is another paragraph in the div.
删除 div 元素
过滤被删除的元素
jquery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jquery 选择器的语法。
下面的例子删除 class=italic 的所有
元素：
(document).ready(function(){
$(button).click(function(){
$(p).remove(.italic); 》》》》接受一个参数
});
});
this is a paragraph in the div.
this is another paragraph in the div.
》》》》设置class来定义参数
this is another paragraph in the div.
删除 class=italic 的所有 p 元素
元素选择器
jquery 元素选择器基于元素名选取元素。
在页面中选取所有
元素:
$(p)
$(document).ready(function(){
$(button).click(function(){
$(p).hide(); ******
});
});
#id 选择器
jquery #id 选择器通过 html 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$(document).ready(function(){
$(button).click(function(){
$(#test).hide(); *******
});
});
.class 选择器
jquery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(document).ready(function(){
$(button).click(function(){
$(.test).hide();
});
});
getparameter得到的都是string类型的。或者是用于读取提交的表单中的值，或者是某个表单提交过去的数据；