JQuery编程 书籍:锋利的JQuery
1. 普通JavaScript的缺点
每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦
因此出现了很多对JavaScript的封装库,这些库对JavaScript进行了封装,简化了开发
2. JQuery就是JavaScript语法写的一些函数库,内部仍然是调用JavaScript实现的。
使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术,JQuery本身
就是一堆JavaScript代码;有些功能JQuery没有封装,还需要通过自己写JavaScript来实现
3. JQuery的特点
1) 很好解决了不同浏览器的兼容问题,css还是有兼容性问题
2) 对于不同控件具有统一的操作方式
3) 体积小(几十kb),使用方便
4) 链式编程 $("#div1").draggble().show().hide().fly() 隐式迭代
5) 插件丰富,开源,免费
4. JQuery中的顶级对象$
要想使用JQuery的对象必须通过$对象。只有将普通的Dom对象封装成JQuery对象,
才能调用JQuery中的各种方法($是JQuery的简写)
5. 页面加载的三种方式
方式1:--dom元素加载后
$(document).ready(function () {
alert('haha');
});
方式2:--所有内容加载后
$(window).load(function () {
alert('haha');
});
方式3:(推荐)--dom元素加载后
$(function () {
alert('haha')
});
window.onload与$(document).ready(fn);的区别
window.onload需要等待页面全部加载完毕才会触发,即所有的dom元素创建完毕,图片,css都加载完后触发
$(document).ready(fn)只要dom元素加载完毕即触发,这样可以提高响应速度
$(document).ready(fn)可以多次注册事件处理程序,并且最终都会执行
window.onload每次注册新的事件处理程序时都会将前面的覆盖掉
6. JQuery中提供的两个遍历函数
$.map--用来遍历数组
var arr = [1, 2, 3, 4, 5, 6];
var newArr = $.map(arr, function (ele, index) {
return ele + 1;
});
alert(newArr);
一种新的为数组赋值的方法
var scores = [10,20,30,40,50];
var newScore = [];
for(var i=0; i<scores.length;i++){
newScore[newScore.length] = scores[i];
}
$.each
var arr = { "name": "laoniu", "gender": "female", "age": "38" };
$.each(arr, function (k, v) {
alert(k + '===' + v);
});
7. JQuery中的trim()来去掉两端空格
字符串.replace(/\s+/,'')
trimLeft = /^[\s\xA0]+/; trimRight = /[/s/xA0]+$/;
IE一些版本不支持\s空格,\xA0也表示空格
8. Dom对象-->JQuery对象 $(Dom对象)
JQuery对象-->Dom对象 $(spObj)[0] 或者$(spObj).get(0)
通过JQuery对象即可调用:.text() .val() .html() .css('color','red')
JQuery中大多都是方法少有属性 ,因为属性很难进行链式编程。
获取值、设置值都是使用同一个方法,有参数表示设置值(是对象),无参数表示取值(是值)
9. Array对象本身就不是Dom对象,不存在与JQuery对象之间的转换。
使用JQuery语句可以直接使用数组,就像$.each()或$.map()
通过document.getElementsByTagName()或者document.getElementsByName()获取的返回值
是一个类似于数组的值,但不是数组,没有数组特有的方法。
类似于c#中的string可以看成是一个char数组,string是对char数组的封装
1. 普通JavaScript的缺点
每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦
因此出现了很多对JavaScript的封装库,这些库对JavaScript进行了封装,简化了开发
2. JQuery就是JavaScript语法写的一些函数库,内部仍然是调用JavaScript实现的。
使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术,JQuery本身
就是一堆JavaScript代码;有些功能JQuery没有封装,还需要通过自己写JavaScript来实现
3. JQuery的特点
1) 很好解决了不同浏览器的兼容问题,css还是有兼容性问题
2) 对于不同控件具有统一的操作方式
3) 体积小(几十kb),使用方便
4) 链式编程 $("#div1").draggble().show().hide().fly() 隐式迭代
5) 插件丰富,开源,免费
4. JQuery中的顶级对象$
要想使用JQuery的对象必须通过$对象。只有将普通的Dom对象封装成JQuery对象,
才能调用JQuery中的各种方法($是JQuery的简写)
5. 页面加载的三种方式
方式1:--dom元素加载后
$(document).ready(function () {
alert('haha');
});
方式2:--所有内容加载后
$(window).load(function () {
alert('haha');
});
方式3:(推荐)--dom元素加载后
$(function () {
alert('haha')
});
window.onload与$(document).ready(fn);的区别
window.onload需要等待页面全部加载完毕才会触发,即所有的dom元素创建完毕,图片,css都加载完后触发
$(document).ready(fn)只要dom元素加载完毕即触发,这样可以提高响应速度
$(document).ready(fn)可以多次注册事件处理程序,并且最终都会执行
window.onload每次注册新的事件处理程序时都会将前面的覆盖掉
6. JQuery中提供的两个遍历函数
$.map--用来遍历数组
var arr = [1, 2, 3, 4, 5, 6];
var newArr = $.map(arr, function (ele, index) {
return ele + 1;
});
alert(newArr);
一种新的为数组赋值的方法
var scores = [10,20,30,40,50];
var newScore = [];
for(var i=0; i<scores.length;i++){
newScore[newScore.length] = scores[i];
}
$.each
var arr = { "name": "laoniu", "gender": "female", "age": "38" };
$.each(arr, function (k, v) {
alert(k + '===' + v);
});
7. JQuery中的trim()来去掉两端空格
字符串.replace(/\s+/,'')
trimLeft = /^[\s\xA0]+/; trimRight = /[/s/xA0]+$/;
IE一些版本不支持\s空格,\xA0也表示空格
8. Dom对象-->JQuery对象 $(Dom对象)
JQuery对象-->Dom对象 $(spObj)[0] 或者$(spObj).get(0)
通过JQuery对象即可调用:.text() .val() .html() .css('color','red')
JQuery中大多都是方法少有属性 ,因为属性很难进行链式编程。
获取值、设置值都是使用同一个方法,有参数表示设置值(是对象),无参数表示取值(是值)
9. Array对象本身就不是Dom对象,不存在与JQuery对象之间的转换。
使用JQuery语句可以直接使用数组,就像$.each()或$.map()
通过document.getElementsByTagName()或者document.getElementsByName()获取的返回值
是一个类似于数组的值,但不是数组,没有数组特有的方法。
类似于c#中的string可以看成是一个char数组,string是对char数组的封装