jQuery学习笔记1

一、jQuery选择器：

1、jQuery元素选择器　　

$("p.text") //选取所有class="text"的<p>元素

$("p#text"） //选取所有id="text"的<p>元素　

2、jQuery属性选择器

$("[href]") 　　　　//选取所有带有 href 属性的元素。
$("[href='#']") 　　//选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 　 //选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素。　

3、jQuery CSS选择器

$("p").css("background-color","red");  //老是忘记括起red的引号！！！

 

二、事件：

$(document).ready(function(){
　　//some code
})

　　ready 表示文档结构已经加载完成（不包含图片等非文字媒体文件），与其相对的是onload，指示页面包含图片等文件在内的所有元素都加载完成。

$(selector).click(function(){
　　//some code
})

　　click是比较常用的事件，触发或将函数绑定到被选元素的点击事件。还有dbclick（双击）、mouseover（悬浮）、focus（获得焦点）等等。

 

三、获得内容和属性( text()、html()、val()、attr() )

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

　　类似于javascript中的innerText属性，可以用来读取或者设置某个元素的文本内容。

<p><strong>Hello world</strong></p>
alert($("p").text());  //Hello world

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

　　类似于javascript中的innerHtml属性，可以用来读取或者设置某个元素中的HTML内容。

 

<p><strong>Hello world</strong></p>
alert($("p").html());  // <strong>Hello world</strong>

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

　　类似于javascript中的value属性，可以用来设置或者获取元素的值。

<p>Name: <input type="text" name="user" value="Hello World" /></p>
alert($("[type='text']").val()); //  Hello World

4、attr() -用于获取、设置属性值

<p id="p1" name="content">good night</p>
alert($("#p1").attr("name"));   //content
$(selector).attr(attribute,value) //设置属性值
&("img").attr("width","180");

 

四、添加元素(append()、preappend()、after()、before())

1、append() - 在被选元素的结尾（仍然在内部）插入内容，顾名思义，append是追加的意思，是在内部再加。

$("p").append("Some appended text."); //可以在内部写标签

2、prepend() - 在被选元素的开头（仍然在内部）插入内容

$("p").prepend("Some prepended text."); //可以在内部写标签

3、after() - 在被选元素之后插入内容，（添加兄弟）

$("p").after("Some prepended text.");//可以在内部写标签

4、before() - 在被选元素之前插入内容，（添加兄弟）

$("p").before("Some prepended text.");//可以在内部写标签

 

五、删除(remove()、empty())

1、remove()方法 删除被选元素及其子元素

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

$("#div1").remove()

以上操作后，整个<div></div>的内容都看不见。

2、empty() 方法删除被选元素的子元素

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

$("#div1").empty()

以上操作后，<div></div>还在，但是它的子元素都不在了。