文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

jQuery总结

时间：2019-07-11 15:25:40   收藏：0   阅读：92

第一节 jQuery初步认知

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 选取所有的不可见元素

第三节 选择器优化

第四节 代理对象属性和样式操作

第五节 jQuery中DOM操作

方法说明
append() 向每个匹配元素内部追加内容
appendTo() 颠倒append()的操作
prepend() 向每个匹配元素的内容内部前置内容
prependTo() 颠倒prepend()的操作
after() 向每个匹配元素之后插入内容
insertAfter() 颠倒after()的操作
before() 在每个匹配元素之前插入内容
insertBefore() 颠倒before()的操作

CSS DOM操作

 

第六节 jQuery动画

回顾上节

一、创建节点

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`等

第七节 jQuery中的事件

页面载入 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) 绑定一个处理函数

第八节 jQuery与Ajax

创建一个Ajax请求

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4)
    {
        alert( xhr.responseText );
    }
};

 

//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

$.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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this;//调用本次Ajax请求时传递的options`参数
}
error Function 请求失败时被调用的函数
global Boolean 默认为true。表示是否触发全局Ajax事件，设置为false将不会触发。AjaxStart或AjaxStop可用于控制各种Ajax事件

第九节 插件

;(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);

附录一 jQuery各个版本新增的一些常用的方法

方法说明
.closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
die() 从元素中删除先前用live()方法绑定的所有的事件
live() 附加一个事件处理器到符合目前选择器的所有元素匹配
方法说明
.first() 获取集合中第一个元素
last() 获取集合中最后一个元素
has(selector) 保留包含特定后代的元素，去掉那些不含有指定后代的元素
detach() 从DOM中去掉所有匹配的元素。detach()和remov()一样，除了detach()保存了所有jquery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用
delegate() 为所有选择器匹配的元素附加一个处理一个或多个事件
undelegate() 为所有选择器匹配的元素删除一个处理一个或多个事件
方法说明
prop(proptyName) 获取在匹配元素集合中的第一个元素的属性值
removeProp(proptyName,value) 为匹配的元素删除设置的属性
:focus 选择当前获取焦点的元素

附录二 jQuery性能优化

附录三 常用的jQuery代码片段

附录四 常见CND加速服务

附录五 jQuery的一些资源

扩展阅读

参考

 

原文：https://www.cnblogs.com/wzdnwyyu/p/11169095.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！