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

jquery第一季（概述，基本选择器与层次选择器）

2017-02-23 21:06 441 查看
jquery第一季概述：

什么是jquery:

jquery是一个js框架

   
这个框架可以帮我快速方便的操作html的css样式，修改html内容，查找html元素

为什么要学习jquery：

   
  >jquery可以兼容大部分浏览

      >jquery代码比较简洁

      >jquery应用非常广泛

注意:

      jquery2.0版本之后不再兼容ie6,7,8

学习之前先问一下：

      what why where how

如何使用jquery

       1.需要导入jquery-3.1.1.js文件到项目

       2.需要在要使用jquery-3.1.1.js的页面中引入该js文件

                <script src =""></script>

如何获取一个jquery对象

var $a =$("#one"); 
获取id为one的所有元素

$a.val() ; 
获取a的value值

$a.html(); 
获取a的innerHTML

jquery对象和js对象之间的转换：

js--->jquery

var j =document.getElementById("one");

var $j = $(j);

jquery--->js

var $a =$("#one");

var a = $a.get(0);

在jquery中如何表示页面已经加载完毕？

$(document).ready(function(){

   alert("xxx");

})

该方法和window.onload方法之间的区别：

如果我在一个页面写了多个window.onload，那么最后一个window.onload会把前面的覆盖掉。

如果写了多个$(document).ready，不会覆盖，内部会有一个栈队，会依次执行队列里面的每
个$(document).ready

选择器的分类：

基本选择器：

层次选择器：
基本过滤选择器： 

内容过滤选择器： 

可见元素过滤器

属性选择器：
子元素过滤选择器
表单选择器

表单对象属性过滤选择器

详解：

基本选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!--   引入jQuery -->
<script src="../js/jquery-3.1.1.js"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
</script>
</head>

<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>

<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
<input type="button" value="选择 所有的元素." id="btn4" />
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />

<br /><br />

<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>

<span id="mover">正在执行动画的span元素.</span>

</body>

</html>
运行界面：



选择器测试的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-3.1.1.js"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
$(function() {
// <input type="button" value="选择 id为 one 的元素." id="btn1" />
$("#btn1").click(function() {
$("#one").css("background-color", "red");
});
// <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
$("#btn2").click(function() {
$(".mini").css("background-color", "red");
});
// <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
$("#btn3").click(function() {
$("div").css("background-color", "red");
});
// <input type="button" value="选择 所有的元素." id="btn4" />
$("#btn4").click(function() {
$("*").css("background-color", "red");
});
// <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
$("#btn5").click(function() {
$("span,#two").css("background-color", "red");
});
});
</script>
</head>

<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>

<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
<input type="button" value="选择 所有的元素." id="btn4" />
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />

<br /><br />

<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>

<span id="mover">正在执行动画的span元素.</span>

</body>

</html>效果图如下：
点击 id为one 的元素按钮：效果如下



点击（选择class 为mini的所有元素）按钮，效果图如下：



点击（选择元素名是div 的所有元素）按钮，效果图如下：






[b]点击（选择所有元素）按钮，效果图如下：
[/b]

[b]


[/b]

[b][b]点击（选择 所有的span元素和id为two的元素）按钮，效果图如下：
[/b][/b]

[b]


[/b]

层次选择器的源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02-层次选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
</script>
</head>

<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

<input type="button" value="选择 body内的所有div元素." id="btn1" />
<input type="button" value="在body内,选择子元素是div的。" id="btn2" />
<input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5" />
<br />
<br />

<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>

<span id="mover">正在执行动画的span元素.</span>

</body>

</html>
如图：



层次选择器的jquery源码和html源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02-层次选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(function() {
// <input type="button" value="选择 body内的所有div元素." id="btn1" />
$("#btn1").click(function() {
$("body div").css("background-color", "red");
});
// <input type="button" value="在body内,选择子元素是div的。" id="btn2" />
$("#btn2").click(function() {
$("body>div").css("background-color", "red");
});
// <input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
$("#btn3").click(function() {
$("#one+div").css("background-color", "red");
});
// <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
$("#btn4").click(function() {
$("#two~div").css("background-color", "red");
});
// <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5" />
$("#btn5").click(function() {
$("#two").siblings("div").css("background-color", "red ");
});
});
</script>
</head>

<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

<input type="button" value="选择 body内的所有div元素." id="btn1" />
<input type="button" value="在body内,选择子元素是div的。" id="btn2" />
<input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5" />
<br />
<br />

<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>

<span id="mover">正在执行动画的span元素.</span>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html jquery web 脚本语言 框架
相关文章推荐
新的分享
章节导航