jQuery

jQuery是一个快速、简洁的JavaScript框架,一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write LessDo More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery  代码库(封装好了很多的方法)<===> Vue MVVM

MVC --> M-model(数据) ----> V-view视图--->C-control(控制器)--->M-model(数据)--->V-view 

jQuery1个对象,也是1个函数对象,有很多好用的属性和方法。JavaScript语言写出来的一个函数对象。

jQuery现在已经发布到第三个大版本,一般用第一个版本,因为兼容性最好。第三个版本是IE9以上才兼容。(功能没啥变化)

快速获取dom

语法:$(“选择器”),按照css选择器进行选择即可

返回值:jQuery文档对象,注意这个jQuery对象跟原生的dom对象不是一个东西,这里面有jQuery封装好的方法。

快速设置文档样式

语法:$(“选择器”).css(“样式的属性”“样式的值”)

一次性设置多个样式:

$(“选择器”).css({属性key:属性value,属性key:属性value......})

注意:如果属性key是由多个单词用-并联组成,那么必须用驼峰命名法,或者加引号来解决。

设置获取文档内容

语法:

$(“选择器”).html()   ---->获取文档的html内容

$(“选择器”).text()    ---->获取文档的text内容

$(“选择器”).val()     ---->获取输入框的value

$(“选择器”).html(“html内容”)  ---->设置文档的HTML内容

$(“选择器”).text(“文本内容”)    ---->设置文档的text内容

$(“选择器”).val(“value”)     ---->设置输入框的value

快速将内容插入文档

语法:

$(选择器).append("<h1>helloworld</h1>") ---->将参数里面的html追加到选择器对象的最后一个子元素上

$('.child').appendTo('.parent2')  ---->将选择器的对象插入到参数的对象上

$(".child").insertBefore("ul") ---->在什么前面插入内容

$('.child').insertAfter("ul")    ---->//在什么后面插入内容

快速的写JS的动画

语法:

$(".parentt").slideToggle(5000)  --->//滑动切换

$(".parentt").fadeToggle(5000) --->//淡入淡出切换

$(".parentt").fadeIn(5000,"linear",function(){console.log("动画完成")}) --->淡入进来

$(".parentt").fadeOut(5000) --->淡入出去

$('.parentt').animate({"900px"},5000,"linear",function(){console.log("动画已完成")})

推荐:添加类名的方式完成动画

$('.parentt').addClass("animate")

快速html事件

语法:

$(选择器).click(function(e){点击事件之后要执行的内容})

$(选择器).on(“事件的名称”function(e){事件要执行的内容})

//文档加载完毕即执行事件,仅文档加载完毕,不用等待图片加载,可以将js代码放置到前后都行。

$(document).ready(function(){})

缩写:$(function(){})

 

jQuery_Ajax

原生Ajax的步骤:

Xhr->xhr.open(get,url)->xhr.send->xhr.onrealystatechange

jQuery_Ajax:

语法:

$.get(url).then(function(res){获取内容执行的函数})

$.post(url).then(function(res){获取内容执行的函数})

不分方法:

$.ajax({

url:"服务器地址",

method:"请求方法",

data:{//传给服务器的参数

location:$("#city").val(),

key:'c8b18212397748599a7fb0bfa1022b56'

},success:function(res){//成功执行的函数

console.log("成功的执行:")

console.log(res)

},

fail:function(res){//失败执行的函数

console.log("失败的执行:")

console.log(res)

},

complete:function(res){//不管成功失败都会执行的函数

console.log("complete的执行:")

console.log(res)

}

})

})

原文地址:https://www.cnblogs.com/xfbb/p/11010860.html