jquery思想和方法
jquery是什么?
一系列函数的集合,是别人封装好的函数,自己拿去调用就OK了
主要就是用更少的代码实现更多的功能
比如:页面上有两个按钮,一张图片,当点击hidden按钮时隐藏图片,当点击show按钮时显示图片
一般情况,利用DOM技术,当点击按钮时触发onclick事件进而引发一个函数,但代码很长
如果用jquery,如$("#ID"),它的本质是一个函数,$其实只是一个方法名而已,#ID是函数的形参,这样做给了我们一个假象,就是只需要调用这个函数就能够定位到某个节点,这样代码就会简洁很多,不需要通过document.getElementById();document.getElementsByTagName();document.ElementsByName()来实现
get( )和eq( )的区别
eq返回的是一个jquery对象,get返回的是一个html 对象数组
返回的是jQuery对象,就可以继续调用其他方法,返回的是html数组就不能调用jQuery的其他方法
<p style="color:red">颜色</p> 使用eq来获得第一个p标签的color值: $("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css使用get来获得第一个p标签的color值: $("p").get(0).style.color //因为get(num)返回的是个html对象,所以要使用传统的HTML对象方法,jq对象此时就没用了。 当然,也可以get(num)后把对象转为jq的对象再进行操作: $($("p").get(0)).css("color")
选择网页元素
jQuery的基本设计思想和主要用法,就是选择某个网页元素,然后对其进行某种操作
选择表达式可以是CSS选择器:
$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素
也可以是jQuery自己的表达式:
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素,除了前三个
$('div:animated') // 选择当前处于动画状态的div元素
链式操作
比如:$('div').find('h3').eq(2).html('Hello');
分解开就是:
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
jQuery还提供了.end()方法,使得结果集可以后退一步
取值和赋值
$('h1').html(); //html()没有参数,表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值
常见的几个:
.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值
移动
第一种方法是使用.insertAfter(),把div元素移动p元素后面:
$('div').insertAfter($('p'));
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同 HTML 代码: <p>I would like to say: </p><div id="foo">Hello</div> jQuery 代码: $("p").insertAfter("#foo"); 结果: <div id="foo">Hello</div><p>I would like to say: </p>
第二种方法是使用.after(),把p元素加到div元素前面:
$('p').after($('div'));
把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。 HTML 代码: <div id="foo">Hello</div><p>I would like to say: </p> jQuery 代码: $("p").insertBefore("#foo"); 结果: <p>I would like to say: </p><div id="foo">Hello</div>
四对操作方法:
.insertAfter()和.after():在现存元素的外部,从后面插入元素
.insertBefore()和.before():在现存元素的外部,从前面插入元素
.appendTo()和.append():在现存元素的内部,从后面插入元素
.prependTo()和.prepend():在现存元素的内部,从前面插入元素
事件操作:把事件直接绑定在网页元素之上。
$('p').click(function(){
alert('Hello');
});
jquery中的事件
.blur() 表单元素失去焦点。
触发所有段落的blur事件
$("p").blur();
.change() 表单元素的值发生变化
触发被选元素的 change 事件。
$(selector).change();
.click() 鼠标单击
.dblclick() 鼠标双击
.focus() 表单元素获得焦点
.focusin() 子元素获得焦点
.focusout() 子元素失去焦点
.hover() 同时为mouseenter和mouseleave事件指定处理函数
.keydown() 按下键盘(长时间按键,只返回一个事件)
在页面内对键盘按键做出回应,可以使用如下代码:
jQuery 代码:
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// ...
}
});
.keypress() 按下键盘(长时间按键,将返回多个事件)
.keyup() 松开键盘
.mousedown() 按下鼠标
.mouseenter() 鼠标进入(进入子元素不触发)
.mouseleave() 鼠标离开(离开子元素不触发)
.mousemove() 鼠标在元素内部移动
.mouseout() 鼠标离开(离开子元素也触发)
.mouseover() 鼠标进入(进入子元素也触发)
.mouseup() 松开鼠标
.ready() DOM加载完成
.resize() 浏览器窗口的大小发生改变
.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
触发所有input元素的select事件:
$("input").select();
当文本框中文本被选中时执行的函数:
$(":text").select( function () { /* ...do something... */ } );
.submit() 用户递交表单
.toggle() 根据鼠标点击的次数,依次运行多个函数
.unload() 用户离开页面
事件运行一次,可以使用.one()方法
$("p").one("click", function() {
alert("Hello"); //只运行一次,以后的点击不会运行
});
事件对象:所有的事件处理函数,都可以接受一个事件对象作为参数
$("p").click(function(e) {
alert(e.type); // "click"
});
事件对象的属性和方法:
event.pageX 事件发生时,鼠标距离网页左上角的水平距离
event.pageY 事件发生时,鼠标距离网页左上角的垂直距离
event.type 事件的类型(比如click)
event.which 按下了哪一个键
event.data 在事件对象上绑定数据,然后传入事件处理函数
event.target 事件针对的网页元素
event.preventDefault() 阻止事件的默认行为(比如点击链接,会自动打开新页面)
event.stopPropagation() 停止事件向上层元素冒泡
工具函数
字符串操作
$.trim():去除字符串左右两边的空格
去掉字符串起始和结尾的空格。
$.trim(" hello, how are you? ");
数组和对象操作
$.each()
遍历数组
$.each(array,function(index,value){}):array:数组变量,index:元素下标,从0开始,value:元素值
遍历对象
$each(object,function(name,value){}):object:对象,name:属性名,value:属性值
例遍数组,同时使用元素索引和内容。
jQuery 代码:
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
例遍对象,同时使用成员名称和变量内容。
jQuery 代码:
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
$.inArray():查找元素的下标
$.inArray(value,array):value:元素值,array:查找的数组,返回元素在数组中的下标,从0开始
$.merge():合并两个数组
$.merge(array1,array2):将第二个数组加到第一个数组后面
$.unique():去除重复DOM元素
$.unique(dom):dom:DOM元素
.toArray():把jQuery集合中所有DOM元素恢复成一个数组。
.parseJSON(json):接受一个JSON字符串,返回解析后的对象。
.parseXML(data):解析一个字符串到一个XML文件。
$extend():用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
jQuery.fn.extend(object);给jQuery对象添加方法。
jQuery.extend(object); 为扩展jQuery类本身,为自身添加新的方法。
jQuery.fn = jQuery.prototype 即指向jQuery对象的原型链,对其它进行的扩展,作用在jQuery对象上面;
一般用此方法来扩展jQuery的对象插件
将hello方法合并到jquery的实例对象中。
$.fn.extend({
hello:function(){alert('hello');}
});
在jquery全局对象中扩展一个net命名空间。
$.extend($.net,{
hello:function(){alert('hello');}
}); //使用jQuery.net.hello();
增加两个插件方法。
jQuery 代码:
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
结果:
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
$.map( ):将一个数组中的元素转换到另一个数组中。
将原数组中每个元素加 4 转换为一个新数组。
jQuery 代码:
$.map( [0,1,2], function(n){
return n + 4;
});
结果:
[4, 5, 6]
原数组中大于 0 的元素加 1 ,否则删除。
jQuery 代码:
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
结果:
[2, 3]
原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组。
jQuery 代码:
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
结果:
[0, 1, 1, 2, 2, 3]
.toArray():把jQuery集合中所有DOM元素恢复成一个数组。
.parseJSON(json):接受一个JSON字符串,返回解析后的对象。
.parseXML(data):解析一个字符串到一个XML文件。
测试操作
$.isArray():判断是否为数组对象,返回boolean
$.isFunction():判断是否为函数,返回boolean
$.isEmptyObject():判断是否为空对象,返回boolean
$.isPlainObject():判断是否为纯粹对象,返回boolean
$.contains():判断DOM节点是否包含另一个DOM节点
$.type():输出数据类型,返回对象的数据类型
$.isNumeric():判断是否为数值类型
$.isWindow():判断是否为Window对象
URL操作
$param():将对象的键值对转化为URL键值对字符串形式
$param(object):object:需要转化的对象
.error(message):接受一个字符串,并且直接抛出一个包含这个字符串的异常。
插件编写
.error(message):接受一个字符串,并且直接抛出一个包含这个字符串的异常。
$.fn.jquery:代表 jQuery 版本号的字符串。
其他操作
$.proxy():调整this的指向
外部事件触发调用对象方法时,this指向会有问题(会调用触发的对象)
特殊效果
显示隐藏:可设置函数和线性运动
$("p").hide();隐藏
$("p").show();显示
$("p").toggle(); 隐藏的时候显示,显示的时候隐藏
淡入淡出
fadeIn() 淡入已隐藏的元素
fadeout() 淡出可见元素
$('h1').fadeIn(300); // 300毫秒内淡入
$('h1').fadeOut('slow'); // 缓慢地淡出
fade Toggle() 方法 淡出就淡入 淡入就淡出
fadeTo() 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
滑动
slideDown();向下滑动 slideUp(); 向上滑动 slideToggle(); 反过来滑动
动画
animate()创建动画 可以操作多个属性 height opacity等 也可以使用相对值 “+=”
点击按钮后div元素的几个不同属性一同变化 HTML 代码: <button id="go"> Run</button> <div id="block">Hello!</div> jQuery 代码: // 在一个动画中同时应用三种类型的效果 $("#go").click(function(){ $("#block").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000 ); });