<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
基础语法:$(selector).action()
1)美元符号定义jQuery
2)选择符(selector)“查询”和“查找”HTML元素。
3)jQuery的action()执行对元素的操作
简写:$(function(){
});
jQuery与JavaScript入口函数:
jQuery:
$(document).ready(function({
});
或
$(function({
});
JS:
window.onload = function() {
}
关于:和【】符号的理解
:可以理解为种类的意思;为jQuery的过滤选择器,类似于css的伪类选择器。分为:(A)基本过滤(p:first),(B)内容过滤(:empty),(C)子元素过滤(:first-child),(D)属性过滤[href]选择器。
【】可以理解为属性的意思
$("#id", ".class") 复合选择器
$(div p span) 层级选择器 //div下的p元素中的span元素
$(div>p) 父子选择器 //div下的所有p元素
$(div+p) 相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p) 兄弟选择器 //div后面的所有p元素(同级别)
$(.p:last) 类选择器 加 过滤选择器 第一个和最后一个(first 或者 last)
$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶(odd 或者 even)
$("div p:eq(2)") 索引选择器 div下的第三个p元素(索引是从0开始)
$("a[href='www.baidu.com']") 属性选择器
$("p:contains(test)") // 内容过滤选择器,包含text内容的p元素
$(":emtyp") //内容过滤选择器,所有空标签(不包含子标签和内容的标签)parent 相反
$(":hidden") //所有隐藏元素 visible
$("input:enabled") //选取所有启用的表单元素
$(":disabled") //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素
常见DOM事件:
鼠标事件:click dblclick mouseenter mouseleave hover
键盘事件:keypress keydown keyup
表单事件:submit change focus blur
文档/窗口事件:load resize scroll unload
事件
常見的jQuery事件(感覺跟DOM的差不多意思~)
$(document).ready()
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
keypress,keydown,keyup的区别:
keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外,它返回的是键盘代码);
keypress:在键盘上按下一个按键,并产生一个字符时发生,返回ASCII码。注意:shift、alt、ctrl等键时并不会产生字符,所以监听无效。若一直按着某按键则会不断触发。
keyup:与keydown相对
两种常用用法举例:
案例1:获取按键代码或字符的ASCII码
$(window).keydown( function(event){
// 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码.
} );
案例2:传递数据给事件处理函数
jQueryObject.keydown( [[ data ,] handler ] );
data: 通过event.data传递给事件处理函数的任意数据;
handler: 指定的事件处理函数;
(发现其实隐藏和显示,淡入淡出,滑动的语法都类似~)
jQuery效果——隐藏和显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
(两者相互转换的)
jQuery 效果——淡入淡出
淡入:$(selector).fadeIn(speed,callback);
淡出:$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,opacity,callback);
jQuery 效果——滑动
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
jQuery 效果——动画
之后会专门再写一篇文章记录自己对于动画的学习。
$(selector).animate({params},speed,callback);
必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=;
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle";
默认地,jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
jQuery 停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
jQuery Callback 方法
有回调函数,警告框会在隐藏效果完成后弹出。
被立即停止的动画不会触发回调,被立即完成的动画会触发回调。有函数就存在回调。
jQuery - 链(Chaining)
链的方法是:(emmm,举个栗子吧,感觉举栗子更好理解~)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
用点(.)连接在一起就可以啦~
jQuery - 获取内容和属性
获得内容:text()、html()、以及val()
text()-设置或返回所选元素的文本内容;
html()-设置或返回所选元素的内容(包括HTML标记);
val()- 设置或者返回表单字段的值。
jQuery attr() 方法用于获取属性值。适用于DOM
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是 undefined。
jQuery prop()适用于HTML自带属性值
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是空字符串。
jQuery - 设置内容和属性
text()、html()、val()的回調函數
$("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
$("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery";
});
jQuery - 添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jQuery - 删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
jQuery - 获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
jQuery 尺寸
jQuery遍历
祖先级
jQuery parent() 方法 ,返回直接的父元素;
jQuery parents() 方法, 返回所有祖先元素
jQuery parentsUntil() 方法 , 返回介于两个给定元素之间的所有祖先元素。
后代级
jQuery children() 方法 ,返回直接子元素。
jQuery find() 方法 ,返回所有后代元素。
同胞元素
jQuery siblings() 方法 , 返回所有的同胞元素。
jQuery next() 方法, 下一个同胞元素,只选择一个。
jQuery nextAll() 方法 , 返回了被选元素的所有跟随的同胞元素。即后面的所有同胞元素。
jQuery nextUntil() 方法
jQuery prev(), prevAll() & prevUntil() 方法,与之前的区别只是在于方向相反而已。
过滤
最基本的三个方法:first(), last() 和 eq()
jQuery filter() 方法, 允许规定一个标准。符合的返回。
jQuery not()与jQuery filter()相反。