1. jquery是一个javascript库,封装的是一些常用的操作。
2. 为什么要封装
(1) javascript,dom非常繁琐
(2) 浏览器兼容性非常令人头疼
3. 封装一些javascript常用的操作:
(1)prototype:封装javascript常用的对象和函数(功能强大,而且最早的库),缺点(面向对象把握的不是很好)
(2)dojo:提供了其他库没有的功能,例如离线存储,SVG绘图,而且他得到了IBM SUN这些公司的推广。文档不全,学习起来曲线比较陡;
(3)ExtJs: 企业级的框架,功能强大(他以jquery做最底层的),缺点:注重的是样式,结构比较臃肿,他不是完全免费,如果需要从事商业用途,需要付费获得许可证
4. jquery的优势:
市场占有率稳步上升,代码比较少,功能强大:DOM比较强大,事件处理,完全解决了浏览器的兼容性问题,ajax操作(比较好)
5. Jquery的$(document).ready()和window.onload还是有区别:
(1)window.onload() 需要等到整个页面加载完毕(包括需要的图片等文件都加载完毕) 才执行
(2)$(document).ready()只需要解析器先将文件的DOM结构绘制完毕就执行,不等待其他文件是否加载完毕
(3)Window.onload()不可以绑定多个onload()
但是$(document).ready()可以
6.jquery对象和DOM对象
DOM对象——javascript操作的对象
Jquery对象——将常用的javascript对象封装后形成自己的对象
(1) 为了区分DOM对象和jquery对象,我们通过声明变量的时候设置:
Jquery对象使用 var $p
DOM对象使用 var p
(2) jquery对象和DOM对象的相互转化
①jquery转化成DOM通过数组下标的形式 var p=$p[0] 或 get(索引)
②DOM转化成jquery用 $()
7. 选择器
(1)基本选择器
①根据id匹配元素
var $p = $("#para");
$p.click(function(){
alert("this is paragraph");
});
②根据给定的类名匹配元素
var $span = $(".span");
$span.css("font-size","35px");
③根据给定的元素名匹配元素
var $div = $("div");
$div.css("background","blue");
④*匹配所有的元素
var $suo=$("*");
$suo.css("background","green");
⑤集合元素,将每个选择器匹配到的元素合并后一起返回
var $jihe = $("p,span,div");
$jihe.click(function(){
alert("这是集合");
});
(2)层次选择器
①后代元素选择器
$("#d ulli").css({"color":"red","fontSize":"30px"});
②子元素选择器
$("#di >p").css({"background":"orange","fontSize":"40px"});
③相邻元素选择器
$("#d ul +div").css({"color":"red","fontSize":"50px"});
④兄弟元素选择器
$("span~div").css("background","blue");
(3)过滤选择器
1>基本过滤选择器
1,所有div元素中,第一个div
$("div:first").click(function(){alert("第一个div")});
2,所有div元素中,最后一个div
$("div:last").click(function(){alert("最后一个div")});
3,获取索引是偶数的所有元素,索引从0开始
$("div:even").click(function(){alert("偶数")});
4,获取索引是奇数的所有元素,索引从0开始
$("div:odd").click(function(){alert("奇数")});
5,获取索引等于index的所有元素
$("div:eq(0)").click(function(){alert("这是索引为0的div")});
6,索引大于小于 gt() lt()
$("div:gt(1)").css("color","orange");
7,获取网页中所有的h标签内容
$(":header").css("color","green");
2>内容过滤选择器
(1)选取含有文本内容为标签的元素
$("span:contains('标签')").css("background","pink");
(2)选取含有某元素的元素(含有b元素)
$("div:has(b)").css("fontSize","100px");
3>可见性过滤选择器
(1)选取所有可见的元素
$(":visible").css("fontSize","30px");
(2)选取所有不可见的元素
$("div:hidden").show(4000);
4>属性过滤选择器
(1)选取拥有id属性的元素
$("div[id]").css("color","red");
(2)选取属性值为value的元素
$("div[class=value]").css("fontSize","30px");
5>子元素过滤选择器
(1) 选取父元素下,索引值是偶数的元素(索引从1开始)
$(“span.child:nth-child(even)”).css(“fontSize”,”30px”);
(2) 选取父元素下,索引值是奇数的元素(索引从1开始)
$(“span.child:nth-child(odd)”).css(“fontSize”,”30px”);
(3)匹配每个父元素下,索引值为index的子元素
$("span.child:nth-child(1)").css("color","green");
(4)匹配每个父元素的第一个子元素 first-child
$("span.child:first-child").css("fontSize","100px");
(5)匹配每个父元素的最后一个子元素 last-child
$("span.child:last-child").css("fontSize","100px");
6>表单对象属性过滤选择器
(1)选取所有被选中的元素(单选框,复选框)
var $check =$("input:checked").length;
(2) 选取所有被选中的下拉列表选项
var $select = $("selectoption:selected").length;
alert($select);
(4)表单选择器
①选取所有的input,textarea,select,button
var $input =$("input:button").length;
alert($input);
var $select =$("select option:select").length;
alert($select);
②选取所有的单行文本框
var $text=$(“input:text”).length;
alert($text);
③选取所有的密码框
var $pass =$("input:password").length;
alert($pass);
④选取所有的单选框
var $radio =$("input:radio").length;
alert($radio);
⑤选择所有的复选框
var $checkbox =$("input:checkbox").length;
alert($checkbox);
⑥选择所有的提交按钮
var $submit =$("input:submit").length;
alert($submit);
⑦选择所有的文件上传域
var $file =$("input:file").length;
alert($file);