jQuery-第1节-jQuery和DOM对象互相转化、选择器
2016-06-22 15:26
411 查看
1. jQuery的简介
是一个JavaScript函数库
2. jQuery的优势
轻量级
强大的选择器
出色的DOM操作封装
可靠的事件处理机制
出色的浏览器兼容性
3. jQuery的使用（1.12版本）
<script src="jquery.min.js"></script>
4.jQuery对象和DOM对象
（1）jQuery对象转为DOM对象
jQuery对象是一个数组对象，通过[index]方法得到DOM对象。如：$("#text")[0]
使用jQuery中的get(index)方法，如：$("#text").get(0)
例子：
（2）DOM对象转为jQuery对象
$(DOM对象名称)，如：$(document.getElementById("div"))
例子：
5. jQuery的选择器
（1）基本选择器
* 如：$("*")，所有元素
#id属性； 如：$("#lastname")中，所有id="lastname" 的元素
.class属性；如： $(".intro") 中，所有 class="intro" 的元素
element 如：$("p") 所有 <p> 元素
.class属性 .class属性 如：$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
例子：
（2）层次选择器
$("class/id 元素")，查询class/id后的所有元素
$("class/id>元素") ，查询class/id中所有的子节点（一级）
$("class/id +next"),选取class/id元素的下一个元素
$("class/id ~元素")，选取class/id中所有的元素
例子：
（3）过滤选择器
基本过滤选择器：
:first，匹配选择第一个元素
:last匹配选择最后一个元素
:not(selector)去除所有匹配元素
:odd匹配所有奇数的元素
:even匹配素偶数的元素
:eq(index)匹配一个指定的索引值值的元素
:gt(index)匹配大于指定所有值的元素
:lt(index)匹配小于指定所有值的元素
.header选择所有h1-h6的head标签
:animated匹配正在执行的动画效果的元素
例子：
2. 内容过滤选择器
$("id/class/标签 :contains('文本')")，选取文本内容的text元素
$("id/class/标签 :has('标签')")，选取含有标签的所有元素
例子：
3. 可见性选择器
:hidden，选取所有不可见的元素
:visible，选取所有可见元素
例子：
4.属性过滤器
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
例子：
5.子元素过滤器
:nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
:nth-child(2): 能选取每个父元素下的索引值为 2 的元素
:nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
:nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
:first:child: 获取每个父元素的第一个元素
:last:child: 获取每个父元素的最后一个元素
:only:child: 如果某一元素是它父元素中唯一的子元素，那么将匹配
例子：
6.表单对象属性过滤器
例子：
是一个JavaScript函数库
2. jQuery的优势
轻量级
强大的选择器
出色的DOM操作封装
可靠的事件处理机制
出色的浏览器兼容性
3. jQuery的使用（1.12版本）
<script src="jquery.min.js"></script>
4.jQuery对象和DOM对象
（1）jQuery对象转为DOM对象
jQuery对象是一个数组对象，通过[index]方法得到DOM对象。如：$("#text")[0]
使用jQuery中的get(index)方法，如：$("#text").get(0)
例子：
<body>
<p id="p1">段落一</p>
<p id="p2">段落二</p>
<input type="button" value="使用DOM修改第一个段落" onclick="change()">
<input id="btn1" type="button" value="使用JQuery修改第一个段落"><br/>
<input id="btn3" type="button" value="JQuery对象转为DOM对象">
<script>
//使用DOm修改第一个段落
function change(){
var a=document.getElementById("p1");
a.innerHTML="使用DOM修改第一个段落";
}
//
$(document).ready(function(){
//使用jQuery修改段落
$("#btn1").click(function(){
$("#p1").html("使用JQuery修改段落");
});
//JQuery对象转为DOM
$("#btn3").click(function(){
//(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
// $("#msg")[0]
//(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
//$("#msg").get(0)
var dom_b=$("#p2")[0];//对象[0]从JQ对象中获取DOM对象
dom_b.innerHTML="JQuery对象转为DOM";
});
});
</script>
</body>（2）DOM对象转为jQuery对象
$(DOM对象名称)，如：$(document.getElementById("div"))
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery对象和DOM对象</title>
<script src="jquery.js"></script>
</head>
<body onload="load()">
<p id="p1">段落一</p>
<p id="p2">段落二</p>
<input type="button" value="使用DOM修改第一个段落" onclick="change()">
<input id="btn1" type="button" value="使用JQuery修改第一个段落"><br/>
<input id="btn2" type="button" value="DOM对象转为JQuery对象">
<script>
//使用DOm修改第一个段落
function change(){
var a=document.getElementById("p1");
a.innerHTML="使用DOM修改第一个段落";
}
//
$(document).ready(function(){
//使用jQuery修改段落
$("#btn1").click(function(){
$("#p1").html("使用JQuery修改段落");
});
//DOM对象转为JQuery
$("#btn2").click(function(){
var b=document.getElementById("p2");
var jq_b=$(b);//$(DOM对象)
//$(DOM 对象后产生的对象)
jq_b.html("DOM对象转为JQuery");
});
</script>
</body>
</html>5. jQuery的选择器
（1）基本选择器
* 如：$("*")，所有元素
#id属性； 如：$("#lastname")中，所有id="lastname" 的元素
.class属性；如： $(".intro") 中，所有 class="intro" 的元素
element 如：$("p") 所有 <p> 元素
.class属性 .class属性 如：$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
例子：
<p>H5edu.cn</p>
<p>你好</p>
<div><img src="image/logo.png" width="30%" height="30%"></div>
<input type="button" id="btn1" value="p标签隐藏"><br/>
<input type="button" id="btn2" value="全部显示"><br>
<input type="button" id="btn3" value="div,p隐藏">
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").hide();
});
$("#btn2").click(function(){
$("*").show();//匹配所有的元素
});
$("#btn3").click(function(){
$("div,p,#btn1").hide();//集合元素，可以写标签，也可以加id属性，多个中间用，号分开
});
});
</script>（2）层次选择器
$("class/id 元素")，查询class/id后的所有元素
$("class/id>元素") ，查询class/id中所有的子节点（一级）
$("class/id +next"),选取class/id元素的下一个元素
$("class/id ~元素")，选取class/id中所有的元素
例子：
<h2>层次选择器</h2>
<div id="div1">
<p id="p1">段落</p>
<h2>张新丁</h2>
<h2>你好</h2>
<div id="div2">
<img src="image/logo.png" width="30%" height="30%">
<h2>层次选择器</h2>
<img src="image/logo.png" width="30%" height="30%">
<img src="image/logo.png" width="30%" height="30%">
</div>
<p id="p2">
<img src="image/logo.png" width="30%" height="30%">
</p>
</div>
<script>
$(function(){//简写：$(document).ready(function(){});
//div1 H2是指div1中所有的H2
$("#div1 H2").css("color","red");
//#div1>H2表示div1中的所有的直接子节点（一级）
$("#div1>H2").css("background-color","pink");
//+号表示后面的一个元素
$("#p1+H2").css("border","1px solid blue");
//h2中所有的img
$("h2~img").css({"width":"20%","height":"20%","border":"dashed 1px green"});
});
</script>（3）过滤选择器
基本过滤选择器：
:first，匹配选择第一个元素
:last匹配选择最后一个元素
:not(selector)去除所有匹配元素
:odd匹配所有奇数的元素
:even匹配素偶数的元素
:eq(index)匹配一个指定的索引值值的元素
:gt(index)匹配大于指定所有值的元素
:lt(index)匹配小于指定所有值的元素
.header选择所有h1-h6的head标签
:animated匹配正在执行的动画效果的元素
例子：
<h3>过滤选择器的使用</h3>
<ul>
<li>:first匹配选择第一个元素</li>
<li>:last匹配选择最后一个元素</li>
<li>:not(selector)去除所有匹配元素</li>
<li>:odd匹配所有奇数的元素</li>
<li>:even匹配所有偶数的元素</li>
<li>:eq(index)匹配一个指定的索引值的元素</li>
<li>:gt(index)匹配大于指定所有值的元素</li>
<li>:lt(index)匹配小于指定所有值的元素</li>
<li>.header选择所有h1-h6的head标签</li>
<li>:animated匹配正在执行的动画效果的元素</li>
</ul>
<table>
<tr><td>HTML</td></tr>
<tr><td>CSS</td></tr>
<tr><td>JavaScript</td></tr>
<tr><td>CSS3</td></tr>
<tr><td>HTML5新增标签</td></tr>
</table>
<script>
//设置所有的li的颜色
$(function(){
$("li").css("color","#999");
//设定第一个
$("li:first").css("color","red");
//设定最后一个
$("li:last").css("color","red");
//设定奇数
$("li:odd").css("background-color","pink");
//设定偶数
$("li:even").css("background-color","#abcdef");
//设定表隔行换色(奇数和偶数)
$("tr:odd").css("background-color","cyan");
$("tr:even").css("background-color","purple");
});
</script>2. 内容过滤选择器
$("id/class/标签 :contains('文本')")，选取文本内容的text元素
$("id/class/标签 :has('标签')")，选取含有标签的所有元素
例子：
<div><a href="">欢迎来到张新丁的个人主页,张新丁的个人空间</a></div><br/> <div><p>邮箱：zhang@qq.com</p></div> <script> $(function(){ //:contains查找所有包含“张鑫”的a元素 $("a:contains('张新')").css("color","red"); //has匹配含有该元素 $("div:has('p')").css("border","1px solid red"); }); </script>
3. 可见性选择器
:hidden，选取所有不可见的元素
:visible，选取所有可见元素
例子：
<input type="hidden" value="隐藏">
<input type="text" value="文本框">
<input type="button" id="btn1" value="获取hidden对象的value">
<input type="button" id="btn2" value="获取可见对象text内容">
<script>
$(function(){
$("#btn1").click(function(){
//hidden是隐藏对象过滤器
alert($("input:hidden").val());
});
$("#btn2").click(function(){
//visible是显示对象的过滤器
alert($("input:visible").val());
});
});
</script>4.属性过滤器
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
例子：
<img src="image/logo.png" width="30%" height="30%"><br>
<img src="image/logo.png" width="40%" alt="test" ><br>
<img src="image/logo.png" width="20%" alt="你好">
<script>
$(function(){
//选取有height属性的元素
$("img[height]").css("border","1px solid red");
//alt*='你好'选取指定属性值为‘你好’的元素
$("img[alt*='你好']").css("border","1px dashed blue");
});
</script>5.子元素过滤器
:nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
:nth-child(2): 能选取每个父元素下的索引值为 2 的元素
:nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
:nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
:first:child: 获取每个父元素的第一个元素
:last:child: 获取每个父元素的最后一个元素
:only:child: 如果某一元素是它父元素中唯一的子元素，那么将匹配
例子：
<div>
<h3>学习HTML5路线图</h3>
<p>1.HTML</p>
<p>2.CSS</p>
<p>3.JavaScript</p>
<p>4.JQuery</p>
</div>
<script>
$("div p").css("color","red");
$("div p:nth-child(5)").css("color","blue");
//nth-child(2n-1): 能选取每个父元素下的索引值为 2n-1 的元素
$("div p:nth-child(2n-1)").css("color","yellow");
</script>6.表单对象属性过滤器
例子：
姓名<input type="text" value=""><br>
性别<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex">女<br>
<input type="button" value="获取">
<script>
$(function(){
$(":button").css({"width":"100%","height":"80%"});
$(":button").click(function(){
alert($(":text").val());
alert($(":radio:checked").val());
});
});
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery如何获取用户表单提交值
- asp.net mvc基于jQuery+Ajax实现无刷新分页
- jQuery 操作元素
- 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）
- 浅析jQuery Ajax通用js封装
- jquery实现前台倒计时。应用下单24小时后自动取消该订单
- jquery的$.extend()、$.fn和$.fn.extend()
- jquery避免单双击事件冲突写法
- JQuery miscellany 整理
- jQuery如何用正则表达式验证手机号、身份证号、中文名称
- jquery 选择器 a 更多 简化
- 可模糊查询输入框(仿百度搜索栏)
- jQuery基础修炼圣典—事件篇
- jquery实现相册随机切换
- jQuery 3.0候选版本准备就绪
- 我们在使用jQuery的时候，到底在使用什么？
- JQuery中$.ajax()方法参数详解
- jQuery中$.get、$.post、$.getJSON、$.ajax 方法详解
- jQuery打印插件jqprint
- jQuery打印插件jqprint