jquery使用整理

最新推荐文章于 2023-06-13 11:45:21 发布

isxixi

最新推荐文章于 2023-06-13 11:45:21 发布

阅读量290

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/isxixi/article/details/78752397

jquery 专栏收录该内容

0 篇文章

订阅专栏

为什么使用jquery

这里写图片描述

jQuery3是jQuery的未来，如果你需要兼容IE6-8，你可以继续使用1.12版本。jQuery3不在兼容ie8以下的。

js的入口函数。
windos.reload=function(){
    //此处写js
};
jquery的入口函数
$(function(){
    //此处写js
})
$(document).ready(function(){});
//jquery的入口函数无论有几个都会覆盖之前写的。

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
3. $=== jQuery,也就是说能用$ 的地方，完全可以用jQuery，$仅仅是简写形式。

jquery对象转DOM对象

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

Dom对象转Jquery对象

var box=documen.getElementById("box");
var $box=$(box);//dom对象装换成jquery对象。

jquery选择器
1.基本选择器

$(“#id”); id选择器
$(“.class”);类选择器
$(“div,p,li”);并集选择器
$(“div.redClass”);交集选择器

2.层级选择器

$(“ul>li”);子代选择器
$(“ul li”);后代选择器

3.过滤选择器

:eq（index）选择索引是index的juqery对象
:odd 选择是奇数的jquery对象
:even 选择是偶数的jquery对象

4.筛选选择器(方法)

children(selector) // $(“ul”).children(“li”)，相当于$ (” ul>li”)
find(selector) // $(“ul”).find(“li”); ,相当于$ (“ul li”)后代选择器
siblings(selector) //$(“#first”).siblings(“li”);找兄弟，不包括自己
parent()//$(“#first”).parent(); 找父亲
eq(index) // $(“li”).eq(2);相当于$ (“li:eq(2)”)
jquery操作样式

//单个设置
$("#one").css("background","gray");//将背景色修改为灰色
//多个设置
$("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
});
//获取样式
$("div").css("background-color");//注意：获取样式操作只会返回第一个元素对应的样式值。

jquery操作类名

addClass(“one”);
removeClass(“one”)//不带参数，移除所有的样式类
hasClass(“one”)//是否有这个样式，true、false
toggleClass(“one”)//如果有，移除该样式，如果没有，添加该样式。

jquery动画
1.show([speed], [callback]);hide([speed], [callback])

//speed(可选)：动画的执行时间
1.如果不传，就没有动画效果。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
//callback(可选):执行完动画后执行的回调函数

2.滑入与滑出slideUp,slideDown

slideUp(speed, callback);
//speed(可选)：动画的执行时间
1.如果不传，默认为normal，注意区分show/hide。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)
//callback(可选):执行完动画后执行的回调函数

3.滑入滑出切换

$(selector).slideToggle(speed,callback);
//如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

5.stop
stop(stopAll,goToEnd)

$("animation").shop();两个值默认都是false.
stopAll：为false时，只停止当前动画，不停止所有动画，反之为true：停止所有动画。
goToEnd（是否结束当前懂啊胡）:默认fasle，fasle:不结束，true:结束。

fadeIn和fadeOut

fadeIn(speed,callback);
fadeOut(speed,callback);
fadeToggle();淡入淡出切换。
fadeTo(speed, value, callback)

//可以设置具体的透明度
//speed（必须）
//value  0-1之间的数值(比如0.4)，表示淡到某一个值。
//callback(可选) 回调函数

jquery自定义动画animate

$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）nomal,slow,fast或具体的数
//easing:可选linear(匀速)，swing(变速，开始和结束慢，中间快)
// callback：可选动画执行完后立即执行的回调函数（可选）

此处动画支持的属性

easing参数
控制动画在不同元素的速度，默认为“swing”
“swing”：在开头和结尾移动慢，在中间移动速度快
“linear”：匀速移动

jquery操作DOM(节点)
1.创建元素

var $span = $(“<span>这是一个span元素</span>”);

2.添加元素

//方法一：将jQuery对象添加到调用者内部的最后面。 
var $span = $(“<span>这是一个span元素</span>”);
$(“div”).append($span);
//方法二：参数传字符串，会自动创建成jquery对象
$(“div”).append(“<span>这是一个span元素</span>”);

添加已经存在的元素

var $p = $(“p”);
$(“div”).append($p);
//注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。之前的p标签和内容一起挪到div里面去了

类似的用法：append prepend after before

3.清空元素

$("#box").html("");
$("#box").empty("");

4.删除元素

$("#box").remove();标签没有了

5.克隆元素

var newbox=$("#box").clone(true);//可选。布尔值。规定是否复制元素的所有事件处理。
默认地，副本中不包含事件处理器。
和cloneNodede 区别。
cloneNode() 方法克隆所有属性以及它们的值。
如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

jQuery操作属性
1.attr(name, value);

$(“img”).attr(“title”,”哎哟，不错哦”);//设置
$(“img”).attr(“title”);//获取
$("img").attr({
    title:"哎哟，不错哦",
    alt:"哎哟，不错哦",
    style:"opacity:.5"
});//设置多个属性

prop();
对于checked、selected、disable这类boolean类型的属性来说，如果使用attr方法获取属性值，得到的不是true和false，而是checked以及undefined。使用prop方法来获取或者设置checked、selected、disable这类的值。prop方法使用跟attr方法一样。

//设置属性
$(“:checked”).prop(“checked”,true);
//获取属性
$(“:checked”).prop(“checked”);//返回true或者false

* jQuery操作值与内容*
1.val();val方法用于设置和获取表单元素的值，例如input、select、textarea的值

$(“#name”).val(“张三”);
//获取值
$(“#name”).val();

2.html()

//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()

text方法

//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()

html方法与text方法的区别：
html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。
jQuery操作尺寸
1.height()

//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();
//返回值是number类型（比如200），而使用$(“img”).css(“width”)返回的是字符串（比如200px）

2.widht()同height()一样

jquery操作坐标值

1.offset 设置或者获取元素相对于文档document的位置。

//设置位置
$(selector).offset({left:100, top: 150});
//获取位置
$(selector).offset();
//注意：使用offset操作，如果元素没有设置定位(默认position:static)，则会把position修改为relative.会修改left、top

JS下offsetLeft，style.left，以及jQuery中的offset().left，css(“left”)的区别。

JS下的offsetLeft和style.left，以及jquery的css("left")，对定位的理解相似，如果父元素中有定位元素，都是相对于上一个定位元素（position不为static）定位。

值得一提的是如果没有已经定位的父元素，那么offsetLeft指向的是文档（document）的左边缘，而style.left与css（"left"）指向的是body的左边缘，如果body默认存在margin的话，他们取得的值是不一样的。

     此外老生常谈，css("left")和style.left是带单位"px"的，而offsetLeft没有单位，另外，style.left必须是内联样式，或者在JS中通过style.left赋值，否则取得的将为空字符串（在内部样式和外部样式中指定left是无效的）。而jquery的css("left")没有这一限制，显然使用jquery操作dom的优势就体现出来了。

     最后是jquery的offset().left，它永远是相对于文档的左边缘（往往体现为浏览器的左边缘）定位的，这样的话使用jquery就可以在不同的应用场景采用不同的方法来获取元素的位置，相比较原生JS有巨大的优势。

2.position()

获取相对于其最近的有定位的父元素的位置。
// 获取，返回值为对象：{left:num, top:num}
$(selector).position();
注意：position方法只能获取，不能设置

这里写图片描述

此时的position()和offsetLeft和offsetTop的取值是一样的。

scrollTop和scrollLeft
设置或者获取垂直滚动条的位置

// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);
// 无参数表示获取偏移
$(selector).scrollTop();

// 有参数表示设置偏移，参数为数值类型
$(selector).scrollLeft(100);
// 无参数表示获取偏移
$(selector).scrollLeft();

jQuery事件的发展历程
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
1.简单事件绑定

click(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
scroll(handler) 滚动事件
缺点：一次只能绑定一个事件
1. bind事件绑定(不推荐使用)

//绑定多个事件
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});
缺点：不支持动态创建出来的元素绑定事件。

delegate事件绑定,支持动态绑定事件

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});
//理解：为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。

4.on事件绑定(推荐)

$(selector).on(events[,selector][,data],handler);
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数


例子
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。
$(selector).on( "click", function() {});

事件解绑
1.unbind()

$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件

2.undelegete()

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

2.off方式（重点）

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑 
$(selector).off( “click”, “**” );

事件触发

简单事件触发
$(selector).click(); //触发 click事件
trigger方法触发事件
$(selector).trigger(“click”);
triggerHandler触发 事件响应方法，不触发浏览器行为
比如:文本框获得焦点的默认行为
$(selector).triggerHandler(“focus”);

jQuery事件对象（）

event.type 事件类型
event.data 存储绑定事件时传递的附加数据
event.target 点了谁就是谁
event.currentTarget 当前DOM元素，等同于this
event.delegateTarget 代理对象
screenX和screenY 对应屏幕最左上角的值
offsetX和offsetY 点击的位置距离元素的左上角的位置
pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.witch 鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键
event.keyCode 按下的键盘代码
event.stopPropagation() 阻止事件冒泡行为
event.preventDefault() 阻止浏览器默认行为
return false;
jQuery补充
1.链式编程
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
2.隐式迭代
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
设置性操作的时候：设置的是所有的元素
获取性操作：获取的是第一个元素。
3.each()方法
有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element,callback){});

4.多库共存
我们知道jQuery占用了 $这个标识符，如果引用的其他库也用到$ 这个标识符，这时候为了保证每个库都能正常使用，这时候就存在了多库共存的问题。
后引入的 $的会覆盖掉先引入的库中的$ 。
$=== jQuery 解决办法： jQuery的$ 和jQuery是两个相同的变量，因此遇到多库共存的时候，可以让jquery交出 $符的控制权，这个时候还是可以使用$ .

console.log($);//function(selector, context){}
//$.noConflict();//释放$的控制权
console.log($);{name:”zhangsan”,age:12}

jQuery(function () {
    jQuery("div").html("我不是div的内容");
});

5.制作jquery插件