您的位置：首页 > Web前端 > JQuery

JQuery--Note

2017-02-23 17:23 78 查看
JQuery 优秀的JavaScript库

① JQuery对象就是通过JQuery( $(DOM) )包装DOM对象后产生的象,

② JQuery对象是数组，可以通过角标【index】的方法获取到DOM

对象，（注意如果获取的是JQuer对象需要在变量前面加$）

//JQuery对象
var $cr = $("cr")
//DOM对象
var cr = $cr[0];


JQuery简单的helloworld

<html>
<head>
<meta <
4000
span class="hljs-attribute">charset="UTF-8">
<title></title>
//导入JQ
<script type="text/javascript" src="js/jquery-1.7.2.js" ></script>
<script type="text/javascript" charset="utf-8">
//$(function(){})相当于window.onload
$(function(){
//1.选取button:$("button")
//2.为button对象添加响应函数：$("button").click(function(){})
$("button").click(function(){
//3.helloworld
alert("helloworld");
//调用JQ方法，得到button的文本值
alert($(this).text());
});

----------

----------

//jQuery 和 DOM 对象
//1. 由 jQuery 对象转为 DOM 对象
//1). 获取一个 jQuery 对象
var $btn = $("button");

//2). jQuery 对象是一个数组.
//alert($btn.length);

//3). 可以通过数组的下标转为 DOM 对象
//alert($btn[1].firstChild.nodeValue);

//2. 由 DOM 对象转为 jQuery 对象
//1). 选取一个 DOM 对象
var btn = document.getElementById("btn");

//2). 把 DOM 对象转为一个 jQuery 对象: 使用 $() 进行包装
alert("--" + $(btn).text())
})

</script>
</head>
<body>
<button id="1">Click</button>
<button id="2">Click2</button>
</body>
</html>

----------


选择器是JQ的根本，对事件的处理，遍历DOM和Ajax的操作都依赖于选择器

优点：写法简洁；完善的事件处理机制

①基本选择器( $(“”) )

选择器

1).#id

2).class

3).element

4). * 匹配所有的元素

5). selector1 , selector2,……. 将每个选择器匹配到的元素合并后一起返回

②层次选择器

如果想通过DOM

元素之间的层次关系来获取特定的元素，例如后代元素、子元素、兄弟元素等

1).$(“ancestor descendant”) 获取ancestor后面的所有后代元素

2). $(“parent > child”) 获取parent后面的子元素

3).$(“prev + next”) 获取prev 元素的下一个元素

4).$(“prev ~ next”) 获取prev后面的所有元素

注意：JQ方法siblings()选择后面所有的同辈元素；nextAll()方法选择后面所有元素

例：
$("#two").siblings("div").css("background","blue");


选择id为two的元素调用siblings方法，获取所有兄弟div元素，并将其背景色置蓝。

例2：
$("#one").nextAll("span:first").css("background","orange");


选择id为one的元素，调用nextAll()方法和过滤器：first,获取后面元素中的第一个span 元素，置蓝。

③过滤选择器：通过过滤规则筛选所需的Dom元素

根据不同的过滤规则，过滤选择器可以分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单元素过滤器

1).基本过滤器

:first :last

:not(selector) 去除所有与给定选择器匹配的元素

:header 选取所有标题元素

:animated 选取所有正在执行动画的所有元素

:even 选取索引时偶数的所有元素

:odd 选取索引时奇数的所有元素

:eq(index) 选取索引等于index的元素

:gt(index) 选取索引大于index的元素

:lt(index) 选取索引小于index的元素

2).内容过滤选择器：过滤规则体现在其所包含的子元素和文本内容上

：contain(text) 选择含有文本内容text的元素

:empty 选择不含子元素或者文本内容的空元素

:has(selector) 选择与选择器所匹配的元素

:parent 选择含有子元素或者文本的元素

3).可见性过滤选择器

:hidden 选取所有不可见元素

:visible 选取所有可见元素

4).属性过滤选择器：通过元素的属性获取响应元素

[attribute] 选择含有某个属性的元素

[attribute=value]选择属性值等于value的元素

[attribute!=value]选择属性值不等于value的元素

[attribute^=value]选择属性值以value开头的元素

[attribute$=value]选择属性值以value结尾的元素

[attribute*=value]选择属性值包含value的元素

[selector1][selector2]…..用多个属性选择器合并成一个复合属性选择器

5).子元素过滤器

:first-child 选取每个父元素的第一个子元素

:last-child 选取每个父元素的最后一个子元素

:only-child 如果某个元素是其父元素的唯一子元素，那么匹配

:nth-child(index/odd/even/equation) 选取父元素中第index个子元素或奇偶元素

6).表单过滤选择器

①表单对象过滤选择器

:enabled

:disabled

:checked

:selected

②表单选择器

:input

:text

:password

:radio

:checkbox

:sbmit

:image

:reset

:button

:file

:hidden

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
//使得所有的单行文本框的value的值变为“中国”
alert($(":text:enabled").length);
alert($(":text:enabled").val());
$(":text:enabled").val("中国");
});

$("#btn2").click(function(){
//使得所有不可用的单行文本框的value值变为美国
$(":text:disabled").val("美国");
});

$("#btn3").click(function(){

alert($(":checkbox[name='check']:checked").length);
});

$("#btn5").click(function(){
//多选框
//实际被选择的不是 select, 而是 select 的 option 子节点
//所以要加一个 空格
var len = $("select :selected").length;
alert(len);

//因为 $("select :selected") 选择的是一个数组
//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.
//alert($("select :selected").val());

//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
//得到的 DOM 对象, 而不是一个 jQuery 对象
$("select :selected").each(function(){
alert(this.value);
});
});
})

</script>
</head>
<body>
<h2>表单属性过滤器</h2>
<button id="btn1">对表单内的可用input赋值</button>
<button id="btn2">对表单内不可用input赋值</button>       <br />
<button id="btn3">获取多选框内的个数</button>
<button id="btn4">获取多选框内的值</button>     <br />
<button id="btn5">获取下拉选框中的内容</button>       <br />

<h3>表单</h3>
<form id="form1" action="#">
可用元素：<input name="yes" value="可用文本框1" />
不可用元素：<input name="no" disabled="disabled" value="不可用文本框1" /><br />
可用元素：<input name="yes1" value="可用文本框2" />
不可用元素：<input name="no" disabled="disabled" value="不可用文本框2" />
</form>
<h3>多选框</h3>
<input type="checkbox" name="check" checked="checked" value="check1"  />check1
<input type="checkbox" name="check"  value="check2"  />check2
<input type="checkbox" name="check" checked="checked" value="check3"  />check3
<input type="checkbox" name="check" value="check4"  />check4
<input type="checkbox" name="check" checked="checked" value="check5"  />check5
<br /><br />
<h3>下拉列表</h3>
<select name="select" multiple="multiple" style="background-color: deepskyblue;">
<option>新余</option>
<option selected="selected">南昌</option>
<option>上饶</option>
<option selected="selected">鹰潭</option>
<option>景德镇</option>
</select>
</body>
</html>


注意：

选取被选中的select的option需要用选取子节点的方式

$("select :selected").each(function(){
});


JQ的一些方法

①val() 获取或设置表单元素的value属性值

//设置值
$(":text:enabled").val("中国")
//获取值
$(":text:enabled").val()


②attr() 与 val方法类似

attr(name,value) 为name属性赋值value

attr(name) 获取name属性的值

③each() 对jquery对象进行遍历，其参数是function，函数内部的this是正在遍历的DOM对象

$("select :selected").each(function(){
alert($(this).val());
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript jquery
相关文章推荐
新的分享
章节导航