标签:方法参数 渐变 群组 类库 属性 微软 :focus relative use
jQuery概述
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
$(function(){
alert(“jQuery 你好!”);
});
</script>
window.onload | $(document).ready() | |
---|---|---|
执行时机 | 必须等网页中所有内容加载完后(图片)才执行 | 网页中的DOM结构绘制完后就执行,可能DOM元素相关的东西并没有加载完 |
编写个数 | 不能同时执行多个 | 能同时执行多个 |
简化写法 | 无 | $(document).ready(function(){ //.. }); 推荐写法:$(function(){ }); |
初步了解JQuery
<script type="text/javascript"></script>
写第一个JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
$(function(){
alert(“jQuery 你好!”);
});
</script>
function $(id){
return document.getElementById(id);
}
<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("id") == $("#aa"));//返回结果为false
alert(document.getElementById("id") == $("#aa").get(0));//返回true
$(传入的原生对象);
//原生对象转化成jQuery对象
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true
选择器 | 语法 | 描述 |
---|---|---|
标签选择器 | E{css规则} | 以文档元素作为选择符 |
ID选择器 | #ID{css规则} | ID作为选择符 |
类选择器 | E.className{css规则} | class作为选择符 |
群组选择器 | E1,E2,E3{css规则} | 多个选择符应用同样的样式 |
后代选择器 | E F{css规则} | 元素E的任意后代元素F |
过滤选择器
选择器 | 说明 | 返回 |
---|---|---|
:first | 匹配找到的第1个元素 | 单个元素 |
:last | 匹配找到的最后一个元素 | 单个元素 |
:eq | 匹配一个给定索引值的元素 | 单个元素 |
:even | 匹配所有索引值为偶数的元素 | 集合元素 |
: odd | 匹配所有索引值为奇数的元素 | 集合元素 |
:gt(index) | 匹配所有大于给定索引值的元素 | 集合元素 |
:lt(index) | 匹配所有小于给定索引值的元素 | 集合元素 |
:not | 去除所有与给定选择器匹配的元素 | 集合元素 |
:animated | 选取当前正在执行动画的所有元素 | 集合元素 |
focus | 选取当前正在获取焦点的元素 | 集合元素 |
选择器 | 描述 | 返回 |
---|---|---|
:contains(text) | 选取含有文本内容为text的元素 | 集合元素 |
:empty | 选取不包含子元素获取文本的空元素 | 集合元素 |
:has(selector) | 选择含有选择器所匹配的元素的元素 | 集合元素 |
:parent | 选取含有子元素或者文本的元素 | 集合元素 |
选择器 | 描述 | 返回 |
---|---|---|
:hidden | 选择所有不可见的元素 | 集合元素 |
:visible | 选取所有可见的元素 | 集合元素 |
选择器 | 说明 | 返回 |
---|---|---|
[attribute] | 选取拥有此属性的元素 | 集合元素 |
[attribute=value] | 选取属性值为value值的元素 | 集合元素 |
[attribue^=value] | 选取属性的值以value开始的元素 | 集合元素 |
[attribue$=value] | 选取属性的值以value结束的元素 | 集合元素 |
选择器 | 说明 | 返回 |
---|---|---|
:nth-child(index/even/odd) | 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) | 集合元素 |
:first-child | 选取每个元素的第一个子元素 | 集合元素 |
:last-child | 选取每个元素的最后一个子元素 | 集合元素 |
选择器 | 说明 | 返回 |
---|---|---|
:enabled | 选取所有可用元素 | 集合元素 |
:disabled | 选取所有不可用元素 | 集合元素 |
:checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 |
:selected | 选取所有被选中的元素(下拉列表) | 集合元素 |
选择器 | 说明 |
---|---|
:input | 选取所有input textarea select button元素 |
:text | 选取所有单行文本框 |
:password | 选取所有密码框 |
:radio | 选取所有单选框 |
:checkbox | 选取所有多选框 |
:submit | 选取所有的提交按钮 |
:image | 选取所有的图像按钮 |
:reset | 选取所有的重置按钮 |
:button | 选取所有的按钮 |
:file | 选取所有的上传域 |
:hidden | 选取所有的不可见元素 |
使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中,ID选择器速度最快,其次是类型选择器。
使用过滤器
jQuery提供了2种选择文档元素的方式:选择器和过滤器
类过虑器:根据元素的类属性来进行过滤操作。
下标过滤器:精确选出指定下标元素
表达式过滤器
映射 map(callback):将一组元素转换成其他数组
清洗 not(expr):删除与指定表达式匹配的元素
截取 slice(start,end):选取一个匹配的子集
查找
DOM是一种与浏览器、平台|语言无关的接口,使用该接口可以轻松的访问 页面中的所有的标准组件
DOM操作的分类
DOM Core
HTML-DOM
CSS-DOM
查找节点
创建节点
插入节点
方法 | 说明 |
---|---|
append() | 向每个匹配元素内部追加内容 |
appendTo() | 颠倒append()的操作 |
prepend() | 向每个匹配元素的内容内部前置内容 |
prependTo() | 颠倒prepend()的操作 |
after() | 向每个匹配元素之后插入内容 |
insertAfter() | 颠倒after()的操作 |
before() | 在每个匹配元素之前插入内容 |
insertBefore() | 颠倒before()的操作 |
删除节点
复制节点
替换节点
样式操作
设置和获取HTML、文本和值
html()
text()
方法
val()
方法
遍历节点
children()
方法
next()
方法
prev()
方法
siblings()
方法
parent()
方法
parents()
方法
CSS DOM操作
CSS DOM技术简单的来说就是读取和设置style对象的各种属性
用css()方法获取元素的样式属性,可以同时设置多个样式属性
CSS DOM中关于元素定位有几个常用的方法
offset()
方法
position()
方法
scrollTop()方法和scrollLeft方法
回顾上节
一、创建节点
var div = document.createElement("div");
document.body.appendChild(div);
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
var $div = = $("<div>DOM</div>");
$(body).append($div);
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");
var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);
二、插入内容
三、删除内容
四、克隆内容:创建指定节点副本
五、替换内容
本节新知识
显隐动画
滑动
渐变:通过改变不透明度
方法名 | 说明 |
---|---|
hide()和show() | 同时修改多个样式属性即高度和宽度和不透明度 |
fadeIn()和fadeOut() | 只改变不透明度 |
slideUp()和slideDown() | 只改变高度 |
fadeTo() | 只改变不透明度 |
toggle() | 用来代替show()和hide()方法,所以会同时修改多个属性即高度、宽度和不透明度 |
slideToggle() | 用来代替slideUp和slideDown()方法,所以只能改变高度 |
fadeToggle() | 用来代替fadeIn()和fadeOut方法,只能改变不透明度 |
animate() | 属于自定义动画,以上各种动画方法都是调用了animate方法。此外,用animate方法还能自定义其他的样式属性,例如:left marginLeft scrollTop 等 |
事件对象的属性
事件冒泡
bind();绑定
绑定特定事件类型方法
分类 | 方法名称 | 说明 |
---|---|---|
页面载入 | ready(fn) | 当DOM载入就绪可以绑定一个要执行的函数 |
事件绑定 | blind(type,[data],fn) | 为每个匹配元素的特定事件绑定一个事件处理函数 |
事件绑定 | unblind() | 解除绑定 |
事件绑定 | on(events,[,selector[,]data],handler) | 在选择元素上绑定一个或者多个事件处理函数 |
事件绑定 | off() | 移除on绑定的事件 |
事件绑定 | delegate(selector,eventType,handler) | 为所有选择匹配元素附加一个或多个事件处理函数 |
事件绑定 | undelegate() | 移除绑定 |
事件动态 | live(type,fn) | 对动态生成的元素进行事件绑定 |
事件动态 | die(type,fn) | 移除live()绑定的事件 |
交互事件 | hover() | 鼠标移入移出 |
交互事件 | toggle(fn1,fn2,[fn3],[fn4]) | 每单击后依次调用函数 |
交互事件 | blur(fn) | 触发每一个匹配元素的blur事件 |
交互事件 | change() | 触发每一个匹配元素的change事件 |
交互事件 | click() | 触发每一个匹配元素的click事件 |
交互事件 | focus() | 触发每一个匹配元素的focus事件 |
交互事件 | submit() | 触发每一个匹配元素的submit事件 |
键盘事件 | keydown() | 触发每一个匹配元素的keydown事件 |
键盘事件 | keypress() | 触发每一个匹配元素的keypress事件 |
键盘事件 | keyup() | 触发每一个匹配元素的keyup事件 |
鼠标事件 | mousedown(fn) | 绑定一个处理函数 |
鼠标事件 | mouseenter(fn) | 绑定一个处理函数 |
键盘事件 | mouseleave(fn) | 绑定一个处理函数 |
键盘事件 | mouseout(fn) | 绑定一个处理函数 |
键盘事件 | mouseover(fn) | 绑定一个处理函数 |
窗口操作 | resize(fn) | 绑定一个处理函数 |
窗口操作 | scroll(fn) | 绑定一个处理函数 |
Ajax
简介 :
Ajax优势与不足
创建一个Ajax请求
Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键,发送异步请求、接受响应以及执行回调都是通过它来完成
创建ajax对象 var xhr = new XMLHttpRequest();
准备发送请求
get / post
form表单中:
action:
post:
url
是否异步
正式发送请求
ajax请求处理过程
xhr.onreadystatechange = function(){
if (xhr.readyState == 4)
{
alert( xhr.responseText );
}
};
status : http状态码
案例:ajax封装案例
//ajax请求后台数据
var btn = document.getElementsByTagName("input")[0];
btn.onclick = function(){
ajax({//json格式
type:"post",
url:"post.php",
data:"username=poetries&pwd=123456",
asyn:true,
success:function(data){
document.write(data);
}
});
}
//封装ajax
function ajax(aJson){
var ajx = null;
var type = aJson.type || "get";
var asyn = aJson.asyn || true;
var url = aJson.url; // url 接收 传输位置
var success = aJson.success;// success 接收 传输完成后的回调函数
var data = aJson.data || '';// data 接收需要附带传输的数据
if(window.XMLHttpRequest){//兼容处理
ajx = new XMLHttpRequest();//一般浏览器
}else
{
ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
}
if (type == "get" && data)
{
url +="/?"+data+"&"+Math.random();
}
//初始化ajax请求
ajx.open( type , url , asyn );
//规定传输数据的格式
ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
//发送ajax请求(包括post数据的传输)
type == "get" ?ajx.send():ajx.send(aJson.data);
//处理请求
ajx.onreadystatechange = function(aJson){
if(ajx.readState == 4){
if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码
{
//请求成功处理数据
success && success(ajx.responseText);
}else{
alert("请求出错"+ajx.status);
}
}
};
jQuery中的Ajax [补充部分--来自锋利的jQuery]
jquery对Ajax操作进行了封装,在jquery中的$.ajax()方法属于最底层的方法,第2层是load()、$.get()、$.post();第3层是$.getScript()、$.getJSON(),第2层使用频率很高
load()方法
$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//respnoseText 请求返回的内容
//textStatus 请求状态 :sucess、error、notmodified、timeout
//XMLHttpRequest
})
参数名称 | 类型 | 说明 |
---|---|---|
url | String | 请求HTML页面的URL地址 |
data(可选) | Object | 发送至服务器的key / value数据 |
callback(可选) | Function | 请求完成时的回调函数,无论是请求成功还是失败 |
$.get()和$.post()方法
load()方法通常用来从web服务器上获取静态的数据文件。在项目中需要传递一些参数给服务器中的页面,那么可以使用$.get()和$.post()或$.ajax()方法
参数 | 类型 | 说明 |
---|---|---|
url | String | 请求HTML页的地址 |
data(可选) | Object | 发送至服务器的key/ value 数据会作为QueryString附加到请求URL中 |
callback(可选) | Function | 载入成功的回调函数(只有当Response的返回状态是success才调用该方法) |
type(可选) | String | 服务器返回内容的格式,包括xml、html、script、json、text和_default |
$.post()方法
它与$.get()方法的结构和使用方式相同,有如下区别
总结
$.ajax()方法
参数 | 类型 | 说明 |
---|---|---|
url | String | (默认为当前页地址)发送请求的地址 |
type | String | 请求方式(POST或GET)默认为GET |
timeout | Number | 设置请求超时时间(毫秒) |
dataType | String | 预期服务器返回的类型。可用的类型如下 xml:返回XML文档,可用jquery处理 html:返回纯文本的HTML信息,包含的script标签也会在插入DOM时执行 script:返回纯文本的javascript代码。不会自动缓存结果,除非设置cache参数。注意:在远程请求时,所有的POST请求都将转为GET请求 json:返回JSON数据 jsonp:JSONP格式,使用jsonp形式调用函数时,例如:myurl?call back=?,jquery将自动替换后一个?为正确的函数名,以执行回调函数 text:返回纯文本字符串 |
beforeSend | Function | 发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的参数 function(XMLHttpRequest){ this;//调用本次Ajax请求时传递的options参数 } |
complete | Function | 请求完成后的回调函数(请求成功或失败时都调用) 参数:XMLHttpRequest对象和一个描述成功请求类型的字符串 function(XMLHttpRequest,textStatus){ this;//调用本次Ajax请求时传递的options参数 } |
success | Function | 请求成功后调用的回调函数,有两个参数 (1)由服务器返回,并根据dataTyppe参数进行处理后的数据 (2)描述状态的字符串 function(data,textStatus){ //data可能是xmlDoc、jsonObj、html、text等<br> this;//调用本次Ajax请求时传递的options 参数 } |
error | Function | 请求失败时被调用的函数 |
global | Boolean | 默认为true。表示是否触发全局Ajax事件,设置为false将不会触发。AjaxStart或AjaxStop可用于控制各种Ajax事件 |
什么是插件
插件分为哪几类
引入插件的步骤
如何自定义插件
:
自定义插件的规范
(解决各种插件的冲突和错误,增加成功率)
自定义插件案例
jQuery官方提供的插件开发模板
;(function($){
$.fn.plugin=function(options){
var defaults = {
//各种参数 各种属性
}
var options = $.extend(defaults,options);
this.each(function(){
//实现功能的代码
});
return this;
}
})(jQuery);
自定义jQuery函数:
(function($){
$.extend({
test: function(){
alert("hello plugin");
}
})
})(jQuery);
自定义jQuery命令:
(function($){
$.fn.extend({
say : function(){
alert("hello plugin");
}
})
})(jQuery);
(function($){
$.fn.say = function(){
alert("hello plugin");
};
})(jQuery);
方法 | 说明 |
---|---|
.closest() | 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素 |
die() | 从元素中删除先前用live()方法绑定的所有的事件 |
live() | 附加一个事件处理器到符合目前选择器的所有元素匹配 |
方法 | 说明 |
---|---|
.first() | 获取集合中第一个元素 |
last() | 获取集合中最后一个元素 |
has(selector) | 保留包含特定后代的元素,去掉那些不含有指定后代的元素 |
detach() | 从DOM中去掉所有匹配的元素。detach()和remov()一样,除了detach()保存了所有jquery数据和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用 |
delegate() | 为所有选择器匹配的元素附加一个处理一个或多个事件 |
undelegate() | 为所有选择器匹配的元素删除一个处理一个或多个事件 |
方法 | 说明 |
---|---|
prop(proptyName) | 获取在匹配元素集合中的第一个元素的属性值 |
removeProp(proptyName,value) | 为匹配的元素删除设置的属性 |
:focus | 选择当前获取焦点的元素 |
性能优化
事件代理
每一个JavaScript事件(如:click、mouseover)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点很有用。比如,我们要为一个表单绑定这样的行为:点击td后,把背景颜色设置为红色
使用join()方法来拼接字符串
合理使用HTML5和Data属性
附录三 常用的jQuery代码片段
速查手册
jQuery插件
基础常用
更多插件-动效库整理
标签:方法参数 渐变 群组 类库 属性 微软 :focus relative use
原文地址:https://www.cnblogs.com/MessiXiaoMo3334/p/12534897.html