一. click()
点击事件,使用方法:$(selector).click(function);
二. css()
css() 方法返回或设置匹配的元素的一个或多个样式属性。使用方法:
设置元素样式属性:$(selector).css(name,value):
返回元素样式属性:$(selector).css(name)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { $("p").css("color","red"); alert($("p").css("color")); }); }); </script> </head> <body> <p>段落</p> <button type="button">段落变色</button> </body> </html>
三. siblings()
siblings() 方法可以返回被选元素的所有兄弟元素(可以理解为,返回该元素的所有哥哥和弟弟),无论前后。使用方法:$(selector).siblings(filter),其中selector是字符串值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function () { // $("#3").siblings().css("color","yellow"); //1245678都变成黄色 $("#3").siblings("span").css("color","yellow"); //678都变成黄色 }); </script> </head> <body> <div> <p>1</p> <p>2</p> <p id="3">3</p> <p>4</p> <p>5</p> <span>6</span> <br/> <span>7</span><br/> <span>8</span><br/> </div> </body> </html>
四. nextAll
nextAll(selector) 方法返回被选元素之后的所有同级元素(可以理解为,返回该元素的所有弟弟)
.next(selector) – 返回被选元素的后一个同级元素,其中selector是可选的,如果使用,则必须是字符串值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function () { // $("#3").nextAll().css("color","red");//45678变色 // $("#3").nextAll("span").css("color","red");//678变色 $("#3").next().css("color","red");//4变色 }); </script> </head> <body> <div> <span>0</span> <br/> <p>1</p> <p>2</p> <p id="3">3</p> <p>4</p> <p>5</p> <span>6</span> <br/> <span>7</span><br/> <span>8</span><br/> </div> </body> </html>
五. prevAll()
prevAll(selector) 方法返回被选元素之前的所有同级元素。(可以理解为,返回该元素的所有哥哥)
prev(selector):返回被选元素的前一个同级元素其中selector是可选的,如果使用,则必须是字符串值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function () { // $("#3").prevAll().css("color","red");//012变色 // $("#3").prevAll("span").css("color","red");//0变色 $("#3").prev().css("color","red");//2变色 }); </script> </head> <body> <div> <span>0</span> <br/> <p>1</p> <p>2</p> <p id="3">3</p> <p>4</p> <p>5</p> <span>6</span> <br/> <span>7</span><br/> <span>8</span><br/> </div> </body> </html>
六. slideToggle()
slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。使用方法:$(selector).slideToggle(speed,callback)
spped和callback都是可选参数,其中speed是速度,可以使用数字(毫秒)或者单词(”slow” 、”normal”、”fast”)来控制。callback用于在slideToggle函数执行完之后,要执行的函数。
function repeat() { $("#mover").slideToggle("slow", repeat); //通过调用自身,用于反复显示隐藏 }
七. hide()和show()
hide():如果被选的元素已被显示,则隐藏该元素。使用方法:$(selector).hide(speed,callback),spped和callback都是可选参数,其中speed是隐藏的速度,可以使用数字(毫秒)或者单词(”slow” 、”normal”、”fast”)来控制。callback用于在hide函数执行完之后,要执行的函数。
show():如果被选元素已被隐藏,则显示这些元素。使用方法:$(selector).show(speed,callback),spped和callback都是可选参数,其中speed是隐藏的速度,可以使用数字(毫秒)或者单词(”slow” 、”normal”、”fast”)来控制。callback用于在show函数执行完之后,要执行的函数。
八. val()
val() 方法返回或设置被选元素(注意是元素的值,而不是元素内容)的值,元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
返回被选元素的值:$(selector).val()
设置备选元素的值:$(selector).val(value),value可选。
$("input:text").val("哈哈哈");
九. text()
text() 方法方法设置或返回被选元素的文本内容。
返回被选元素的文本内容:$(selector).text()
设置备选元素的文本内容:$(selector).text(value),value可选。
//获取下拉框 选中 的内容 $("select[name='test']>option:selected").each(function () { console.log($(this).text()); });
十. each()
each() 方法规定为每个匹配元素规定运行的函数。使用方法:$(selector).each(function(index,element))
index – 选择器的 index 位置
element – 当前的元素(也可使用 “this” 选择器)
//获取多选框 选中 的内容 $(":checkbox:checked").each(function () { console.log($(this).val()); });
十一:attr()
attr() 方法设置或返回被选元素的属性和值。
十二:prop
prop() 方法设置或返回被选元素的属性和值。
prop() 方法主要用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)如需检索 HTML 属性,请使用 attr() 方法代替。
$("button").attr("disabled",true); //true不要用引号包裹 $("button").attr("disabled",false);
请登录之后再进行评论