[技术面试] jquery教程

jquery教程
jQuery简介
jQuery也就是JavaScript和查询（Query）即辅助JavaScript开发的类库。
jQuery是一个兼容多浏览器的javascript库。
核心理念是 write less,do more (写得更少,做得更多)。
jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多 JavaScript高手加入。
曾经，jQuery是最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery！
jQuery的优点：轻量级、强大的选择器、出色的DOM操作、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、便捷的链式操作、丰富的插件支持、完善的文档、学习成本低、开源等等
大多数 JavaScript 类库一般都具备的特性包括：
选择器（Selector）、DOM操作、实用函数、事件处理、Ajax等

jQuery使用
进入jQuery官网或其他平台下载jQuery文件，并且引入页面：

下载: http://www.jq22.com/jquery-info122

通常每个版本号有两个版本可供下载
生产版 - 用于实际的网站中，已被精简和压缩
开发版 - 用于测试和开发，未压缩，是可读的代码

注意：2.0及之后的版本，不再兼容 IE 6 7 8
也可以引入服务器上的jQuery文件

[Java] 纯文本查看 复制代码

<script type=“text/javascript” src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

在jQuery库中，$ 就是jQuery的一个简写形式（别称）
例如： $(“#nan”) === jQuery(“#nan”)

当浏览器解析完DOM之后，执行ready小括号内的函数
$(document).ready( function () { …} )
可简写为：$(function () {…} )

在JQ中如何查找元素节点
$(字符串)
参数：必须css选择器形式的字符串。

JQuery_选择网页元素
1、模拟css选择元素
参考css选择器的参考手册
2、独有的表达式
3、支持多种筛选方式

JQuery的写法特点
1、方法函数化（基本上在JQ，基本不用=号，我们都通过函数调用的方式完成一些操作）
2、链式操作
3、取值赋值一体化

JQ和JS的关系
【注】JQ是通过JS封装的，
【注】JQ中$()调用返回的是一个JQ构造函数生成的对象。JQ对象后面只能跟JQ自己的方法。
【结论】：JQ和JS可以共存，但是不能混用。

JQ常用的方法
filter 过滤
not filter的反义词
has 拥有
prev 找到当前节点兄弟节点中的上一个节点
next 找到当前节点兄弟节点中的下一个节点
find() 查找子节点
eq(下标) 通过下标获取想要的元素
index() 返回当前这个节点，在【兄弟节点】中的下标
addClass 新增class样式
removeClass 删除class样式
val 表单元素的value值
size() JQ，获取选择器获取到的元素节点的个数
each 只能被JQ对象调用，进行对于我们获取到的元素遍历

获取宽的方法
width() //width
innerWidth()//width + padding
outerWidth();//width+padding+border
outerWidth(true);//width+padding+border+margin

[JavaScript] 纯文本查看 复制代码

$("button").click(function(){
    //普通获取css样式
    // alert($("#div1").css("width")); //100px
    //width
    alert("width: " + $("#div1").width());    
    //width + padding
    alert("innerWidth: " + $("#div1").innerWidth());
    //width + border + padding
    alert("outerWidth: " + $("#div1").outerWidth());
    //width + border + padding + margin
    alert("outerWidth: " + $("#div1").outerWidth(true));
})

获取高的方法
height();
innerHeight();
outerHeight();
outerHeight(true)

节点操作：
• insertBefore()//c插到a之前 before()//a之前插c
• insertAfter()//c插到a之后 after()//a之后插c
• appendTo()//c插到a末尾 append()//a末尾插c
• prependTo()//c插到a前面 prepend()//a前面插c
• remove()//找到节点，删除这个节点

[JavaScript] 纯文本查看 复制代码

//找到span节点，插入到div节点的前面
// $("span").insertBefore($("div")).css("backgroundColor", 'red');

//div前面是span
$("div").before($("span")).css("backgroundColor", 'blue');

//找到div节点，插入span节点的后面
// $("div").insertAfter($("span"));

//找到span节点，插入到div节点的子节点末尾
// $("span").appendTo($("div"));

//找到span节点，插入div节点的子节点的首位
// $("span").prependTo($("div"));

//找到节点，删除这个节点
// $("div").remove();

JQ事件
on 绑定事件
off 取消事件绑定
【注】在JQ所有的事件绑定的方法，底层都是通过事件监听器封装。
scrollTop() 获取当前页面的滚动高度

[JavaScript] 纯文本查看 复制代码

$(document).click(function(){
    alert($(window).scrollTop());
})

ev JQ兼容后的事件对象
获取鼠标坐标
ev.pageX ev.pageY 原点：整个文档的左上角，包含滚动高度的
ev.clientX ev.clientY 原点：可视窗口的左上角为原点
ev.screenX ev.screenY 原点：电脑屏幕的左上角

[JavaScript] 纯文本查看 复制代码

$(document).mousedown(function(ev){
    // alert(ev.clientX + ", " + ev.clientY);
    // alert(ev.pageX + ", " + ev.pageY);
    // alert(ev.which);
    alert(ev.screenX + "," + ev.screenY)
})

ev.which
1、如果是在鼠标事件下代表button
1 左键
2、滚轮
3、右键
2、如果keydown 代表是键码（不区分大小写）
3、如果keypress 代表字符码（区分大小写）
e.target JQ兼容后的触发对象

JQ兼容后的：
preventDefault 阻止默认行为
stopPropagation 阻止事件冒泡

[JavaScript] 纯文本查看 复制代码

$("a").click(function(ev){
    ev.preventDefault();
    ev.stopPropagation();
})

offset和position方法
offset //直接距离最左边和最上边的坐标
offset().left
offset().top
position //什么都算，计算距离第一个有定位的父节点的距离
position().left
position().top
offsetParent()//找第一个有定位的父节点，如果没有会往上层去找，直到找到html节点为止。

[JavaScript] 纯文本查看 复制代码

$(document).click(function(){
    // alert($("#div2").offset().left);
    // alert($("#div2").offset().top);
    alert($("#div2").position().left)
    // $("#div2").parent().css("backgroundColor", 'black');  //找到父节点
    // $("#div2").parents("div").css("backgroundColor", 'black'); //找到所有祖先节点
    $("#div2").offsetParent().css("backgroundColor", 'black');
})

JQ的特效函数

1、从左上角收起和展开的特效
• show() 显示
$("#div2").show();
• hide() 隐藏
第一个参数：毫秒数，动画持续的时候
第二个参数：回调函数，动画结束的时候执行的

[JavaScript] 纯文本查看 复制代码

$("#div2").hide(2000, function(){
     $("#div1").html("移入完成");
 })

2、透明度的淡入淡出效果
• fadeIn() fadeOut()
• fadeTo()
第一个参数：毫秒数，动画持续的时候
第二个参数：透明度的数值只能传入0~1的小数
第三个参数：回调函数，动画结束的时候执行的

[JavaScript] 纯文本查看 复制代码

 $("#div2").fadeOut(2000, function(){
     $("#div1").html("移入完成");
 })
 $("#div2").fadeTo(2000, 0.5, function(){
    $("#div1").html("移入完成");
})

3、卷闸效果
• slideDown() slideUp()

[JavaScript] 纯文本查看 复制代码

$("#div2").slideUp(2000, function(){
    $("#div1").html("移入完成");
})
$("#div2").slideUp(2000, function(){
    $("#div1").html("移入完成");
})

4、animate方法

animate 动画

第一个参数：变化的css样式和目的值

第二个参数：动画持续的时间

第三个参数：运动形态支持两种运动形态

匀速(linear) 慢块慢（默认）(swing)

第四个参数：回调函数。

【注】在JQ中实现链式运动，只需要在animate方法后面通过链式操作再跟animate方法就行了。

【注】每次调用animate的方法之前，将上一次动画stop(true)一下

delay(毫秒数) 延迟

[JavaScript] 纯文本查看 复制代码

$("#div1").hover(function(){
    $("#div2").animate({
        width: 300,
        height: "300px",
    }, 4000, function(){
        $("#div1").html("移入完成");
    })
}, function(){
    $("#div2").animate({
        width: 200,
        height: "200px",
        opacity: 1
    }, 4000, function(){
        $("#div1").html("移出完成");
    })
})

JQ和JS的关系：JQ和JS可以共存，但是不能混用。

get方法可以打破上面的界限。

get() 需要传参下标 get方法可以将我们原有的JQ对象，转成对应的JS对象.

remove和detach,clone

remove

功能：删除节点

返回值：就是被删除的这个节点,并不会保留之前的行为

var node = $("#div1").remove();

detach

功能：删除节点

返回值：就是被删除的这个节点，会保留之前的行为

var node = $("#div1").detach();

clone()

clone(true) 既会克隆节点，也会克隆这个节点之前的行为

功能：克隆节点

返回值：克隆出来的新节点

var node = $("#div1").clone();

text()和ready()方法

text() 获取标签的文本(纯文本) 类似JS中innerText

获取该标签，和该标签子节点中纯文本内容

alert($("#div1").text());

ready()，当整个标签加载完毕以后就执行了

$(document).ready()

window.onload 等这个窗口上内容的加载完毕以后，再去触发这个事件

节点操作

parents(css选择器)（获取当前节点所有的祖先节点）

parent()（获取当前节点的父节点）

closest() (必须传入参数，只获取从自己开始数，第一个符合条件的元素节点，包括他自己)

siblings() 当前节点所有兄弟节点，参数也可以传入css选择器样式。

nextAll() 当前节点开始往下所有的兄弟节点

prevAll() 当前节点开始往上所有的兄弟节点

parentsUntil()

nextUntil()

prevUntil()

[JavaScript] 纯文本查看 复制代码

 $("span.box").parent().css("backgroundColor","red")//获取当前节点的父节点
 $("span.box").parents("div").css("backgroundColor","red")//获取当前节点所有的祖先节点
 $("span").closest(".box").css("backgroundColor", 'red');
 $("span").closest("div").css("backgroundColor", 'red')
 $("#h2").siblings("h1").css("backgroundColor", 'blue')//当前节点所有兄弟节点，参数也可以传入css选择器样式。
 $("#h2").prevAll("h1").css("backgroundColor", 'blue')//当前节点开始往上所有的兄弟节点
 $("#h2").nextAll("strong").css("backgroundColor", 'blue')//当前节点开始往下所有的兄弟节点
 $("#h2").prevUntil("div").css("backgroundColor", 'orange');//a到c之间的元素,往上
 $("#h2").nextUntil("em").css("backgroundColor", 'orange');//a到c之间的元素,往下

warp包装
wrap() 独立包装
wrapAll() 整体包装，跟着符合条件的第一个节点
wrapInner() 内联包装
unwrap() 取消包装，如果有父节点，把父节点取消掉，除body以外

[Java] 纯文本查看 复制代码

$("span").wrap("<p title = 'hello' id = 'p1'></p>");
$("span").wrapAll("<p title = 'hello' id = 'p1'></p>");
$("span").wrapInner("<p title = 'hello' id = 'p1'></p>");
 $("span").unwrap();

[Java] 纯文本查看 复制代码

add和slice
 add() 组合css选择器
 slice(start, end) [start, end)

[JavaScript] 纯文本查看 复制代码

$("p").slice(2, 3).css("backgroundColor", 'orange');
$("p").add("span").add("button").click(function(){
    $(this).css("backgroundColor", 'red');
})

数据串联化方法
serialize() 拼接成querystring (name1=value1&name2=value2)
serializeArray() 拼接成外层是数组，里面的每一个数据是对象的形式

[JavaScript] 纯文本查看 复制代码

var str = $("input").serialize();
 alert(str);
var arr = $("input").serializeArray();
alert(arr);

事件细节
ev 就是兼容事件对象
ev.data 实现间接传入参数
ev.target(兼容后触发对象)
ev.type(输出事件类型)

[JavaScript] 纯文本查看 复制代码

$("div").click(function(ev){
    alert(ev.type);
})
var node = document.getElementById("btn1");
node.onclick = function(ev){
    alert(ev);
}
$("#btn1").on("click", {username: "大牛", age: 10}, function(ev){
    alert(ev.data.username);
    alert(ev.data.age);
})

trigger
主动触发触发官方支持的一些事件类型以外，还支持触发一些我们自定义的事件。

[JavaScript] 纯文本查看 复制代码

  //希望能够执行按钮上的函数
$("#btn1").click(function(){
    $("#btn1").trigger("click");
})

工具方法

JQ的方法

格式：$().xxx() $().yyy();

工具方法本质上，和我们自己JS封装函数没有任何区别。

格式：$.xxx() $.yyy()

【注】下面这些工具方法可以兼容到IE6的。

• type() 类似于JS typeof(复合数据类型统一返回的是object)

[JavaScript] 纯文本查看 复制代码

var arr = new Array();
alert($.type(arr));
alert(typeof arr);

trim() 删除字符串的首尾空格
声明成语法，ECMA5以后推出新的字符串的函数字符串.trim();

[JavaScript] 纯文本查看 复制代码

var str = "   he l lo  ";
alert("|" + str.trim() + "|");

inArray()

ECMA5以后，新增了一个数组的方法数组.indexOf();

• proxy() 功能类似于bind

• noConflict()

var num = $.noConflict();

• $.parseJSON() JSON.parse()

• makeArray() 将伪数组转成数组。 ECMA6新推 Array.from()

nodes = $.makeArray(nodes);

JQ提供了两个插件方法，通过这两个插件方法，我们可以在不修改JQ源代码的基础，给JQ新增方法

$.extend() 拓展JQ工具方法 $.xxx() $.yyy()

$.fn.extend() 拓展JQ的对象方法 $().xxx() $().yyy();

[JavaScript] 纯文本查看 复制代码

$.extend({
    show: function(){
        alert("工具方法");
    }
})
$.fn.extend({
    show: function(){
        alert("JQ方法");
    }
})
$(function(){
    $("#btn1").click(function(){
        $.show();
        $("#btn1").show();
    })
})

JQ的ajax方法

ajax的load方法

$(selector).load(url,data,callback)

功能：将url下面的数据下载到，直接下载到的数据，填充到前面被选中元素节点的innerHTML中。

还可以通过选择器的方式，然后进行对于填充部分的数据，进行选择。

dataType 先去声明我将要下载的数据是什么数据类型

默认：自动检测，自动解析，解析判定方式，看下载数据的后缀

dataType: 值

“json” 自动将json格式字符串转成对应的数据结构

“jsonp” 自动将ajax请求，jsonp跨域

“text” 返回的数据，必定文本类型的字符串

“xml” 自动解析，返回的xml数据

【注】JQ的ajax方法可以使用dataType，指定我们的数据是什么格式

[JavaScript] 纯文本查看 复制代码

$.ajax({
    url:"url",
    type:"get/post",
    dataType:"json/jsonp/text/xml/html/script",
    data:{},
    success:function(data, textStatus, jqXHR){},
    error:funciton(XMLHttpRequest, textStatus, errorThrown){};
    jsonpCallback:"fn"
});

帐号		自动登录	找回密码
密码			加入黑马

[技术面试] jquery教程

0 个回复