JQuery入门（一）
来源：互联网 发布：诛仙手游破凶辅助软件 编辑：程序博客网 时间：2024/06/05 07:00
1、JQuery加载方式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> jQuery(document).ready(function(){ alert("aaa"); }); $(document).ready(function(){ alert("bbb"); }); $(function(){ alert("ccc"); }); </script> </head> <body> </body></html>2、JQ的获取
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> $(function(){ //Js方式 document.getElementById("btn").onclick = function(){ alert("aaa"); } //JQ方式 $("#btn").click(function(){ alert("ddd"); }); }); </script> </head> <body> <input type="button" value="点击" id="btn"/> </body></html>3、DOM对象和JQ对象的转换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> function writejs(){ //Js的DOM操作 document.getElementById("span1").innerHTML = "好可爱"; } $(function(){ $("#btn").click(function(){ //JQ $("#span1").html("呵呵呵"); }); }); </script> </head> <body> <input type="button" value="JS写入" onclick="writejs()"/> <input type="button" value="JQ写入" id="btn"/><br /> 哎呀<span id="span1">你好帅</span> </body></html>
JQ无法使用innerHTML。JS也无法使用html(“value”)。
JQ对象和DOM对象可以相互转化：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script><script> function writejs(){ //Js的DOM操作 //document.getElementById("span1").innerHTML = "好可爱"; //DOM对象转化成JQ对象 var spanELe = document.getElementById("span1"); $(spanELe).html("卡哇伊");; } $(function(){ $("#btn").click(function(){ //JQ //$("#span1").html("呵呵呵"); //JQ转化DOM，方式一 $("#span1").get(0).innerHTML = "呵呵哒"; //JQ转化DOM，方式二 $("#span1")[0].innerHTML = "厉害啦！"; }); });</script>4、广告的弹出和消失
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> $(function(){ timeShow = setInterval("showAd()",3000) }); function showAd(){ //$("#img1").show(2000); //$("#img1").show(); //$("#img1").slideDown(); $("#img1").fadeIn(3000); clearInterval(timeShow); timeHidden = setInterval("hiddenAd()",3000); } function hiddenAd(){ //$("#img1").hide(); //$("#img1").slideUp(3000); $("#img1").fadeOut(); clearInterval(timeHidden); } </script> </head> <body onload="init()"> <div> <img src="img/1.jpg" width="100%" style="display: none" id="img1"/> </div> </body></html>5、Toggle的使用-实现隐藏和显示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> $(function(){ $("#btn").click(function(){ $("#img").toggle(); }); }); </script> </head> <body"> <div> <input type="button" value="显示/隐藏" id="btn"/><br /> <img src="img/1.jpg" id="img"/> </div> </body></html>6、jquery的选择器
6.1、基本选择器
id选择器：$(“#id名称”);元素选择器：$(“元素名称”);类选择器：$(“.类名”);通配符：*多个选择器共用(并集)<script type="text/javascript" src="js/jquery-1.8.3.js" ></script><script> $(function(){ $("#btn1").click(function(){ $("#one").css("background-color","pink"); }); $("#btn2").click(function(){ $(".mini").css("background-color","pink"); }); $("#btn3").click(function(){ $("div").css("background-color","pink"); }); $("#btn4").click(function(){ $("*").css("background-color","pink"); }); $("#btn5").click(function(){ $("#two,.mini").css("background-color","pink"); }); }); </script>6.2、层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)parent > child : 在给定的父元素下匹配所有的子元素(儿子)prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)<link rel="stylesheet" href="css/style.css" /><script type="text/javascript" src="js/jquery-1.8.3.js" ></script><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>6.3、基本过滤选择器
$('li').first() 等价于：$(“li:first”)
<link rel="stylesheet" href="css/style.css" /><script type="text/javascript" src="js/jquery-1.8.3.js" ></script><script> $(function(){ $("#btn1").click(function(){ $("body div:first").css("background-color","red"); }); $("#btn2").click(function(){ $("body div:last").css("background-color","red"); }); /*奇数偶数从0开始*/ $("#btn3").click(function(){ $("body div:odd").css("background-color","red"); }); $("#btn4").click(function(){ $("body div:even").css("background-color","red"); }); });</script>6.4、属性选择器
<link rel="stylesheet" href="css/style.css" /><script type="text/javascript" src="js/jquery-1.8.3.js" ></script><script> $(function(){ $("#btn1").click(function(){ $("div[id]").css("background-color","red"); }); $("#btn2").click(function(){ $("div[id='two']").css("background-color","red"); }); });</script>6.5、表单选择器
<!DOCTYPE html><html> <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-color","pink"); }); $("#btn2").click(function(){ $(":text").css("background-color","pink"); }); }); </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></html>7、JQ完成表格的隔行换色
<!DOCTYPE html><html> <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(){ /*//偶数行设置背景颜色 $("tbody tr:even").css("background-color","yellow"); //奇数行并设置背景颜色 $("tbody tr:odd").css("background-color","green");*/ //偶数行设置背景颜色 $("tbody tr:even").addClass("even"); //$("tbody tr:even").removeClass("even"); //奇数行设置背景颜色 $("tbody tr:odd").addClass("odd"); }); </script> </head> <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></html>style.css中：
.even { background:#FFF38F;} /* 偶数行样式*/.odd { background:#FFFFEE;} /* 奇数行样式*/
8、JQ完成全选和全不选
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#select").click(function(){ //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。 //attr方法与JQ的版本有关，在1.8.3及以下有效。 //$("tbody input").attr("checked",this.checked); $("tbody input").prop("checked",this.checked); }); }); </script> </head> <body> <table border="1" width="500" height="50" align="center" id="tbl" > <thead> <tr> <td colspan="4"> <input type="button" value="添加" /> <input type="button" value="删除" /> </td> </tr> <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></html>
阅读全文
0 0
- jquery入门（一）
- JQuery（入门一）
- jQuery入门（一）
- jQuery入门（一）
- JQuery入门（一）
- Jquery 入门学习（一）
- jQuery基础入门（一）
- ajax入门,jQuery+ashx （一）
- jQuery入门学习笔记（一）
- jQuery（一）——入门
- Jquery学习入门一
- JQuery(入门一)
- Jquery基础入门(一)
- Jquery—入门一
- jquery语法入门(一)
- jQuery学习入门(一)
- Jquery基础入门一JQuery函数
- JQuery入门（一）-hello world的编写
- 【CodeForces
- Java基础 —— 原生数据类型与包装类
- [Visual Studio]MFC游戏开发之回合制对战系统二_by书訢
- Ajax的Result工具类
- oracle函数与条件表达式
- JQuery入门（一）
- 浏览器对象模型BOM
- 二维前缀和 codeforces 832C
- Laravel Composer Package 开发简明教程
- zookeeper(2) zookeeper客户端ZkClient入门
- 【KMP】POJ2752 Seek the Name, Seek the Fame
- QT UI文件生成头文件
- Vue.js 目录结构
- 判断B数组是否为A数组的子集(有重复、无序)
