JQuery- JQuery学习

jQuery与JavaScript加载页面的区别

1.JavaScript传统的方式页面加载会存在覆盖问题，加载比jQuery慢(整个页面加载完毕<包含里面的其他内容，比如图片>)

2.jQuery的加载比JavaScript加载要快！(当整个dom数结构绘制完毕就会加载)

3.jQuery不存在覆盖问题,加载的时候是顺序执行

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JQ与JavaScript加载页面的区别</title><script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script><script>window.onload = function(){alert("张三");}//传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包含里面的其他内容，比如图片>)
            window.onload = function(){alert("老宋");}//JQ的加载比JS加载要快！(当整个dom数结构绘制完毕就会加载)
            jQuery(document).ready(function(){alert("李四");});//JQ不存在覆盖问题,加载的时候是顺序执行
            $(document).ready(function(){alert("王五");});//简写方式
            $(function(){alert("赵六");});</script></head><body></body>
</html>

jQuery的获取

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JQ的获取</title><script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script><script>$(function(){//1.js的获取/*document.getElementById("btn").οnclick=function(){location.href="惊喜.html";}*///2.jq的获取======>$("#btn")
                $("#btn").click(function(){location.href="惊喜.html";});});</script></head><body><input type="button" value="点我有惊喜！" id="btn"/></body>
</html>

DOM对象与jque对象的转换

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>DOM对象与JQ对象的转换</title><script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script><script>function write1(){//1.JS的DOM操作//DOM对象无法操作JQ对象的属性和方法//document.getElementById("span1").innerHTML="萌萌哒";var spanEle = document.getElementById("span1");//将DOM对象转换成JQ对象
                $(spanEle).html("思密达");}$(function(){$("#btn").click(function(){//jQuery对象无法操作,JS技巧里面的修行//$("#span1").innerHTML = "呵呵哒";
                    $("#span1").html("呵呵哒");//jq对象向DOM对象转换方式一
                    $("#span1").get(0).innerHTML="美美哒！";//jq对象向DOM对象转换方式一
                    $("#span1")[0].innerHTML="棒棒哒";});});</script></head><body><input type="button" value="JS写入" onclick="write1()"/><input type="button" value="JQ写入" id="btn" /><br />班长：<span id="span1">你好帅！</span></body>
</html>

使用jQuery完成首页定时弹出广告图片

实现步骤

第一步：引入jQuery相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素

第四步：设置定时操作（显示广告图片的函数）

第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示（show（）)

第六步：清除显示广告图片的定时操作

第七步：设置定时操作（隐藏广告图片的函数）

第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作

代码实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>注册页面</title><script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script><script>$(function(){//1.书写显示广告的定时操作
                time=setInterval("showAd()",3000);});//2.书写显示广告图片的函数function showAd(){//3.获取广告图片//$("#img2").show(1000);
                $("#img2").slideDown(1000);//4.清除显示图片的定时操作
                clearInterval(time);//5.设置隐藏图片的定时操作
                time=setInterval("hiddenAd()",3000);}function hiddenAd(){//6.获取图片广告图片，并让其隐藏//$("#img2").hide();
                $("#img2").slideUp(1000);//7.清除隐藏图片的定时操作
                clearInterval(time);}</script></head><body><div id="father" style="height: 500px;width: 500px;"><img src="../img/1.jpg" width="100%" style="display: none" id="img2" /><!--<input type="button" value="下一张" " />--><img src="../img/1.jpg" width="100%" height="100%" id="img1"/></div></body>
</html>

toggle()的使用

切换元素的可见状态

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见.

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>toggle的使用</title><style>div{border: 1px solid white;width: 500px;height: 350;margin: auto;text-align: center;}</style><script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script><script>$(function(){$("#btn").click(function(){$("#img1").toggle();});});</script></head><body><div><input type="button" value="显示/隐藏" id="btn" /><br /><img src="../img/飞机05.gif" width="100%" height="100%" id="img1" /></div></body>
</html>

使用jQuery完成表格隔行变色

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格隔行变色</title><script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script><script>//1.页面加载
            $(function(){//2.获取tbody下面的偶数行并设置背景颜色
                $("tbody>tr:even").css("background-color","yellow");//3.获取tbody下面的齐数行并设置背景颜色
                $("tbody tr:odd").css("background-color","pink");});</script></head><body ><table border="1" width="500" height="50" align="center" id="tb1"><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>

使用jQuery实现全选和全不选

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>全选和全不选</title><script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script><script>$(function(){$("#select").click(function(){//获取下面所有的复选框并将其选中状态，设置跟编码的eagel//attr 方法与jQuery的版本有关，在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="tb1"><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>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>省市二级联动</title><script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script><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(){//alert("aa");//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></head><body><table><tr><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></tr></table></body>
</html>

转载于:https://www.cnblogs.com/RzCong/p/9339183.html

JQuery- JQuery学习相关推荐

jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
javascript与jQuery对照学习总结(一)(一些常规操作)
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascrip ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery调试学习总结
如何对jQuery代码进行简单的调试在html开发中,jQuery可以说得上是神器了,几乎没有WEB开发者没有听过jQuery,它的强大无需多言!用发它,可以帮我们大大加快开发速度. 那么,对于初学 ...
jQuery快速学习
jQuery快速学习 1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们 ...
ajax请求返回json实例,Jquery Ajax 学习实例2 向页面发出请求返回JSon格式数据
一.AjaxJson.aspx 处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下: protected void Page_Load(object sender, ...
JQuery进阶学习
JQuery进阶学习的内容 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插一. 动画三种方式显示和隐 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery框架学习第十天：实战jQueryUI常用功能
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery框架学习第八天：ASP.NET jQuery实施方案
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...