Jquery
层级选择器 有嵌套关系用层级选择器
ancestor descendant ：在给定的祖先元素下匹配所有的后代元素
parent > child :在给定的父元素下匹配所有的子元素
prev + next :匹配所有紧接在 prev 元素后的 next 元素
prev ~ siblings :匹配 prev 元素之后的所有 siblings 元素
基础选择器 没有嵌套关系用基础选择器
id 选择器：根据id来选择html元素
标签选择器：本剧给定元素名匹配所有元素
类选择器： 根据给定的类匹配元素
通用选择器：选择页面上所有的元素
组合选择器：
层级选择器的使用方法：
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<input name="kkk" />
</body>
基础选择器的使用方法：
jquery 语法 ：
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
jquery元素选择器:
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。;
jquery属性选择器 ：
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。；
jquery css选择器 ：
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
jquery 创建html节点使用的是他的核心函数：￥(<html节点>)
append（）：父节点.append(子节点)，添加到父节点的末尾
appendTo : 子节点.appendTo(父节点)，添加到父节点的末尾
prepend() ：父节点.prepend(子节点)，添加到父节点的前面
prependTo():子节点.prepenTp(父节点)，添加到父节点的后面
jquery创建html节点使用的是它的核心函数 : $(<html节点>);
内部插入 ： 是把当前节点添加到目标节点（父节点）的内部，作为子节点
位置只有两个 ：作为父节点的第一个子节点或者作后一个子节点
凡是带to的函数，都是子节点调用函数，父节点作为参数
不带to的函数，都是父节点调用函数，子节点作为参数
append() : 父节点.append(子节点) ，添加到父节点的末尾
appendTo : 子节点.appendTo(父节点)，添加到父节点的末尾
prepend(): 父节点.prepend(子节点) 添加到父节点的第一个位置
prependTo() :子节点.appendTo(父节点) 添加到父节点的第一个位置
外部插入 ：
是把当前节点添加到目标节点的前边或者后边，作为兄弟节点而存在。
同样，位置有两个，一个是在目标节点的前边（兄长节点），一个是在目标节点的后边（弟弟节点）
凡是带insert的函数，都是新节点调用函数，目标节点作为参数
不带insert的函数，都是目标节点调用函数，新节点作为参数
after() 目标节点.after(新节点)，把新节点添加到目标节点的后边，作为弟弟节点而存在
before() 目标节点.before(新节点)，把新节点添加到目标节点的前边，作为哥哥节点而存在
insertAfter() :新节点.insertAfter(目标节点) 把新节点添加到目标节点的后边，作为弟弟节点而存在
insertBefore() :新节点.insertBefore(目标节点) 把新节点添加到目标节点的前面，作为兄长节点而存在
删除节点 ：
1.自己个删除自己个
目标节点.remove([选择器]); 选择器是可选的，它的作用是用来进行筛选，筛选上的节点被删除
2.父节点删除子节点，注意，它是父节点清空所有的子节点
父节点.empty();
<script>
//创建一个html节点，标签P
var $p = $('<p>');
//添加到body当中
//获取body标签
var $body = $('body');
//把p标签添加到body标签中
//
b
o
d
y
.
a
p
p
e
n
d
(
body.append(
body.append(p);
//
p
.
a
p
p
e
n
d
T
o
(
p.appendTo(
p.appendTo(body);
//
b
o
d
y
.
p
r
e
p
e
n
d
(
body.prepend(
body.prepend(p);
//
p
.
p
r
e
p
e
n
d
T
o
(
p.prependTo(
p.prependTo(body);
// $(“h2”).append(“Hello”);
// $(“h1”).appendTo(“div”);
//创建一个html节点，标签p
// $(“p”).prepend( $(".foo")[0] );
//创建一个hr
var $hr = $("<hr>");
//获取h1
var $h1 = $("h1");
//
h
1.
b
e
f
o
r
e
(
h1.before(
h1.before(hr);
//
h
r
.
i
n
s
e
r
t
A
f
t
e
r
(
hr.insertAfter(
hr.insertAfter(h1);
h
r
.
i
n
s
e
r
t
B
e
f
o
r
e
(
hr.insertBefore(
hr.insertBefore(h1);
// $(“p”).empty();
// $(“p”).remove(".hello");
$(“p”).detach(".hello");
</script>
<body>
<p>牙哥</p>
<h1>牙牙</h1>
<h2>呀呀呀呀</h2>
<p>I would like to say: </p>
<div></div><div></div>
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
<p class="hello">Hello</p> how are <p>you?</p>
<p class="hello">Hello</p>我是牙哥<p>你呢</p>
<p class="hello">Hello</p> 我是牙哥 <p>你呢</p>
<p class="hello">Hello</p> 我是牙哥<p>你呢</p>
<p class="hello">Hello</p> 我是牙哥 <p>你呢</p>
</body>
val()函数专门用于操作表单中的input：
val() : 这是获取input的value属性值
val(写一个值) ： 这是给input的value属性赋值
value属性
input type=text ,它的value值就是用户输入的内容，当然除了用户输入外，也可以使用value属性来指定
剩下所有的type类型，value属性值都是显示的声明出来的。
text() ： 给所有（除了input）的html节点赋值文本内容，或者是获取html中的文本内容
innerText
html() : 给所有（除了input）的html节点赋值html内容，或者是获取html中的html内容
innerHTML
<script>
$(document).ready(function(){
$(":text").val("小钻风");
$('p').text("<b>小钻风<b>");
$('div').html("<b>小钻风<b>");
var ccc = $('h1').text();
var ddd = $('h1').html();
console.info(ccc);
console.info(ddd);
})
function a(){
var $text = $(":text");
var valueStr = $text.val();
console.info(valueStr);
}
</script>
<body>
<form>
<input type="text" />
</form>
<input type="button" value="input的操作" onclick="a()" />
<p></p>
<div></div>
<h1>
999
<font color="red">小钻风</font>
</h1>
</body>
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
