jQuery设计思想

最新推荐文章于 2020-12-09 02:09:05 发布

翻译最新推荐文章于 2020-12-09 02:09:05 发布 · 434 阅读

文章标签：

#jquery

jQuery 专栏收录该内容

10 篇文章

订阅专栏

学习素材

最好的jQuery入门教材

选择网页元素

jQuery基本设计思想：选择某个网页元素，然后对其进行某种操作
使用jQuery的第一步：将一个选择表达式，放进构造函数jQuery() （简写为$()）中，然后得到被选中的元素。
选择表达式可以是CSS选择器，或者是jQuery特有的表达式。

     - css选择器：

$(document);  //选择整个文档对象
$('#idName');  //选择id为idName的网页元素
$('div.className');  //选择class为className的div元素
$('input[attrName=attrValue]'); //选择attrName属性等于attrValue的input元素

 - jQuery特有的表达式：

$('a:first);  //选择网页中的第一个a元素
$('tr:odd');  //选择表哥的奇数行
$('#formId:input');  //选择id为formId的表格中的input元素
$('div:visible');  //选择可见的div元素
$('div:gt(2)');  //选择所有的div元素，除了前三个
$('div:animated');  //选择当前处于动画状态的div元素

改变结果集

jQuery设计思想之二：提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。

$('div').has('p');  //选择包含p元素的div元素
$('div').not('.className');  //选择class不等于className的div元素
$('div').filter('.className');  //选择class等于className的div元素
$('div').first();  //选择第一个div元素
$('div').eq(5);  //选择第六个div元素

有时候，需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

$('div').next('p');  //选择div元素后面的第一个p元素
$('div').parent();  //选择div元素的父元素
$('div').closest('form');  //选择离div最近的那个form父元素
$('div').children();  //选择div的所有子元素
$('div').siblings();  //选择div的同级元素

链式操作

jQuery设计思想之三：最终选中网页元素以后，可以对它进行一系列的操作，并且所有操作可以连接在一起，以链条的形式写出来。
如：$('div').find('h3').eq(2).html('Hello!'); //找到div元素，选择其中的h3元素，选择第三个h3元素，将其内容改为Hello！
它的原理在于每一步的jQuery操作，返回的都是一个jQuery元素，所以不同操作可以连在一起。
jQuery还提供了.end()方法，使得结果集可以后退一步。

$('div').find('h3').eq(2).html('Hello').end().eq(0).html('World');  //退回到选中所有h3元素的那一步

元素的操作：取值和赋值

jQuery设计思想之四：使用同一个函数，来完成取值getter和赋值setter，即取值器和赋值器合二为一，到底是取值还是赋值，由函数的参数决定。

$('h1').html;  //html()没有参数，表示取出h1的值
$('h1').html('Hello');  //html()有参数，表示对h1进行赋值

常见的取值和赋值函数如下：

.html();  //取出或设置html内容
.text();  //取出或设置text内容
.attr();  //取出或设置某个属性的值
.width();  //取出或设置某个元素的宽度
.height();  //取出或设置某个元素的高度
.val();  //取出某个表单元素的值

注意！：如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（text()例外，它取出所有元素的text内容）。

元素的操作：移动

jQuery设计思想之五：提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
假设我们选中了一个div元素，需要把它移动到p元素后面。一种方法是使用.insertAfter，把div元素移动到p元素后面：$('div').insertAfter($('p')); 第二种方法是使用.after() : $('p').after($('div')); 两者的区别：第一种返回div元素，第二种返回p元素。

.insertAfter();  //在现存元素的外部
.after();
.insertBefore();  //在现存元素的外部
.before();
.appendTo();  //在现存元素的内部
.append();
.prependTo();  //在现存元素的内部
.prepend();

元素的操作：复制、删除和创建

复制元素使用：.clone();
删除元素使用：.remove(); .detach(); 两者的区别：前者不保留元素的时间，后者保留，有利于重新插入文档时使用。
清除元素使用：.empty();
创建元素使用：只要把新元素直接传入jQuery的构造函数就可以了。如：$('<p>Hello</p>'); $('ul').append('<li>list item</li>')

工具方法

jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法。不必选中元素，就可以直接使用这些方法。
工具方法的实质，是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例（即选中元素）后使用。
常用的工具方法：

$.trim();  //去除字符串两端的空格
$.each();  //遍历一个数组或对象
$.inArray();  //返回一个值在数组中的索引位置。若不在数组中，则返回-1
$.grep();  //返回数组汇总符合某种标准的元素
$.extend();  //将多个对象合并到第一个对象
$.makeArray();  //将对象转化为数组
$.type();  //判断对象的类别（函数对象、日期对系那个、数组对象、正则对象等）
$.isArray();  //判断某个参数是否为数组
$.isEmptyObject();  //判断某个对象那个是否为空
$.isFunction();  //判断某个参数是否为函数
$.isPlainObject();  //判断某个参数是否为用"{}"或"new Object"建立的对象
$.support();  //判断浏览器是否支持某个特性

事件操作

jQuery设计思想之妻：把事件直接绑定在网页元素之上。

$('p').inclick(function(){
    alert('Come on!');
});

jQuery主要支持的事件：

.blur();  //表单元素失去焦点
.change(); //表单元素的值发生变化
.click(); //鼠标单击
.dbclick(); //鼠标双击
.focus(); //表单元素获得焦点
.focusin(); //子元素获得焦点
.focusout(); //子元素失去焦点
.hover(); //同时为mouseenter和mouseleave事件指定处理函数
.keydown(); //按下键盘（长时间按键，只返回一个事件）
.keypress(); //按下键盘（长时间按键，将返回多个事件）
.keyup(); //松开键盘
.load(); //元素加载完毕
.mousedown(); //按下鼠标
.mouseenter(); //鼠标进入（进入子元素不触发）
.mouseleave(); //鼠标离开（离开子元素不触发）
.mousemove(); //鼠标在元素内部移动
.mouseout(); //鼠标离开（离开子元素也触发）
.mouseover(); //鼠标进入（进入子元素也触发）
.mouseup(); //松开鼠标
.ready(); //DOM加载完成
.resize(); //浏览器窗口的大小发生变化
.scroll(); //滚动条的位置发生变化
.select(); //用户选中文本框中的内容
.submit(); //用户递交表单
.toggle(); //根据鼠标点击的次数，依次运行多个函数
.unload(); //用户离开页面

以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活的控制时间，如为多个事件绑定同一个函数：

$('input').bind(
    'click change',  //同时版定click和change事件
    function(){
        alert('Hello!');
    }
);

有时只想让事件运行一次，用.ont()方法

$('p').one(
    'click',
    function(){
        alert('Hello!');
    }
);

.unbind()用来解除事件绑定

$('p').unbind('click');

所有的事件处理程序，都可以接受一个事件对系那个作为参数，如下例中的e：

$('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();  //停止事件向上层元素冒泡

在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：

$('a').click(function(e){
    if($(this).attr('href').match('evil')){
        //如果确认为有害链接
        e.preventDefault();  //阻止打开
        $(this).addClass('evil');
    }
});

有两种方法可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger(); 或 .triggerHandler();

$('a').click();
$('a').trigger('click');

特殊效果

jQuery允许对象呈现某些特殊效果

$('h1').show();  //展现一个h1标题

常见的特殊效果：

.fadeIn();  //淡入
.fadeOut();  //淡出
.fadeTo();  //调成透明度
.hide();  //隐藏元素
.show();  //显示元素
.slideDown();  //向下展开
.slideUp();  //向上卷起
.slideToggle();  //依次展开或卷起某个元素
.toggle();  //依次展示或隐藏某个元素

除了.show() .hide()，所有其他的特效默认执行时间是400ms，不过可以自行设置

$('h1').fadeIn(300);
$('h1').fadeOut('slow');

特效结束后，可以指定执行某个函数

$('p').fadeOut(300, function(){ $(this).remove();})

更复杂的特效，可以用.animate()定义

$('div').animate(
    {
        left: "+=50",  //不断右移
        capacity: 0.25  //指定透明度
    }，
    300,  //持续时间
    function(){alert('well!');}  //回调函数
);