jquery学习笔记-韩顺平
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
1,Jquery是一个javascript框架或者叫做javascript库;
2,用Ajax我们可以给服务器发送一个请求,服务器可以给我回送一个请求;
3,出现javascript框架的根本原因就是为了提高开发者的开发效率;
4,jquery是一个轻量级的js库(压缩后只有21K),这是其他的js库所不及的,它兼容CSS3,还兼容各种浏览器;
5,JQuery是一个快速的,简洁的javascript库,使用户能更方便的处理HTML document,events,实现动画效果,并且方便的为网站提供AJAX交互;
6,JQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
7,jquery能够使用户的html页保持代码和html内容的分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可;
8,所谓的库就是提供一些现成的方法供你去调用;
9,当前流行的javascript库有:
Jquery ,MooTools,Prototype,Dojo,YUI,EXTJS,DWR[主要是运行在服务器上的];
10,$(document) //---这个表示一个jquery对象;
11,如果使用jquery,则需要引入jquery库
12,jquery对象就是对dom对象的一系列包装,它包装完成后,就可以使用jquery对象提供的方法来进行操作;
13,在使用jquery开发中,有两种对象,1,jquery对象,2,dom对象,如果是jquery对象则只能使用jquery库提供的方法,如果是dom对象,则只能使用js本身提供的方法;
14,分析jquery库文件的运行原理:
function Dog(){
}
//给Dog类添加一些属性和方法:我们用原型法
Dog.prototype = {
ready:function(){
window.alert('ok');
},
jquery:'1.3.1' //这里jquery是Dog类的一个属性
}
var dog1 = new Dog();
dog1.ready(); //在界面上打出ok
window.alert(dog1.jquery); //在界面上打印出1.3.1
15,因为jquery兼容各大浏览器,所以这就是为什么它这么流行;
16,jquery对象就是通过jQuery包装DOM对象后产生的对象。
jquery对象时jQuery独有的,如果一个对象是jquery对象,那么它就可以使用jquery里的方法:$("#test").html();
比如:$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jquery里的方法;这段代码等同于用DOM实现代码:
document.getElementById("id").innerHTML;
虽然jquery对象时包装DOM对象后产生的,但是Jquery无法使用DOM对象的任何方法,同理DOM对象也不能使用Jquery里的方法,乱使用会报错;
约定:如果获取的是jquery对象,那么要在变量前面加上¥,
var $variable = jquery对象
var variable = DOM对象
17,如果是jquery对象,规定一个jquery对象名是以$开头
第二讲:jquery id选择器层次选择器
1,dom对象和jquery对象之间的转换:
(一)dom->jquery
var $obj3 = $(obj1);
window.alert($obj3.val());
(二)jquery->dom 有两种方法
(1),var obj4 = $obj2[0]; //obj4就是dom对象
alert("obj4 value="+obj4.value);
(2),var obj5 = $obj2.get(0);
alert("obj5 val = "+obj5.value);
2,jquery对象就是对dom对象进行包装,这样就可以使用jquery的方法;3,jquery对象和dom对象可以互相转换;
4,事件;
5,document.getElementById("one").style.background = '#0000FF';
jquery的id选择器去和按钮绑定一个事件
$('#b1') 表示选中b1这个控件
$('#b1').click 给b1这个按钮绑定click事件,
例子:
$('#b1').click(function(){
$('#one').css("background","#0000FF");
});
6,改变所有的元素和id为two的元素的背景色为#3399FF $('#b5').click(
function(){
$('span,#two').css("background","#3399FF");
//这里面可以写好多条件,例
如:$('span,#two,mini,*').css("background","#3399FF");
}
)
7,经典实例:
$('p').click(
//this表示当前被点击的对象,但是这里this表示dom对象
window.alert(this.innerHTML);
//$(this)表示当前被点击的元素,但是此时我们当做jquery对象
window.alert($(this).html());
//以上两句的功能是等价的
);
8,如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器;用法:
parent > child
用法:$("form > input"):返回值:结合元素
说明:在给定的父元素下匹配所有子元素,注意:要区分好后代元素和子元素;9,改变id为one的相邻的下一个
$('#b3').click(function(){
$('#one + div').css("background","#0000FF");
})
10,改变id为two的元素后面的所有兄弟