console.info($("#div1").text());
console.info($("#div1").length);
console.debug($("div").length);
console.debug("-----------------------------------------------------------------------------------------");
/*获取ipput并列的div层*/
console.debug($("input,div").text());
console.debug("-----------------------------------------------------------------------------------------");
/*获取div并列的input层*/
console.debug("-----------------------------------------------------------------------------------------");
console.debug($("div>input").text());
console.debug("-----------------------------------------------------------------------------------------");
/*匹配input紧接在div后面的所有元素*/
console.debug($("div+input").length);
console.debug($("div+input").text());
console.debug("-----------------------------------------------------------------------------------------");
/*匹配div之后的input的所有元素*/
console.debug($("div~input").length);
console.debug($("div~input").text());
/* jquery 获取值相关的方法,如果针对多个元素进行操作,那么返回的第一个元素的值;
jquery 设置值相关的方法,如果针对多个元素进行操作,那么设置的是所有的元素值;*/
/*设置CSS样式*/
$("#div1").css("color","red").css("fontSize","30px");
/*追加字符串*/
$("#div1").css("color","red").css("fontSize","30px").append("强骏梦");
/*所有字符串匹配的标签添加内容*/
$("div div").append("XXXXXXXXXXXXXXXXXXX");
/*再匹配元素后添加兄弟标签*/
$("div div").after("<p>1233123131231313131312331231313131311313131</p>");
/*再匹配元素前添加兄弟标签*/
$("div div").before("<p style='color:
red'>1111111111111111111111111111111111111111</p>");
/*把匹配到的元素插入到一个层里面*/
$("div div").insertBefore($("#div1"));
/*
* 删除
empty(): 删除匹配的元素所有的子节点。
remove([jquery选择器]):DOM中删除所有匹配的元素。
* */
/*删除所有子节点*/
$("div div").empty();
/*删除所匹配的元素*/
$("div div").remove();
/*替换*/
$("div div").replaceWith("<P STYLE='color:
green'>QQQQQQQQQQQQQQQQQQQQQQQ</P>");
/*克隆*/
/*
* clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
clone(true) 元素以及其所有的事件处理并且选中这些克隆的副本
* */
/*
$("p").clone(true).append(document.body);*/
/*属性操作checked*/
/$("#btn").click(function
() {
alert("312");
});
console.debug($("#div1 .s1").length);
/*获取div层下类选择器为是s1的层，并且为指定的层，并显示层中的内容*/
console.debug($("#div1 .s1").get(1).innerHTML);
console.debug("------------------------------------");
console.debug($("#div1 .s1").get(1).innerText);
console.debug("------------------------------------");
/*打印所匹配的所有层*/
var str=$("#div1 .s1");
for(var i=0;i<str.length;i++){
console.debug($("#div1 .s1").get(i).innerText);
}
/*改变匹配到的所有层内容的属性*/
$("#div1 .s1").css("color","red");
console.debug("------------------------------------");
/*改变指定匹配元素的属性*/
console.debug($("#div1 .s1").get(2).innerHTML);
|
$("*") |
选取所有元素 |
|
$(this) |
选取当前 HTML 元素 |
|
$("p.intro") |
选取 class 为 intro 的 <p> 元素 |
|
$("p:first") |
选取第一个 <p> 元素 |
|
$("ul li:first") |
选取第一个 <ul> 元素的第一个 <li> 元素 |
|
$("ul li:first-child") |
选取每个 <ul> 元素的第一个 <li> 元素 |
|
$("[href]") |
选取带有 href 属性的元素 |
|
$("a[target='_blank']") |
选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
|
$("a[target!='_blank']") |
选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
|
$(":button") |
选取所有 type="button" 的 <input> 元素和 <button> 元素 |
|
$("tr:even") |
选取偶数位置的 <tr> 元素 |
|
$("tr:odd") |
选取奇数位置的 <tr> 元素
|
$(document).ready()：允许我们在文档完全加载完后执行函数
click()：当按钮点击事件被触发时会调用一个函数
dblclick()：当双击元素时，会发生 dblclick 事件
mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件
mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
hover()：用于模拟光标悬停事件
focus()：当元素获得焦点时，发生 focus 事件
blur()：元素失去焦点时，发生 blur 事件