这一周学习了JQuery,jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。
一、闭包
周一学习了闭包。
1、闭包:其实就是一个函数使用另一个函数的变量。
闭包特点:
1、嵌套函数
2、外部函数的变量可以被内部函数使用。
3、垃圾回收机制
闭包优点和缺点
优点:模块化思想,不会造成全局污染(基本没有全局变量)。
为什么全局变量会造成污染:
1、如果变量名重复的话,很容易造成覆盖
2、从内存的角度上看,全局变量不容易被释放。
在JS中,变量什么时候被释放?
1、在JS中,一旦某个函数调用完毕,那么这个函数内部的变量全部被释放。
2、在JS中,就算某个函数调用完毕,这个全局变量也不见得会被释放,因为可能还有下一个函数。
闭包的缺点:
1、最大的缺点就是变量不会被回收!
因为这个变量,被函数一直使用着。
匿名函数的写法:(function(){ })();
二、JQuery动画函数
周二学习了jquery动画函数。
JQuery : JS 中伟大的框架。使用简单。
如:<script type="text/javascript" scr="jquery文件"></script>
注意:使用jquery必须在引用jquery文件后面。
jquery,使用$()来表示对象,有三大选择器
1、$("#xxx") ID选择器
2、$(".xxx") Class选择器
3、$("input") 标签选择器
4、$("[href='xxxx']") 属性选择器
几个常用的jquery案例:
//input 标签点击事件
$("input").click( function(){ });
动画函数:
1、show() 显示
2、hidden() 隐藏
3、toggle() 显示和隐藏
4、fadeIn() 淡入
5、fadeOut() 淡出
6、fadeToggle() 淡入和淡出
7、slideUp() 向上滑动
8、slideDown() 向下滑动
注意:函数里面都可以加入时间参数,单位为毫秒,函数里面都可以加入回调callback参数。
如:
show( 1000, function(){
//回调所执行的函数
});
9、animate("执行的动画操作",时间,可选(回调函数))
如:
$("").animate({"height":"300px;"}, 1500);
$("").animate({"left":"300px;"}, 1500); //left:+300px是向右,其余同理
注意:加入position属性!
10、stop 停止动画
参数一:clearQueue:如果设置成true,则清空队列。可以立即结束动画。
参数二:jumpToEnd:如果设置成true,则完成队列。可以立即完成动画。
如:stop(true, true);
三、JQuery Dom
JS Dom:节点、表单、定时器、事件
Jquery Dom:
节点:
1、parent() 找到父节点
2、children()找到子节点 find() 找到被选元素的后代元素
注意:children 默认不加参数的时候为找第一个节点,加了找参数里的节点。如children("div.select")就是找div里的select的class类
find,一般用于找子节点的某个元素标签,如:find("div");
3、next() prev() 找到下一个节点 找到上一个节点
4、siblings 找到并获取所有的兄弟节点
5、eq() 方法返回带有被选元素的指定索引号的元素。
索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)。
6、get(索引)匹配元素中的某个索引,注意不返回元素。
7、first() 通过自定义的找到,找到第一个元素。如:$(".a").first();就是找到class为a的第一个元素。
8、last() 同上,不过找到的是最后一个元素。
9、append() 追加HTML内容
10、appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中。
11、remove() 移除,会删除所有匹配到的元素以及文本, 不会占用位置
12、empty() 清空 会删除所有文本,不会删除匹配到的元素 如:$(this).parent().empty();
13、attr() 设置属性 、返回属性
扩展:.css(""属性,"属性值")设置一个节点的样式
.html(设置一个节点的HTML代码) .html() = 返回HTML
.text(设置一个节点的文本) .text() = 返回文本
window.onload 必须等待网页中的所有内容加载完后(包括图片)后才能执行 , 后
$(document).ready 网页中的所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 ,先
bind() ,绑定事件。
unbind() 解绑事件。
如:$(".abc").bind("click",function(){
});
$(".abc").unbind();//如果unbind内部没有加入参数的话,移除所有的事件。
$(".abc").unbind("click")//如果unbind内部加了参数的话,移除就是当前参数的事件。
四、JQuery Ajax
同步:就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回。也就是必须一件一件事做,等前一件做完了才能做下一件事.就像早上起床后,先洗涮,然后才能吃饭,不能在洗涮没有完成时,就开始吃饭.
异步:和同步相对。发出一个异步指令以后,可以不用去管它的执行情况,完成后服务端会自动告诉你结果。
XML为一种数据传输格式:
<rows>
<abc>1</abc>
<bd>2</bd>
</rows>
JSON也为一种数据传输格式:
{"row":["abc":1 , "bc":2]}
XML 和 JSON 区别比较参考:http://www.cnblogs.com/SanMaoSpace/p/3139186.html
Jquery Ajax 比原生ajax封装更加良好。
提供了主要四种的解决方法:
1、被选中的Dom.load( "页面",function(内容,状态 ){
//内容为返回的内容
//状态:如果成功为Success
})
2、getJson("json文件",function(内容,状态 ){
//内容为返回的内容
//状态:如果成功为Success
})
3、get("url",function(内容,状态){
//内容为返回的内容
//状态:如果成功为Success
})
4、post("url",{字典包含的参数},function(内容,状态){
//内容为返回的内容
//状态:如果成功为Success
})
.ajax()
通过自定义请求方式,请求数据。
$.ajax({
url: "http://120.26.196.152/come.php",//URL
dataType: "json", //数据格式
async: true, //是否为异步
data: { "name": "ajax","age":"20" }, //参数值
type: "GET", //请求方式
success: function(req) {//请求成功时处理
console.log( req );
$("#message").text( req.name + "-" + req.age );
},
error: function(req){ //请求错误的时候的处理
}
});
is() 判断标签 或者 选中的效果
比如: is('div'), is("input:checked")
hasClass 一般为判断元素是否有这个类
比如:hasClass("abc") 判断class里是否有abc这个类
HTTP STATUS CODE HTTP协议里的返回状态码。
200 :请求成功
302 :请求被跳转
404 :页面找不到,请求错误
403 :该访问请求没有权限
500 :服务器程序错误
这周所学让我受益匪浅,在练习方面我虽然经历思考却很少能写出来,结果并不好,但是重要的是要有前进的意志,就像贪吃蛇一样,为了食物而前进,就算吃不到食物,只要有了这种向真实前进的意志,即使这次失败了,我也终于会达到目标的,因为我仍在继续前进,这是不会错的。