Jquery笔记
是javascript 类库 在js中调用引用方法即可 2006年创建的开源项目
Jquery包含 Javascript 、css、dom、ajax 技术 封装了DOM 元素
用最少的代码完成更困难的功能 学习简单 属于前端技术
学习jquery条件
需要掌握如下知识
1、HTML、HTML5
2、Javascript
3、服务器语言PHP
在线手册 http://t.mb5u.com/jquery
Jquery 的功能优势特点
1、像css那样访问和操作DOM
2、修改css控制页面外观
3、简化javascript代码操作
4、事件处理更加容易
5、各种动态效果非常方便
6、让ajax技术更加完美
7、基于jquery大量插件
8、自型扩展功能插件
其他javascript库
1、YUI是雅虎公司开发的一套完整的扩展性良好的富交网页工具集
2、Prototype 是最早成型的javascript库之一 对javascript内置对象做了大量的扩展
3、Dojo，提供了其他库函数没有的功能离线存储、图表组件
4、Mootools轻量、简洁、模块化和面向对象的javascript框架
ExtJS，简称Ext，原本是对YUI的一个扩展，主要创建前端用户界面。(付费)
第二章基础核心
1、代码风格
$(function(){}) //执行一个匿名函数
alert($()); //返回的是Jquery对象
alert($(‘#box’)); //返回的是Jquery对象
alert($(‘#box’).css(‘color’,’red’)); //返回的是Jquery对象
$(‘#box’).css(‘color’, ’red’).css(‘font-size’,’200px’).css(‘font-weight’,’bold’)
//支持连缀
alert(document.getElementById(‘box’)); //返回DOM对象
alert($(‘#box’).get(0)); //返回DOM对象[objectHTMLDivElement] get 是数组
2、加载模式
1、window.onload
a) 文档全部加载完毕才执行
b) 只能执行一次如果第二次执行会覆盖掉第一次
c) 没有简写方案
2、$(document).ready();
a) 只需要等到加载body就可以执行
b) 可以执行多次第N次都不会被上一次覆盖
c) 简写方式 $(function(){ })
3、对象互换
jQuery对象和DOM对象之间的互换
$(document.getElementById(‘box’)).css(‘color’,’red’);
4、多个库之间的冲突
Jquery引用在三方库前面
1、引用顺序
Jquery在base之前引用$所有权就是base的
2、直接写成jquery
3、定义变量 var $$=jQuery;
$代表base库
$$代表jquery库
Jquery引用在三方库后面
1、jQuery.noConflict(); //自行了断 剔除$所有权
jQuery.noConflict();
var $$ = jQuery;
$(function(){
alert($(‘#box’).ge(0));
alert($$(‘#box’).width(0));
});
常规选择器
选择器是jQuery的根基
1、简单选择器
ID选择器
类名选择器
2、进阶选择器
群组选择器
后代选择器
通配选择器
3、高级选择器
子选择器
next选择器
nextall选择器
1、$('#id').find('p').css('color','red');
2、$('div').eq(2).css('color','red');
3、$('#id').children('p').css('color','red');
4、$('#id').next('p').css('color','red');
5、$('#id').prev('p').css('color','red');
6、$('#id').prevAll('p').css('color','red');
7、$('#id').siblings('p').css('color','red');
8、$('#id').nextUntil('p').css('color','red'); ///遇到p就会停止选中
9、$('#id').prevUntil('p').css('color','red'); ///遇到p就会停止选中
4、属性选择器
5、过滤选择器
6、内容过滤器
7、可见性过滤器
8、子元素过滤选择器
$(“li:nth-child(1)”).css();
$(“li:nth-child(even)”).css(); //选择奇数
$(“li:nth-child(2n)”).css(); //选择偶数
9、其他选择器
is()、eq()、slice()
