【前言】
今天的JQuery不多操作是很难理解的。原本是冲着做狂帅酷炫叼炸天的JQ特效来的。结果飘逸的特效没有学到，反而撩到一个更难的JS升级版的代码。原来敲JS还是做得爽歪歪，代码是多了点，可是逻辑走得通。但是感觉JQuery一句代码走了好几步逻辑，总是不容易理解。不过永远只有难却好用的东西能够吸引程序员的注意。大概是“因为你不会我会”的感觉。
提一个问题:是JQ还是JS？JQeuery是JS的一个封装库，相当于Spring是Java的其中一个框架。据我所知，目前JQ实际上是一个三四年前的技术，并不算新。现在国内流行的是Vue.js，是国内一个JS大佬开发，相当于支持国货吧。世界范围流行的是Node.js，适合用于做服务器端；另外还有一个来自FaceBook免费提供的开源JS项目React.js，这个js库受人追捧的原因是，脸书作为拥有世界上最多用户的社交平台，其宣称公司研发的产品所用的js库都是自家开发的这个React.js。试想，脸书作为拥有世界上最多用户的平台，它所承受的流量压力也是最大的。我们在开发一款软件的时候，总是担心所使用的开发工具(开发语言)性能不够好，承受不住任何异常情况。基于这样的想法，大家就觉得React.js是一个优秀的js库。最后还有一个Rngular.js。不了解，暂且mark一下。
扯远了，想说JS不仅仅是一个前端语言，在服务端上也能发挥很好的作用。
【正文】
总结一下今天的知识:往后面的案例在理解上越来越难。先把以下几点基础知识掌握一下。一、选择器
JQ的焦点还是放在选择器上面。其中要掌握或了解的是以下五大方面的选择器。1.九大基本选择器(掌握):id选择器("#id名")，类选择器(".类名")，元素(标签)选择器("标签名")，通配符选择器("*")，并列选择器("#div1,.div2,p");后代选择器(#div p),儿子们选择器(#div>p),大儿子选择器(#div~p) 大弟弟选择器(#div+p)等九大基本选择器;
2.过滤元素选择器方面(有印象)，有奇数("#div p:odd") 偶数("div p:even")， 索引("div p:eq(2)")(得到第3个元素，是从0开始算的),首位("#div p:first"),末位("#div p:last"),包含($("p:contains(is)"))等选择器。这个做案例"表格间隔变色"用到啦
3. 属性选择器两个(掌握):
1).$("img[src]"):含有某个属性的选择器。
2).$("img[src = 'img/a.jpg']"):含有某个属性值src = "img/a.jpg"的选择器
4.表单选择器(格式记得):
1).$(":checkbox") 所有的多选框
2).$(":checkbox[name='selectBox']") name属性值为selectBox的多选框。
其他的表单选择器都是按照这个格式
二、理解什么是JQ对象:
先了解一下$("")或者Jquery()这个JQ对象。
1).$("")这个对象返回的值总是数组，不过你是用id选择器$("#div1")得到一个对象，或者类选择器$(".div1")得到了多个对象，$()它返回的都是一个对象数组。不是单个变量。
因此，就有了JQ对象$("")转换成js对象的两种形式:
[1].var div1 = $["#div1"][0];
[2]. var div2 = $["#div2"].get(0);
2) $(function{}):这个相当于js中的window.onload(function{});两者都是网页文档加载就能触发事件。但是js的onload只能声明一次，而JQ的$(function{})能用多次。
3) JQ除了"学的少，用得多"的宗旨，还有一个比较重要的特点是能实现启动事件与Html代码分离。使用JS总要在HTML代码中添加启动事件onload = "JS函数名([参数可选带入])"。然鹅使用JQ:直接在加载文档事件中对可能启动事件的标签绑定事件即可:
比如案例"省市联动的JQ版制作中":
$(function()
{
$("#province").change(function(){});
});
这个就直接在文档加载后，对省份下拉框绑定了onChange事件。
三、JQ对象的文档处理
JQ对象的文档处理工作主要表现在两方面:一是对标签属性的增加，获取，删除，修改处理
二是对标签的增加，获取，删除，修改处理
1.对属性的处理:
1).获取:$src = $("#img").attr("src");
2).修改:$("#img").attr('src','../img/p2.jpg');
3).增加:$("#btn").attr('disabled','disabled'); //增加多个属性:$("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial });
4).删除:$("#text").removeAttr('style');
2.对标签处理:
1)获取:$("选择器类型")
2)添加:append():$("a").append("<p>我是文字</p>");//在a标签里面插入p标签
appendTo();将一个元素移到另外一个元素后面: $("<img src ='../img/p1.jpg'/>").appendTo("a");把img标签插入到a标签后面
3)删除:$("#link").remove();//自杀删除。所选元素和子元素全没了
另外记住下面三个函数
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值 (表单专用)
上面贴了一些自测的代码，有的方法明明知道，但是不会用。是因为缺少亲自测试。
四、在JQ中的两种遍历:
1.$.each(arrs,function(i,m));// 第一种:each()参数两个型:arrs表示一个数组，i是索引值，m是arrs[i]的值2.$(arrs).each(function(j,n)); // 第二种:each()参数一个型
3.二维数组都可以当作一维数组来使用:
$.each(cities, function(i, n)
{
{$(n).each(function(j, m) {$city.append("<option>" + m + "</option>");});
4.遍历不止于数组，可以对一个列表遍历:
$("li").each(function(){
alert($(this).text())
});
});
五、简单总结:
回顾上面的知识后，对今天的五个案例做一下思路上面的整理:1.案例1:使用JQ完成页面定时弹出广告:
1).利用setInterval和cleanInterval组合，配合一组动画效果(显示show(millTime),hide();淡入淡出fadeIn(),fadeOut;移上移下slideDown()sildeUp())即可完成
2).使用setTimeOut()只执行一次更加简便
2.案例2:表格隔行换色:
获取表格的身体部分<tbody> 运用奇数偶数选择器$("tbody tr:odd").css("color":"颜色值");即可完成
3.案例3:表格多选框的全选和全不选:
1)对总控制多选框设置id="allSelect" 其他子多选框设置id = "select" JQ对象获取分别获取:$("#allSelect"),$("#select")
2)给总控制多选框绑定点击事件 $("#allSelect").click ="function(){}".
3)获取它的属性checked: $("#allSelect").attr("checked")判断:
4）依照判断结果对子选择款设置checked属性:
true: $("#select").attr('checked','checked');
false:$("#select").attr('checked','')
4.案例4:省市联动JQ版选择框:
1.分别获取省级选择框$("#province"),$("city");
2.对省级选择框绑定onChange事件:$("#province").onChange(function(){});当省级框的<option>发生改变时候，就可以调用这个事件，然后var val = this.value;获取当前option的value值
3.根据val值遍历预先设置好的cities城市数组，显示的结果是cities[val]。
4.city.append(cities[val]);
5.做city清空前面已经存在的<option>项
扫一扫
1179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
