jQuery基础
jQuery的基本使用
公式:事件源.事件(fuction(){ 事件处理程序 });
jQuery知识点
$ === jQuery
在jQuery框架中$
符号等价于jQuery
对象;-
入口函数:
$(document).ready(function(){}); $(function(){});
- 入口函数跟
window.onload
的区别window.onload
只能写一个, 入口函数可以写多个;window.onload
等所有外部资源加载完毕之后才执行;- 入口函数在DOM加载完毕之后立即执行;
-
jQuery 对象和dom对象相互转化
- jQuery 对象可以调用jQuery方法 例如click;
- Dom对象可以调用Dom方法 例如 onclick;
- jQuery对象通过
.css()
方法添加 css样式
jQuery选择器
基本选择器
选择器 | 作用 | 实例
————- | ————- | ————-
id选择器(#) | 选择id为指定值得第一个元素| $(#"demo")
类选择器(.) | 选择具体指定class类名的所有元素| $(".liItem")
标签选择器(element)|选择标签名为指定值得所有元素| $("li")
并集选择器(,)|单个选择器的所有元素合并后返回| $("#demo,.liItem")
选择id为demo, 类为liItem的元素的合集
通配符选择器(*) | 所有元素 | $("*")
层级选择器
-
子元素选择器(>)
选择指定元素的直接子元素, 例如
$("#divItem >p ")
, 会选择出id为divItem的这个元素下面的p元素; -
后代选择器(空格)
选择指定元素的后代元素, 例如:
$("divItem p")
与子元素选择器不同的是,会选中所有后代元素p; -
兄弟选择器(~)
选择指定元素后面所有的兄弟元素(后面的所有兄弟元素)
$("#j_liItem ~ li")
基本过滤选择器
选择器 | 作用 | 实例 |
---|---|---|
奇数行选择器(:odd) | 选择序号为奇数的元素 | $("li:odd") |
偶数行选择器(:even) | 选择序号为偶数的元素 | $("li:even") |
相等选择器(:eq(index)) | 选择序号等于index的元素 | $("li:eq(1)") |
大于选择器(:li:gt(index)) | 选择序号大于index的元素 | $("li:gt(3)") |
筛选选择器
选择器 | 作用 |
---|---|
.find(selector) | 后代查找 |
.childern(selector) | 子代查找 |
.parent(selector) | 查找父元素 |
.siblings(selector) | 查找所有兄弟元素 |
.eq(index) | 相等查找 |
.prev(selector) | 查找前一个兄弟元素 |
.next(selector) | 查找后一个兄弟元素 |
jQuery DOM操作
HTML节点操作
- 创建节点
var node = $("<div>创建的节点</div>")
- 内部添加节点
//.append(jqueryobj)
$("div").append(node);
//.append(htmlstring)
$("div").append("<p>动态创建元素</p>");
- 删除节点
.remove()
-
清空节点
.empty()
- 外部添加节点
//.before()
$("div").before("<p>动态创建元素</p>");
//.after()
$("div").after("<p>动态创建元素</p>");
HTML控制操作
.val()
方法, 获取/设置表单value值;.attr()
方法, 获取/设置属性;.html()
方法, 获取/设置 html内容;.text()
方法, 获取/设置 文本内容;
尺寸操作
.width()
方法, 获取/设置宽度.height()
方法, 获取/设置高度
位置操作
.offset()
方法, 获取/设置偏移.offset()
设置后,元素变为相对定位.position()
获取元素相对于父元素的偏移, 无法设置;.scrollTop()
获取/设置滚动条距离上方的位置;.scrollLeft()
获取/设置滚动条距离左边的位置;
动画效果
淡入淡出
-
fadeIn()
淡入函数,可以使用数字或常量设置时长// slow = 600ms // fast = 200ms // normal = 400ms $("div").fadeIn(1000) $("div").fadeIn("fast")
.fadeOut()
淡出函数.fadeTogger()
淡入淡出切换-
.fadeTo()
改变透明度// 0 全透明, 1 不透明 $("div").fadeTo(1000,0.5)
显示隐藏
.slideDown()
卷帘门效果下拉显示.slideUp()
卷帘门效果上拉隐藏.slideToggle()
切换.show()
从左上角开始显示;.hide()
收缩到左上角
其他
.animate()
自定义动画
$("div").animate({
"height": "500px"
}, 1000);
.stop(stopAll, goToEnd)
停止动画
// stopAll 是否清空动画队列
// goToEnd 是否立即执行完当前动画
$("div").stop(true, false);
样式操作
.css()
方法, 获取和设置样式属性值
// 获取 font-size
$("div").css("font-size");
// 通过字符串设置
$("div").css("font-size","30px");
// 通过json对象设置
$("div").css({"font-size":"30px","color":"red"});
.addClass()
添加类
// 类名 className 不带.
$("div").addClass("className");
.removeClass()
移除类
// 类名 className 不带.
$("div").removeClass("className");
.hasClass()
判断是否存在指定类.toggleClass()
切换指定类
数据缓存 .data()
// 获取:
$(selector).data(); // 获取数据缓存
$(selector).data(“index”);
// 设置:
$(selector).data(“index”, 1); //设置数据缓存
$(selector).data({belong: “传智播客”});
事件
简单事件绑定
click(hander) .click() //绑定事件 或者触发 click事件
blur() //失去焦点事件,同上
hover(mouseenter, mouseleave) //鼠标移入,移出
mouseenter(): 当鼠标离开元素及它的子元素的时都会触发。
mouseleave(): 当鼠标离开自己时才会触发,子元素不触发。
dbclick() 双击
change() 改变,比如:文本框发送改变,下来列表发生改变等…
focus() 获得焦点
keyup(), keydown(), keypress() : 键盘 键被按下。
mousedown() 鼠标按下
bind 方式绑定
- bind为某个jquery对象绑定 事件
//.bind( eventType [, eventData ], handler )
// e.g
$("p").bind("click", function(e){
//事件响应方法
});
- unbind解绑bind方式绑定的事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
delegate 方式绑定
- delegate 为某个元素下所有选中标签添加事件
//$(selector).delegate( selector, eventType, handler )
// e.g
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
- delegate 解绑
$( “p” ).undelegate(); //解绑所有的delegate事件
$( “p” ).undelegate( “click” ); //解绑所有的click事件
on 方式绑定
- on绑定, 统一所有事件绑定
// $(selector).on( events [, selector ] [, data ], handler )
//e.g
//绑定一个方法
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
//给子元素绑定事件
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
//绑定多个事件的方式
$( "div.test" ).on({
click: function() {
$( this ).toggleClass( "active" );
}, mouseenter: function() {
$( this ).addClass( "inside" );
}, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
- off 解绑 on方式绑定的事件
$( “p” ).off(); // 移除所有事件
// 解绑所有的click事件,两个*表示所有
$( “p” ).off( “click”, “**” );
$( “body” ).off( “click”, “p”, foo );
one绑定一次事件的方式
//.one( events [, data ], handler )
//e.g
$( "p" ).one( "click", function() {
alert( $( this ).text() );
});
事件触发
//简单事件触发
$(selector).click(); //触发 click事件
//trigger方法触发事件
$( “#foo” ).trigger( “click” );
//triggerHandler触发 事件响应方法,不触发浏览器行为
$( “input” ).triggerHandler( “focus” );
jQuery事件对象介绍
event.data //传递的额外事件响应方法的额外参数
event.currentTarget === this //在事件响应方法中等同于this,当前Dom对象
event.target //事件触发源,不一定===this
event.pageX //The mouse position relative to the left edge of the document
event.stopPropagation()//阻止事件冒泡
e.preventDefault(); //阻止默认行为
event.type //事件类型:click,dbclick…
event.which //鼠标的按键类型:左1 中2 右3
event.keyCode// code的c是大写
多库共存
jQuery占用了:$ 和jQuery这两个变量
var $ = { name : “itecast” };
$.noConflict(); // 此时可以使用jQuery(如果jQuery没有被占用)
var laoliu_jQ = $.noConflict();//让jQuery释放 $, 让$ 回归到jQuery之前的对象定义上去。此时,可以使用laoliu_jQ来代替 jQuery和$的作用
其他
- map函数, 返回一个新数组
- each函数, 遍历一个数组