学习jquery的一些笔记
display:block 顯示
display:none? 不顯示
?
addClass 添加Class
removeClass? 去除Class
toggleClass 來回變換Class，一般配合click事件使用，如
<html>
<head>
<styletype="text/css">
.divDefault{width:260px;font-size:10pt; padding:5px}
.divClick{width:260px;border:solid 1px #666; font-size:10pt; background-
color:#free;padding:5px}
</style>
</head>
<body>
<scriptlanguage="javascript" type="text/javascript" src=xxx位置的juery.js></src>
<scripttype="text/javascript">
$(function(){
$(".divDefault").click(function(){
$(this).toggleClass("divClick").html("點擊后的樣式");
})
})
</script>
<divclass="divDefault">點擊前的樣式</div>
</body>
<html>
?
?
?
$(this) 當前元素
$().next 下一個元素
?
html控制輸入框高度和寬度：
<input style="width:200px;height:20px;"/><br />
?
placeholder可以將文字在輸入框里顯示一定的文字，在光標移至輸入框內時自動隱藏。
<input placeholder="這里輸入文字"/><br />
?
同理，也可用value="這里輸入文字"的方法在輸入框中顯示一定的文字，但是要自行調用javascript在
光標進入時將其隱藏。
?
?
$(document).ready(function(){ })
該方法的作用是在頁面的內容加載完成后再調用jquery中的方法。可以避免有時候jquery函數讀取不到
相應數據的情況。
?
?
?
window.οnlοad=function(){}這是匿名函數的寫法，相當于window的onload事件調用了一個方法，但是這個方法是匿名的（因為沒有其他地方會調用，所以沒必要給一個名字）
如果要以常規的寫法，就是定義一個函數比如aaa();
function aaa(){ xxxxx; }
再用window.onload = aaa();
這樣也是同樣的效果。
?
?
?
jQuery選擇器:nth-child(even) 與:even的區別
首先看一下:nth-child和:even的說明
:nth-child(n)? 第n個子節點，n從1開始
:even?頁面范圍內偶數的匹配元素
那么:nth-child(even)的意思就是從第1開始的偶數元素，:even的意思是指從第0開始的偶數元素
在實際中一個常見的例子就是，當給表格的偶數行設置變色時，可以跳過表頭行，而從第1行開始設置
讓我們看一個實際的例子，把表格的偶數行的背景色設置為紅色，看一下兩種寫法的不同結果
用:nth-child(even)
代碼：$('tabletr:nth-child(even)').css('background-color','red');
效果如下圖：
| 1表頭 | 表頭 |
| 2 | ? |
| 3 | ? |
| 4 | ? |
| 5 | ? |
用:even
代碼：$('tabletr:even').css('background-color','red');
效果如下圖：
| 0表頭 | 表頭 |
| 1 | ? |
| 2 | ? |
| 3 | ? |
| 4 | ? |
?
?
$(“# id”).html 顯示特定id的文本內容
?
$().hide() 隱藏特定內容
?
:lt 選擇器選取帶有小于指定 index 值的元素。
index 值從 0 開始。
經常與其他元素/選擇器一起使用，來選擇指定的組中特定序號之前的元素（如上面的例子）。
$(":animated")
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
? functionaniDiv(){
???$("#box").animate({width:300},"slow");
???$("#box").animate({width:100},"slow",aniDiv);
? }
? aniDiv();
?$(".btn1").click(function(){
???$(":animated").css("background-color","blue");
? });
});
</script>
<style>
div
{
background:#98bf21;
height:40px;
width:100px;
position:relative;
margin-bottom:5px;
}
</style>
</head>
<body>
<div></div>
<div id="box"></div>
<div></div>
<button class="btn1">Mark animatedelement</button>
</body>
</html>
?
?
?
?
?
?
?
?
?
?
| 選擇器 | 實例 | 選取 |
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| ? | ? | ? |
| :first | $("p:first") | 第一個 <p> 元素 |
| :last | $("p:last") | 最后一個 <p> 元素 |
| :even | $("tr:even") | 所有偶數 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇數 <tr> 元素 |
| ? | ? | ? |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四個元素（index 從 0 開始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不為空的 input 元素 |
| ? | ? | ? |
| :header | $(":header") | 所有標題元素 <h1> - <h6> |
| :animated | ? | 所有動畫元素 |
| ? | ? | ? |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 無子（元素）節點的所有元素 |
| :hidden | $("p:hidden") | 所有隱藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可見的表格 |
| ? | ? | ? |
| s1,s2,s3 | $("th,td,.intro") | 所有帶有匹配選擇的元素 |
| ? | ? | ? |
| [attribute] | $("[href]") | 所有帶有 href 屬性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 屬性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 屬性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 屬性的值包含以 ".jpg" 結尾的元素 |
| ? | ? | ? |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| ? | ? | ? |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被選取的 input 元素 |
| :checked | $(":checked") | 所有被選中的 input 元素 |
?
?
:contains(text) 獲取包含給定文本的元素
:empty 獲取所有不包含子元素或者文本的空元素
:has(selector) 獲取含有選擇器所匹配的元素的元素
:parent 獲取含有子元素或者文本的元素
可見性過濾選擇器語法
:hidden 獲取所有不可見元素，或者type為hidden的元素
:visible 獲取所有的可見元素
屬性過濾選擇器
[attribute] 獲取包含給定屬性的元素
[attribute=value] 獲取等于給定的屬性是某個特定值的元素
[attribute!=value] 獲取不等于給定的屬性是某個特定值的元素
[attribute^=value] 獲取給定的屬性是以某些值開始的元素
[attribute$=value] 獲取給定的屬性是以某些值結尾的元素
[attribute*=value] 獲取給定的屬性是以包含某些值的元素
[selector1][selector2][selectorN] 獲取滿足多個條件的復合屬性的元素
示例為《權威指南》的2-10.html
.show(time) time為毫秒通常使用的值是1000到3000左右。
?
attr 獲取元素屬性
attr(name)
注意，text()無法獲取樣式，只能獲取文本內容。
?
總結
以上是生活随笔為你收集整理的学习jquery的一些笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决安装jdk后使用cmd校验出现has
- 下一篇： 教你创建高大上的多边形字体