最全最详细jQuery学习笔记.docx
- 文档编号:27935758
- 上传时间:2023-07-06
- 格式:DOCX
- 页数:41
- 大小:36.23KB
最全最详细jQuery学习笔记.docx
《最全最详细jQuery学习笔记.docx》由会员分享,可在线阅读,更多相关《最全最详细jQuery学习笔记.docx(41页珍藏版)》请在冰豆网上搜索。
最全最详细jQuery学习笔记
1、jQuery基础
1.1jQuery的特点
1)jQuery是一种框架,对于浏览器的兼容问题,95%不用再去考虑了。
2)jQuery利用选择器(借鉴了CSS选择器的语法)查找要操作的节点(DOM对象),然后将这些节点封装成一个jQuery对象(封装的目的有两个:
①是为了兼容不同的浏览器。
②也为了简化代码)。
通过调用jQuery对象的方法或者属性来实现对底层的DOM对象的操作。
3)jQuery特点简单概括就是:
选择器+调方法。
1.2jQuery编程的步骤
step1:
引入jQuery框架(www.jquery.org下载),min为去掉所有格式的压缩版
step2:
使用选择器查找要操作的节点(该节点会被封装成一个jQuery对象,并返回)
var$obj=$('#di');//ID选择器,查找的节点ID为d1
step3:
调用jQuery对象的方法或者属性
$obj.css('font-size','60px');//调用jQuery的css()方法
◆注意事项:
jQuery是一个大的匿名函数,且内部有很多函数(类似Java中的内部类),它的大部分函数返回对象都是jQuery对象(它自己),所以可以继续“.”,例如:
functionf1(){
var$obj=$('#d1');//为了强调返回的是jQuery对象,命名习惯用$开头来声明变量
$obj.css('font-size','60px').css('font-style','italic');}
1.3jQuery对象与DOM对象如何相互转换
1)dom对象如何转化为jQuery对象
使用函数:
$(dom对象)即可,例如:
functionf2(){
varobj=document.getElementById('d1');
var$obj=$(obj);//将dom节点封装成jQuery对象
$obj.html('hellojava');}
2)jQuery对象如何转化为dom对象
方式一:
$obj.get(0);方式二:
$obj.get()[0];
functionf3(){
var$obj=$('#d1');//方式一:
varobj=$obj.get(0);
varobj=$obj.get()[0];//方式二obj.innerHTML='helloperl';}
1.4如何同时使用prototype和jQuery
step1:
先导入prototype.js,再导入jQuery.js
step2:
将jQuery的$函数换一个名字:
var$a=jQuery.noConflict();//注意大小写
◆注意事项:
函数名就是一个变量,指向函数对象,例如:
functionf1(){//无效varobj=$('d1');}
//无效是因为jQuery是后引入的,所以prototype被jQuery替换
functionf1(){//为了避免冲突,可以将jQuery的$函数换一个名字$a
var$a=jQuery.noConflict();varobj=$('d1');
obj.innerHTML='helloprototype';$a('#d1').html('hellojQuery');}
1.5EL表达式和jQuery函数的区别
1)${}:
EL表达式,在服务器端运行(JSTL标签库也在服务器端运行,EL和JSTL标签库本质是Java代码)。
2)$():
jQuery函数,在浏览器中运行(JavaScript也在浏览器中运行)。
2、选择器
2.1什么是选择器
jQuery模仿CSS选择器的语法提供了一种用来方便查找要操作的节点的语法规则。
2.2基本选择器
1)#id:
ID选择器,如:
$('#d1').css('color','red');//编号1变
2).class:
类选择器,如:
$('.s1').css('font-size','60px');//编号2和3变
3)element:
元素选择器,如:
$('div').css('font-size','60px');//编号1和2变
4)selector1,selector2...selectorn:
选择器合并,如:
$('#d1,p').css('font-size','60px');//编号1和3变
5)*:
所有选择器,如:
$('*').css('font-size','60px');
6)案例:
--1-->
--2-->
--3-->
◆注意事项:
当jQuery选择器查找到了多个DOM节点,则仍然是封装成“一个”jQuery对象,在调用jQuery对象的属性或者方法时,默认情况下,会作用于底层所有的DOM节点之上。
如:
$('.s1').css('font-size','60px');则编号2和3都变。
2.3层次选择器
1)select1select2:
所有后代(要符合select2的要求)。
例如:
$('#d1div').css('font-size','60px');//d2d3d4d5变
2)select1>select2:
只考虑子节点(要符合select2的要求),孙子不管~
例如:
$('#d1>div').css('font-size','60px');//d2d3d5变
3)select1+select2:
下一个兄弟(要符合select2的要求),儿子不管~
例如:
$('#d3+div').css('font-size','60px');//d5变,d2不管
4)select1~select2:
下面所有的兄弟(要符合select2的要求),上面的兄弟不管~兄弟中的儿子也不管~
例如:
$('#d2~div').css('background-color','yellow');//d3d5变
5)案例:
200px;height: 200px;background-color: red;"> 150px;height: 150px;background-color: silver;">hello2