JavaScript（2）jQuery常用操作+CSS相关知识

àì夳堔傛蜴生んèń 2024-02-17 21:57 68阅读 0赞

## 1. 只需等待网页中的DOM结构加载完毕，就能执行包裹的代码 ##

$(document).ready(); 简写格式： $(function()\{\});  
// 必须等待网页全部加载完毕（包括图片等），然后才能执行包裹的代码  
window.onload

## 2. 自己的base.js 中的$与jQuery中的$符号冲突问题 ##

// 将jQuery变量赋值给另一变量  
var $$ = jQuery;  
// jQuery.js自带方法，使自己的$符号失效  
jQuery.noConflict();

## 3. 常规选择器6种 与CSS对应 ##

ID:\#box  
元素：div  
类(class):.box  
群组选择器:span,em,.box  
后代选择器:ul li a  
通配选择器:\*  
另外两种高级选择器:next选择器：ul+input nexAll选择器:ul~input  
为了补充高级选择器的几种模式，jQuery还提供了更加丰富的方法来选择元素:(函数不传参数代表 '\*')  
$('\#box').next(); $('\#box').nextAll();  
$('\#box').prev('p'); $('\#box').prevAll('p');   
$('\#box').prevUntil('p') $('\#box').nextUntil('p') 同级元素选定，遇到则停止  
$('\#box').siblings('p'); 同级上下所有元素选定  
$('\#nav p\[age=15\]') 通过属性有无匹配，也可以不指定属性的值

## 4. 过滤选择器 ##

通过特定的过滤规则来筛选所需要的DOM元素，和CSS中的味蕾语法相似：使用冒号(:)开头

### 4.1基本过滤器----- > ###

$('ul li:first') 选取第一个元素 $('ul li:last') 选取最后一个元素  
$('ul li:not(.red)') 非class为red的元素   
$('ul li:even') 索引为偶数的所有元素 $('ul li:odd') 索引为奇数的所有元素  
$('ul li:eq(1)') 索引等于index的元素 $('ul li:gt(1)') 索引大于index的元素 $('ul li:lt(1)') 索引小于index的元素  
$('ul :header') 标题元素，h1-h6  
$('ul :animated') 正在执行动画的元素  
$('ul :focus') 当前被焦点的元素(必须是网页初始状态的激活焦点元素  
)

### 4.2基本过滤器相应的方法------ > ###

$('li').eq(1) 索引等于index的元素  
$('li').first() li元素的第一个元素  
$('li').not('.red') 不含class为red的元素

### 4.3内容过滤器------ > 包含的子元素或文本内容上 ###

$('\#nav div:contains("核心")') 包含‘核心’文本的元素  
$('\#nav div:empty') 不包含子元素或空文本的元素  
$('ul:has(.red)') 含有class是red的元素  
$('ul:parent') 含有子元素或文本的元素  
$('li').parent() 选择当前元素的父元素  
$('li').parents() 当前元素的父元素及祖先元素  
$('li').parentsUntil('div') 选择当前元素遇到div父元素停止

### 4.4可见性过滤------ > ###

$('ul li:hidden') 元素li隐藏的元素  
$('ul li:visible') 元素li显示的元素

### 4.5子元素过滤器------ > ###

$('li:first-child') 每个父元素第一个 li 元素  
$('li:last-child') 每个父元素最后一个 li 元素  
$('li:only-child') 每个父元素只有一个 li 元素  
$('li:nth-child(odd)') 每个父元素奇数 li 元素  
$('li:nth-child(even)') 每个父元素偶数 li 元素  
$('li:nth-child(2)') 每个父元素第三个 li 元素

### 4.6其他方法---------- > ###

$('ul .red').is('li') 判断是否非‘li’元素 参数可以传递元素、对象集合、单个对象或者DOM对象，也可以传递一个方法，以自定义判断  
$('ul li a').slice(1,3) 选取从start到end位置的元素，如果是负数，则从后开始  
$('ul li a').contents() 获取某元素下面所有元素节点，包括文本节点

## 5 基础DOM和CSS操作 ##

### 5.1设置元素及内容------ > 以下方法传参表示设置值 ###

$('ul li a').eq(1).html() 获取html内容  
$('ul li a').eq(1).text() 获取元素中文本内容  
$('input.btn').eq(1).val() 获取表单中的文本内容, 如果想设置多个选项的选定状态，可以通过数组传参

### 5.2元素属性操作 ------- > ###

$('ul li').eq(3).attr('class') 获取元素key的属性值  
$('ul p').eq(0).attr(\{'align':'center'\}) 设置多个key属性的属性值  
$('ul p').eq(0).attr('align', function()\{  
return 'align key value couple';   
\}) 无参匿名函数，返回key对应的属性值 第一个参数表示index，第二个参数表示value  
$('ul p').eq(0).removeAttr('title') 删除某个指定的属性

### 5.3元素样式操作------- > ###

css() 获取，设置  
toggleClass()切换样式  
$('div').each(function(index, element)\{  
alert(index+':'+element);   
\});

### 5.4CSS方法----- > ###

$('\#test .one').width(200).height(200) 设置和获取宽高 不包含内外边距  
$('\#test .one').innerWidth() 获取宽度，包含内边距padding  
$('\#test .one').outerWidth(true) 无参时包含border和padding, 有参时还包含外边距  
$('\#test .one').offset().top 元素相对于视口的偏移位置  
$('\#test .one').position().top 元素相对于父元素的偏移位置  
$(window).scrollTop(300) 获取垂直滚动条的值，传参表示设置垂直滚动条的位置

## 6 DOM节点操作 ##

### 6.1创建节点-------- > ###

var pox = $('<div id="pox">节点</div>'); 
$('body').append(pox);

### 6.2插入节点--------- > ###

$('\#test').appendTo($('\#nav')) 将指定元素移入到指定元素content内部的后面  
$('\#test').prependTo($('\#nav')) 将指定元素移入到指定元素content内部的前面  
$('\#test').after($('\#nav')) 向test节点的同级节点的后面插入nav节点  
$('\#test').before($('\#nav')) 向test节点的同级节点的前面插入nav节点  
$('\#nav').insertAfter($('\#test')) 向test节点的同级节点的后面插入nav节点  
$('\#nav').insertBefore($('\#test')) 向test节点的同级节点的前面插入nav节点

### 6.3包裹节点--------- > ###

$('\#test').wrap('') 
$('\#test').wrap(document.createElement('strong')) 在test外层包裹一层strong 
$('\#test').wrap('123'); 包裹的元素可以带内容 
$('\#test').wrap('') 包裹多个元素 
$('\#test').wrapInner(document.createElement('strong')) 包裹子元素内容 
$('div').wrapAll(document.createElement('strong')) 所有div外面只包裹一层strong

### 6.4节点操作------------ > ###

$('\#test').append($('\#nav').clone(true)) 复制一个节点nav添加到test 
$('\#test').remove('.pox') 直接删除test元素下class为pox的元素，无参时直接删除test元素 
$('\#test').empty() 删除掉节点里的内容 
$('\#test').replaceWith('节点') 
$('节点').replaceAll($('\#test')) 将test替换成span元素

## 7 表单选择器----对于表单中的其他元素，textarea select 和 button 等，原理一样 ##

### 7.1常规选择器--------- > ###

$('input').val() 默认获取第一个  
$('input').eq(1).val()  
$('input\[name=name3\]').val() 选取name字段为name3的字段

### 7.2表单选择器--------- > submit reset image button file hidden等 ###

$(':input') 获取所有表单元素  
$(':text') 获取单行文本text元素  
$(':password') 获取所有密码框password元素  
$(':radio') 获取所有单选框radio元素  
$(':checkbox') 获取所有复选框checkbox元素

### 7.3表单过滤器---------- > 是否可用，是否选定 ###

$(':enabled') 获取可用元素  
$(':disabled') 获取不可用元素  
$(':checked') 获取单选、复选框中选中的元素  
$(':selected') 获取下拉列表中被选中的元素

## 8 基础事件 ##

========鼠标事件 click dbclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave  
========键盘事件 keydown keyup keypress  
========文档事件 unload resize scroll  
========表单事件 focus blur focusin focusout select change submit

### 8.1绑定事件--------- > ###

$(':button').bind('mouseout mouseover', function()\{  
alert('click');   
\}); 可以同时绑定多个事件  
$(':input').eq(0).bind(\{  
click : function()\{  
alert('点击');  
\},  
mouseover:function()\{  
alert('移入');   
\}   
\}); 通过对象键值对绑定多个参数  
$('input').bind('click', fn1);  
$('input').bind('click', fn2);  
$('input').unbind('click', fn1); 只删除fn1处理函数的事件

### 8.2简写事件----------- > ###

$('input').keydown(function(e)\{  
alert(e.keyCode);  
\});  
$('input').mouseout(function()\{  
alert('out');   
\});

### 8.3复合事件---------- > ###

$(':input').eq(0).hover(function()\{  
alert('移入');  
\}, function()\{  
alert('移出');   
\}); 鼠标移入触发第一个fn1，移除触发fn2

## 9 事件对象event ##

### 9.1事件对象--------- > ###

event对象属性：type target data relatedTarget currentTarget result timeStamp which altKey/shiftKey/ctrlKey/metaKey pageX screenX clientX  
$(':input').eq(0).bind('click', \{user:'Lee', age:100\}, function(e)\{  
var ea = 'type:' + e.type + ';\\ntarget:' + e.target  
\+ ';\\ndata:' + e.data.user + ';\\nwhich:' + e.which;  
alert(ea);  
\});

### 9.2冒泡和默认行为------- > ###

$(':input').eq(0).bind('click', function()\{  
alert('按钮被点击了!');   
\});  
$(document).click(function()\{  
alert('文档页面被触发了！');   
\}); 冒泡行为  
$(':input').eq(0).bind('click', function(e)\{  
alert('按钮被点击了!');  
e.stopPropagation();  
\});  
$(document).click(function()\{  
alert('文档页面被触发了！');   
\});  
阻止冒泡行为：e.stopPropagation();  
阻止默认行为: e.preventDefault();  
如果想阻止这两种默认行为，也可以简写为：return false;  
e.isPropagationStopped(); 判断是否调用了取消冒泡事件  
e.isDefaultPrevented(); 判断是否调用了取消默认行为事件  
e.isImmediatePropagationStopped(); 判断是否调用了取消事件的后续事件处理事件

## 10 高级事件 ##

### 10.1模拟操作--------- > ###

====triggerHandler不会触发事件的默认行为，而trigger会  
====triggerHandler只会影响第一个匹配到的元素，而trigger会影响所有  
====.triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。  
====trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是jQuery 扩展于 DOM 的机制，并非 DOM 特性。而.triggerHandler()不会冒泡。  
$(':input').eq(0).click(function(e, data1, data2)\{  
alert('按钮被点击了！' + (data1 + ',' + data2));   
\}).trigger('click', \['abc', '123'\]);  
  
  
$(':input').eq(0).click(function(e, data1, data2)\{  
alert('按钮被点击了！' + (data1 + ',' + data2));   
\}).triggerHandler('click', \['abc', '123'\]);  
  
  
var index = 1;  
$('div').bind('myEvent',function()\{  
alert('自定义事件' + index);  
index++;  
\});  
$('.div3').trigger("myEvent");

### 10.2命名空间----------- > ###

$(':input').eq(0).bind('click.abc', function()\{  
alert('abc');   
\});  
$(':input').eq(0).bind('click.xyz', function()\{  
alert('xyz');   
\});  
  
  
$(':input').eq(0).unbind('click.abc');

### 10.3事件委托---------- > ###

on off和one------ >  
$(':input').eq(0).one('click',function()\{  
alert('click');   
\}); one绑定的方法仅触发一次

## 11 动画效果 ##

### 11.1显示、隐藏---------- > ###

$(':input').eq(0).hide(3000); 3000表示时间  
$(':input').eq(0).hide('fast'); 提供的三种预设速度参数字符串：slow/normal/fast  
$(':input').eq(0).hide('fast',function()\{  
alert('动画执行完毕，执行此处!');   
\});

### 11.2淡入淡出------------- > ###

$(':input').eq(0).fadeTo('slow', 0.33);

### 11.3自定义动画------------ > ###

$(':input').eq(0).animate(\{  
'width':'300px',  
'height':'200px',  
'fontSize':'50px',  
'opacity':0.5   
\}, 1000, function()\{  
alert('动画执行完毕');   
\});  
$('.animate').click(function () \{  
$('\#box').animate(\{'left' : '100px'\});  
$('\#box').animate(\{'top' : '100px'\});  
$('\#box').animate(\{'width' : '300px'\});  
\}); 队列动画1  
$('.animate').click(function () \{  
$('\#box').animate(\{  
'left' : '100px'  
\}).animate(\{  
'top' : '100px'  
\}).animate(\{  
'width' : '300px'  
\});  
\}) 队列动画2  
$('.animate').click(function () \{  
$('\#box').animate(\{  
'left' : '100px'  
\}, function () \{  
$('\#box').animate(\{  
'top' : '100px'  
\}, function () \{  
$('\#box').animate(\{  
'width' : '300px'  
\});  
\});  
\});  
\}) 队列动画3

### 11.4动画相关方法------------- > ###

$('\#box').stop(true, true); 是否取消队列动画，是否到达当前动画结尾

### 11.5动画全局属性------------- > ###

$.fx.interval = 13; $.fx.off = true;  
easing 运动方式,自带的参数有两个：swing(缓动)、linear(匀速)，默认为 swing

## 12 Ajax进阶 ##

全局事件：.ajaxStart() .ajaxStop()  
局部事件：.success() .complete()  
全局事件方法所有Ajax请求都会出发到，并且只能绑定到document上。而局部方法，则针对某个ajax。

## 13 工具函数 ##

字符串操作：$.trim(str); 去空格  
数组和对象操作:遍历、筛选、修改、定位、合并、去重  
测试操作：判断数据的类型和状态  
URL操作:将对象的键值对转化为URL键值对字符串形式  
浏览器检测：早期的浏览器分IE和W3C浏览器;$.support.style等属性用于判断浏览器  
其他操作：绑定函数上下文的工具函数$.proxy(obj, 'test')

## 14 插件plugin ##

插件概述：插件是以jQuery的核心代码为基础，编写出符合一定规范的应用程序。也就是说插件也是jQuery代码，通过js文件引入的方式植入即可。  
插件的分类：UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等  
引入插件步骤：1.在所有插件之前引入jQuery.js  
 2.引入插件的周边，比如皮肤、中文包等。  
使用插件：除了 js 端的 validate()方法调用，表单处也需要相应设置才能最终得到验证效果。  
1.必填项：在表单设置 class="required"；  
2.不得小于两位：在表单设置 minlength="2"；  
3.电子邮件：在表单中设置 class="email";  
4.网址：在表单中设置 class="url"。  
自动完成插件：  
var user = \['about', 'family', 'but', 'how'\];  
$('form input\[name=user').autocomplete(user,\{  
minChars:0 // 双击显示全部数据  
\});

## 15 自定义插件注意要点： ##

经过日积月累的插件开发，开发者逐步约定了一些基本要点，以解决各种因为插件导致的冲突、错误等问题，包括如下：

1.插件名推荐使用 jquery.\[插件名\].js，以免和其他 js 文件或者其他库相冲突；  
2.局部对象附加 jquery.fn 对象上，全局函数附加在 jquery 上；  
3.插件内部，this 指向是当前的局部对象；  
4.可以通过 this.each 来遍历所有元素；  
5.所有的方法或插件，必须用分号结尾，避免出现问题；  
6.插件应该返回的是 jQuery 对象，以保证可链式连缀；  
7.避免插件内部使用$，如果要使用，请传递 jQuery 进去。