前端基础之jQuery
2018-01-05 22:12
399 查看
前端学习之 jQuery基础
我这人好奇心比较重，什么都想学。看到别人把网站写的那么漂亮，心里头痒痒啊，再加上老师布置了一个小作业，我就连夜把jQuery这个最流行的JavaScript库学习了一下，实现了一点小功能。前端学习之 jQuery基础
1什么是jQuery
引入和导入对象
jQuery与DOM之间相互转换
2jQuery五种选择器
基本选择器
层级选择器
基本过滤选择器
属性选择器
表单选择器
3 利用jQuery完成表格隔行换色
4 用jQuery完成全选和全不选
5省市二级联动
1、什么是jQuery？
jQuery是一个快速、简洁的JavaScript框架，jQuery设计的宗旨是write Less，Do More“，即倡导写更少的代码，做更多的事情。它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocu
4000
ments、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
…………
总之，你知道这玩意非常diao就行了。
引入和导入对象
在学习JavaScript的时候，学过自定义库的导入，jQuery就是将需要的js库下载下来，在html中使
<script>导入即可。在实际应用中，习惯将
<script>标签编写在
<head>标签体内。
<script type="text/javascript" src="jquery-1.8.3.js"></script>
需要说明的是在jQuery基本语法里，“jQuery==$”，区分大小写。
jQuery与DOM之间相互转换
jQuery与DOM之间可以相互转换，但是两者对象的函数不能混搭使用。jQuery对象只能使用自己的函数。jQuery提供的
ready()函数，用于页面成功加载后执行。与
windows.onload函数一样。
<script>
window.onload = function(){
alert("shengshengshiwo");
}
//传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
window.onload = function(){
alert("shengshengshiwo");
}
//JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
jQuery(document).ready(function(){
alert("shengshengshiwo");
});
//JQ不存在覆盖问题，加载的时候是顺序执行
$(document).ready(function(){
alert("shensghensghiwo");
});
//简写方式
$(function(){
alert("shengshensghiwo");
});
</script>emmmm……个人比较喜欢简写形式。
2、jQuery五种选择器
基本选择器
id 选择器，格式：$("#id值")标签选择器， 格式：
$("标签名")类选择器， 格式：
$(".class类名")*选择器，格式：
$("*")element 选择器， 格式：
$("p")<head>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","green");
});
$("#btn2").click(function(){
$(".mini").css("background-color","green");
});
$("#btn3").click(function(){
$("div").css("background-color","green");
});
$("#btn4").click(function(){
$("*").css("background-color","green");
});
$("#btn5").click(function(){
$("#two,.mini").css("background-color","green");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
</body>层级选择器
子选择器:，格式：$(“parent>child”)
选择所有指定”parent”元素中指定的”child”的直接子元素。
后代选择器， 格式：
$(“ancestor descendant”)
选择给定祖先ancestor元素的所有后代元素，包括子元素，孙子元素等全部后代元素。
相邻兄弟选择器， 格式：
$(“prev + next”)
选择所有紧接在prev元素后的next元素。
一般兄弟选择器， 格式：
$(“prev ~ siblings”)
匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤出“siblings”选择器。
<head>
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
});
$("#btn2").click(function(){
$("body>div").css("background-color","gold");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","gold");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","gold");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>基本过滤选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| :first | $(“p:first”) | 第一个< p >元素 |
| :last | $(“p:last”) | 最后一个< p >元素 |
| :even | $(“p:even”) | 所有偶数< p >元素 |
| :odd | $(“p:odd”) | 所有奇数< P >元素 |
| :eq(index) | $(“ul li:eq(3)”) | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
| :lt(no) | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
| :not(selector) | $(“input:not(:empty)”) | 所有不为空的 input 元素 |
| :header | $(“:header”) | 所有标题元素 < h1 > - < h6 > |
| :animated | $(“:animated”) | 所有动画元素 |
<head>
<script>
$(function(){
$("#btn1").click(function(){
//body中第一个为div元素，返回单个元素。
$("body div:first").css("background-color","red");
});
$("#btn2").click(function(){
//body最后一个div元素，返回单个元素
$("body div:last").css("background-color","red");
});
$("#btn3").click(function(){
//body索引为奇数的元素，返回集合元素。
$("body div:odd").css("background-color","red");
});
$("#btn4").click(function(){
//body索引为偶数的元素，返回集合元素。
$("body div:even").css("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="body中的第一个div元素"/>
<input type="button" id="btn2" value="body中的最后一个div元素"/>
<input type="button" id="btn3" value="选择body中的奇数的div"/>
<input type="button" id="btn4" value="选择body中的偶数的div"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>属性选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| [attribute] | $(“[href]”) | 所有带有 href 属性的元素 |
| [attribute] | $(“href=’#’”) | 所有带有href属性的元素 |
| [attribute!=value] | $(“[href!=’#’]”) | 所有 href 属性的值不等于 “#” 的元素 |
| [attribute￥(换成英文状态下)=value ] | $(“[href￥(换成英文状态下)=’.jpg’]”) | 所有 href 属性的值包含以 “.jpg” 结尾的元素 |
<head>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","red");
});
$("#btn2").click(function(){
$("div[id='two']").css("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择有id属性的div"/>
<input type="button" id="btn2" value="选择有id属性的值为two的div"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>表单选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| :input | $(“:input”) | 所有 < input > 元素 |
| :text | $(“:text”) | 所有 type=”text” 的 < input > 元素 |
| :password | $(“:password”) | 所有 type=”password” 的 < input > 元素 |
| :radio | $(“:radio”) | 所有 type=”radio” 的 < input > 元素 |
| :checkbox | $(“:checkbox”) | 所有 type=”checkbox” 的 < input > 元素 |
| :submit | $(“:submit”) | 所有 type=”submit” 的 < input > 元素 |
| :reset | $(“:reset”) | 所有 type=”reset” 的 < input > 元素 |
| :button | $(“:button”) | 所有 type=”button” 的 < input > 元素 |
| :image | $(“:image”) | 所有 type=”image” 的 < input > 元素 |
| :file | $(“:file”) | 所有 type=”file” 的 < input > 元素 |
| :enabled | $(“:enabled”) | 所有激活的 input 元素 |
| :disabled | $(“:disabled”) | 所有禁用的 input 元素 |
| :selected | $(“:selected”) | 所有被选取的 input 元素 |
| :checked | $(“:checked”) | 所有被选中的 input 元素 |
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$(":input").css("background","green");
$("#btn1").click(function(){
$(":input").css("background","red");
})
});
})
</script>
</head>
<body>
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框" />
<br/>
<form>
<input type="text" /><br />
<input type="checkbox" /><br />
<input type="radio" /><br />
<input type="image" /><br />
<input type="file" /><br />
<input type="submit" />
<input type="reset" /><br />
<input type="password" /><br />
<input type="button" /><br />
<select><option/></select><br />
<textarea></textarea><br />
<button></button>
</form>
</body>3、 利用jQuery完成表格隔行换色
有了前面学习的基础，这一个小的任务算是很简单了。用一下基本过滤选择器，odd了……even了……啧啧啧，水到渠成。首先先把表格写出来放进
<body>标签里
<body> <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td>1</td> <td>张张</td> <td>22</td> </tr> <tr > <td>2</td> <td>刘刘</td> <td>25</td> </tr> <tr > <td>3</td> <td>旺旺</td> <td>27</td> </tr> <tr > <td>4</td> <td>田田</td> <td>29</td> </tr> <tr > <td>5</td> <td>洋洋</td> <td>30</td> </tr> <tr > <td>6</td> <td>乐乐</td> <td>20</td> </tr> </tbody> </table> </body>
下面开始写jQuery函数来实现功能
<head>
<meta charset="UTF-8">
<title>使用jQuery完成表格隔行换色</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("tbody tr:odd").css("background-color","yellow");
$("tbody tr:even").css("background-color","green")
});
</script>
</head>是不是超级简单，还记得在纯JavaScript的时代吗？是不是符合了那句话
write less, do more!!!
4、 用jQuery完成全选和全不选
首先分析一下，首先：表格最前列得有个checkbox，这样才能选对不对，然后，完成所需功能。
完成表格,把上面的那个复制下来加上一行就OK了。
<body> <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> <thead> <tr> <th><input type="checkbox" id="select"></th> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>1</td> <td>张张</td> <td>22</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>2</td> <td>刘刘</td> <td>25</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>3</td> <td>旺旺</td> <td>27</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>4</td> <td>田田</td> <td>29</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>5</td> <td>洋洋</td> <td>30</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>6</td> <td>乐乐</td> <td>20</td> </tr> </tbody> </table> </body>
下面就是完成复选框的全选和选不选的功能了。通过学习了解到，
attr和
prop都可以达到相应功能，但是随着jQuery版本的升级，
attr方法也会发生变化，所以我们还是用
prop方法吧。
<head>
<meta charset="UTF-8">
<title>使用jQuery完成复选框的全选和全不选</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#select").click(function(){
$("tbody input").prop("checked",this.checked); });
});
</script>
</head>两三行代码就解决了，是不是又在感叹！
5、省市二级联动
之前尝试过用JavaScript写这种二级联动，今天又学习了一下jQuery写。代码挺简洁，也很好入手。老样子，还是先分析一下思路。1、 先获取用户选择的省份
var val = this.value;
2、 创建一个二维数组用来存储省和市
var cities = new Arrays(1);
cities[0] = new Arrays("郑州市","洛阳市","开封市","安阳市");
cities[1] = new Arrays("长沙市","郴州市","株洲市","岳阳市");3、 遍历二维数组中的省份
$.each(cities,function(i,n))
4、 判断用户选择的省份与遍历的省份
if(val==i)
5、 遍历该省份下的所有城市
$.each(cities[i],function(j,m))
6、 创建城市文本节点
var textNode = document.createTextNode(m);
7、 创建option元素节点
var opEle = document.createElement("option");8、 将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
9、将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));10、 清除第二个下拉列表的内容
$("#city").empty();Ok了，这样就大功告成了。jQuery中的这几个函数，很好理解，简单易学。
附完整版代码：
<script>
$(function(){
//2.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function(){
//10.清除第二个下拉列表的内容
$("#city").empty();
//1.获取用户选择的省份
var val = this.value;
//alert(val);
//3.遍历二维数组中的省份
$.each(cities,function(i,n){
//alert(i+":"+n);
//4.判断用户选择的省份和遍历的省份
if(val==i){
//5.遍历该省份下的所有城市
$.each(cities[i], function(j,m) {
//alert(m);
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
<td>
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</td>jQuery的入门学习就先这样吧。以后慢慢深入。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端学习笔记--jQuery--基础知识--动画篇
- WEB前端 | JS基础——(13)JQuery
- 前端计划第二天-jQuery基础
- Web前端开发——JQuery基础梳理
- 前端基础进阶（八）：详细图解jQuery对象，以及如何扩展jQuery插件
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-在字符串中使用引号
- 前端基础—jQuery
- 前端学习-jQuery学习小笔记（1）——jQ基础以及各种选择器
- 前端基础之jQuery
- 网站前端_jQuery-基础入门.玩转jQuery基本/层次/过滤/表单选择器?
- 前端基础-jQuery的内容之选择器
- 前端学习笔记--jQuery--基础知识--事件篇
- 源码-JavaScript&jQuery交互式前端开发-第1章-编程基础知识
- 前端框架技术--jQuery基础应用
- 前端基础-jQuery的事件的用法
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储数字
- web前端基础：用jQuery制作双色表格代码分享
- 5 HTML&JS等前端知识系列之jquery基础
- 前端基础-jQuery的动画效果
- 前端学习笔记--jQuery--基础知识--DOM篇