jQuery超详细入门教程

jquery其实总的来说东西不是很多
期间发现一点问题就是界面中使用本地存储之后，刷新后虽然数据不会丢失，但是刷新会整个页面重新渲染，有些只想在修改数据之前加载的内容也会被重新加载。
然后是我jquery总结的一些知识点

jQuery

$是jQuery的别称，jQuery顶级对象

jQuery是一个js函数库，包含以下功能

• html元素选取
• html元素操作
• css操作
• html事件函数
• js特效和动画
• html DOM遍历和修改
• AJAX
• Utilities

除此之外，jQuer还提供了大量的插件

jQuery对象和dom对象

通过原生js获取的就是dom对象，通过jquery方法获取的对象就是jquery对象

dom对象只能使用dom方法

jquery对象只能使用jquery方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PeVCdeG2-1653139406024)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220512213111546.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eJwlEKe6-1653139406026)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220512212650465.png)]

语法

基础语法$(selector).action()

• 美元符号定义jQuery
• 选择符查询和查找html元素
• jquery的action（）执行对元素的操作

在文档就绪之后运行jquery代码才可以对dom进行操作，因此他和js一样需要有一个文档就绪事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uyveavtV-1653139406027)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220510105229409.png)]

选择器

jquery所有的选择器都以美元符号开头

元素名选择

选择所有的p元素

$("p")

id选择器

选择id为text的元素

$("#text")

类名选择器

$(".text")

其它

$("*")//选取所有元素
$(this)//选取当前元素
$("p.intro")//选取类名为intro的p元素
$("p:first")//选取第一个p元素
$("ul li:first")//选取第一个ul中第一个li元素
$("ul li:first-child")//选取每个ul中第一个li元素
$("[href]")//选取带有href属性的元素
$("a[target='-blank']")//选取所有target为-blank的a元素
$("a[target!='-blank']")//选取所有target不为-blank的a元素
$(":button")//选取所有type=button的input元素和button元素
$("tr:even")//选取偶数位置的tr元素
$("tr:odd")//选取奇数位置的tr元素

可以将jQuery放入独立的js文件中使用

jQuery事件

常见dom事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-USVwRiUd-1653139406028)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220510111325548.png)]

事件方法语法

$("p").click(function(){
    //动作触发后执行的代码
})

常用事件方法

$(document).ready()

在文档完全加载完后执行函数

click（）点击事件

dblclicl()双击元素时触发事件

mouseenter()鼠标滑过元素时触发事件

mouseleave()鼠标离开元素时触发事件

mousedowen()鼠标移动到元素上方并按下鼠标按键时触发事件

mouseup()当在元素上松开鼠标按钮时，会发生mouseup事件

hover()鼠标悬停事件，移动到元素上时会触发第一个函数，移出这个元素时会触发第二个函数

$("p").hover(
function(){
//事件一
},
function(){
//事件二
})

focus()获得焦点

blur()失去焦点

jQuery效果

显示和隐藏

$("p").hide();//隐藏元素
$("p").show();//显示元素

语法

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

speed参数规定隐藏/显示的速度，可以取“slow”，“fast”或者毫秒

callback参数是隐藏或显示完成后所执行的函数名称

还可以选择过度使用哪种缓动函数,jQuery提供的可选有linear和swing。

其它的可以使用相关插件

$("div").hide(1000,"linear",function(){
    
})

toggle（)

可以使用toggle（）方法来切换hide（）和show（）方法

//点击按钮实现元素的显示和隐藏
$("button").click(function(){
    $("p").toggle();
})

语法同上

淡入淡出

Fading方法

jQuery拥有下面四种fade方法

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

fadeIn()方法

用于淡入已隐藏的元素

$(selector).fadeIn(speed,callback);

fadeOut()方法

用于淡出可见的元素

$(selector).fadeOut(speed,callback);

fadeToggle()方法

在淡入和淡出方法之间切换

$(selector).fadeToggle(speed,callback);

fadeTo()方法

允许渐变为给定的不透明度

$(selector).fadeTo(speed,opacity，callback);

speed为必须的参数

opacity为设置的给定的不透明度

滑动效果

滑动的方法有三种

• slideDown()
• slideUp()
• slideToggle()

slideDown()方法

用于向下滑动元素

$(selector).slideDown(speed,callback);

slideUp()方法

用于向上滑动元素

$(selector).slideUp(speed,callback);

slideToggle()方法

在向上和向下滑动之间切换

$(selector).slideToggle(speed,callback);

动画，自定义动画效果

annimate()方法

用于创建自定义动画

语法

$(selector).animate({params},speed,callback);

必需的params参数定义形成动画的css属性

speed参数规定隐藏/显示的速度，可以取“slow”，“fast”或者毫秒

例如点击按钮把div元素右移250像素

$("button").click(function(){
$("div").animate({left:'250px'});
})

默认情况下，所有html元素都有一个静态位置且无法移动。

如需对位置进行操作，要记得首先把元素的css position属性设置为relative，fixed或者absolute

animate（）操作多个属性

$("button").click(function(){
    $("div").animate({
        left:'250px',
        width:'300px'
    });
});

几乎可以用animate方法操作所有css属性，但是书写属性名时注意是paddingLeft而不是padding-left等

另外色彩动画并不包含在核心jQuery库中，需要下载颜色动画插件

animate使用相对值

相对值：该值相对于元素的当前值，需要在值前面加上+=或者-=

$("button").click(function(){
    $("div").animate({
        left:'250px',
        height:'+=150px',
        width:'-=150px'
    });
});

animate()使用预定义的值

可以把属性的动画值设置为show，hide或者toggle；

$("button").click(function(){
    $("div").animate({
        left:'250px',
        height:'toggle'
    });
});

animate()使用队列功能

默认的，jQuery提供针对动画的队列功能

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

停止动画

stop()方法

stop()方法用于停止动画或者效果，在它们完成之前。

它适用于所有jquery效果函数，包括滑动，淡入淡出和自定义动画

语法

$(selector).stop(stopAll,goToEnd);

stopAll参数规定是否清除动画队列，默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行

goToEnd参数规定是否立即完成当前动画，默认是false

callback（）方法

callback()方法在动画100%执行完成之后执行

链(Chaining)

通过jQuery可以把动作/方法链接在一起

Chaining允许在一条语句中运行多个jQuery方法（在相同的元素上）

方法链接

链接起来浏览器就不必多次查找相同的元素

如需链接一个动作，只需要简单的把该动作追加到之前的动作之上

例如把以下效果链接起来，元素首先会变红，然后向上滑动，然后再向下滑动

$("p").css("color","red").slideUp(2000).slideDown(2000);

获取内容和属性

dom操作

获得内容

三个简单实用的方法

• text()-设置或返回所选元素的文本内容
• html()-设置或返回所选元素的内容（包括html标记）
• val()-设置或返回表单字段输入的值

获取属性

attr()方法获取属性值

例如获取a中的href属性

$("a").attr("href");

设置内容

$("p").text("hello Word");
$("p").html("<b>hello</b>");
$("p").val("RUNOOB");

这三个方法都拥有回调函数，回调函数有两个参数：被选元素列表中当前元素的下标，以及原始值。函数新值返回希望使用的字符串

设置属性

 $("a").attr("href"："/xx/xx/x",
            "title":"我的");

这个方法拥有回调函数，回调函数有两个参数：被选元素列表中当前元素的下标，以及原始值。函数新值返回希望使用的字符串

添加元素

添加新内容的四个方法

• append()-在被选元素的结尾插入内容
• prepend()-在被选元素的开头插入内容
• after()-在被选元素之后插入内容
• before()-在被选元素之前插入内容

append()方法

在被选元素结尾插入内容（仍然在该元素内部）

$("p").append("追加文本");

prepend()方法

在被选元素开头插入内容（仍然在该元素内部）

$("p").prepend("在开头追加文本");

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zebkrCTs-1653139406030)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220510152505296.png)]

after()和before()方法

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hipgfJUJ-1653139406031)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220510152625169.png)]

删除元素

删除元素和内容，有两个jquery方法

• remove()-删除被选元素（及其子元素）
• empty()-从被选元素中删除子元素

过滤被删除的元素

remove()方法可接受一个参数，允许对被删元素进行过滤

例如：删除calss=“ilike”的所有p元素

$("p").remove(".ilike");

获取并设置css类

jQuery操作css的方法

• addClass()-向被选元素添加一个或多个类
• removeClass()-从被选元素删除一个或者多个类
• toggleClass()-对被选元素进行添加/删除类的切换操作
• css()-设置或者返回样式属性

addClass()方法

在添加类时，可以选取多个元素

$("h1,h2,p").addClass("blue");
$("div").addClass("important");

也可以在addClass()方法中规定多个类

$("body div:first").addClass("important blue");

removeClass()方法

删除特定的class属性

$("p,h1").removeClass("blue");

toggleClass()方法

对元素进行添加类，删除类的切换操作

$("p,h1").toggleClass("blue");

css()方法

设置或者返回被选元素的一个或多个样式属性

返回css属性

例如返回宽度

$("div").css("width");

设置css属性

语法

css（“prooertyname”，“value”）;

$("p").css("background-color","yellow");

设置多个css属性

$("p").css({"background-color":"yellow","font-size":"200%"});

尺寸

通过jquery很容易处理元素和浏览器窗口的尺寸

尺寸方法

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-krkRkOE3-1653139406033)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220510160357697.png)]

width()和height()方法

这两方法设置或返回元素的高度（不包括内边距，边框或外边距）

$("div").width();

innerWidth()和innerHeight()方法

这两方法设置或返回元素的高度（包括内边距）

$("div").innerWidth();

outerWidth()和outerHeight()方法

这两方法设置或返回元素的高度（包括内边距，边框）

$("div").outerWidth();

遍历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8PqoJXVQ-1653139406034)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220510161500863.png)]

遍历-祖先

祖先是父，祖父等等

向上遍历DOM树

这些方法用于向上遍历DOM树

• parent()
• parents()
• parentsUntil()

parent()方法

返回被选元素的直接父元素

该方法只会向上一级对DOM树进行遍历

下例返回每个span元素的直接父元素

$("span").parent();

parents()方法

返回被选元素的所有祖先元素

可以使用可选参数来过滤对祖先元素的搜索

$("span").parents();
$("span").parents("ul");

parentsUntil（）方法

返回介于两个给定元素之间的所有祖先元素

$("span").parentsUntil("div");

遍历-后代

向下遍历DOM树

有两个方法

• children()
• find()

children()方法

返回被选元素的所有直接子元素

$("div").children();

可以使用可选参数过滤对子元素的搜索

例如返回div下所有类名为1的p元素

$("div").children("p.1");

find()方法

返回被选元素的后代元素，一路向下直到最后一个后代

//返回div后代的所有span元素
$("div").find("span");
//返回div元素的所有后代
$("div").find("*");

遍历-同胞（siblings）

在DOM树中水平遍历

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

sibling()方法

返回被选元素的所有同胞元素

$("h2").sibling();
//可以使用可选参数来过滤对同胞元素的搜索
$("h2").sibling("p");

next()方法

返回被选元素的下一个同胞元素，该方法只返回一个元素

nextAll()方法

返回被选元素的所有跟随的（下面的）同胞元素

nextUntil()方法

返回介于两个给定参数之间的所有的同胞元素

$("h2").nextUntil("h6");

prev(),prevAll(),prevUntil()方法

这些方法与上面的方法相似，只不过是方向相反，它们返回的是前面的同胞元素

遍历-过滤

缩小搜索元素的范围，三个最基本的方法是

• first()
• last()
• eq()

它们允许基于其在一组元素中的位置来选择一个特定的元素

其他过滤方法，比如filter()和not()允许选取匹配或者不匹配某项指定标准的元素

first()方法

返回被选元素的首个元素

下例选取首个div下的第一个p元素

$("div p").first();

last()方法

返回被选元素的最后一个元素

下例选取最后一个div下的最后一个p元素

$("div p").last();

eq()方法

返回被选元素中带有指定索引号的元素

索引号从0开始

下例选取第二个p元素

$("p").eq(1);

filter()方法

该方法允许规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

下例返回所有类名为calss的p元素

$("p").filter(".calss")

not()方法

返回不匹配标准的所有元素

该方法与filter方法相反

下例返回不带有类名为calss的p元素

$("p").not(".calss")

遍历方法

each（）方法

$(selector).each(function(index,element))

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XgGdUiiu-1653139406036)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220516211102803.png)]

H5web存储

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

localStorage 和 sessionStorage

• localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

localStorage 对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQEUoW4H-1653139406038)(C:\Users\trace\AppData\Roaming\Typora\typora-user-images\image-20220516160519787.png)]

本地储存只能存储字符串的数据格式，所以如果值是数组对象需要把数组对象转为字符串格式

使用JOSN.stringify();方法

获取本地储存数据时，使用json方法将字符串转换为json对象才能使用里面的数据

使用JSON.parse(）