-
处罚:
- 张邵阳
-
jquery:
- js学习和使用都比较难
-
jQuery简介:
- 是一个快速、简洁的JavaScript库.
- 设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
- 封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
-
- 压缩版本:. min.js -- 生产环境中
- 未压缩版: .js -- 开发环境
-
外部js的引入:
<!-- 引入alert.js--> <script src="./js/alert.js"></script>
-
如何使用jquery:,jquery放入项目中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jquery--> <script src="js/jquery-3.0.0.js"></script> </head> <body> </body> </html><script> /* 页面加载完毕后执行 js window.onload = function () { alert(123); } */ /* jquery $(dom对象) 页面加载完毕后执行 */ /* $(document).ready=function (){ alert(123); } */ /* 页面加载完毕后执行*/ $(function () { alert(123); }); </script>
-
jquery选择器:数组
-
id
var in1 = $("#in1");//in1:jquery对象 alert(in1.val());//获取元素的value 属性 dom.value
-
jquery/dom对象的互转:
alert("dom方式:"+in1[0].value);//juqery转成dom 对象 alert("jquery:"+$(in1[0]).val());//dom对象转为jquery
-
标签选择器:/循环
var ins= $("input");//数组-
循环方式:
for(var i = 0; i<ins.length;i++) { alert(ins[i].value);//[]:jquery转为dom }/*i:下标:代表当前操作的是第几个元素 n:具体元素的dom对象不是jquery对象 */ ins.each(function(i,n){ alert($(n).val()); })
-
类选择器:
/* 类选择器*/ var a = $(".three");//jquery alert(a.html());//获取html内容 a.html("jquery修改为two");//修改
-
通用选择器:
/* * 通用选择器*/ var ops = $("*"); ops.each(function (i,n){ //将dom对象转为jquery对象 console.log($(n).html()); });
-
并集选择器:
/* 并集选择器 选择 类名为 one 或是two或是id为afour的元素 */ var ops = $(".one,.two,#afour"); console.log(ops); ops.each(function(i,n) { alert($(n).html()); });
-
案例:
-
点击按钮隐藏div
-
引入jquery
-
绑定事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 50px; height: 50px; border: 1px solid red; background-color: yellow; } </style> <!-- 导入jquery --> <script src="js/jquery-3.0.0.js"></script> </head> <body> <div id="dv"></div> <button id="btn">点击隐藏</button> <button id="btn1">点击显示</button> <button id="btn2">显示/隐藏切换</button> <script> // 页面加载完毕后执行 $(function () { /* var btn = document.getElementById("btn"); btn.onclick = function () */ /* jquery绑定事件 隐藏div*/ $("#btn").click(function () { //this:dom $(this):jquery对象 //console.log($(this)); $("#dv").hide();//隐藏 }); /* 点击显示div */ $("#btn1").click(function () { $("#dv").show();//显示 }); /* 切换div的隐藏或是显示 */ $("#btn2").click(function () { $("#dv").toggle();//切换 }); }); </script> </body> </html>
-
-
-
案例: 菜单的显示或是隐藏:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 1.引入jquery--> <script src="js/jquery-3.0.0.js"></script> </head> <body> <div> <!-- 绑定事件--> <span onclick="showCity(this)">湖北</span> <ul id="hbul"> <li>襄阳</li> <li>宜昌</li> <li>荆门</li> </ul> </div> <div> <!-- 绑定事件--> <span onclick="showCity(this)">河南</span> <ul id="hnul"> <li>南阳</li> <li>郑州</li> <li>开封</li> <li>信阳</li> </ul> </div> <div></div> <script> /* 需求: 1. 一开始只能显示省份 市要隐藏 --hide(), 2. 当点击省的时候显示该省下的市区 -- show() */ //1.页面加载完毕后所有的市区全部隐藏 $(function(){ $("#hbul").hide(); $("#hnul").hide(); }); //点击省后显示该省下的市区 function showCity(el) { //将所有的省的市区全部隐藏 ul $("ul").hide();//隐藏所有的ul //1.获取到ul var ul = el.nextElementSibling;//dom $(ul).show()//显示市区 } </script> </body> </html>
-
网友评论