jQuery是一个快速、简洁的JavaScript框架,一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery 代码库(封装好了很多的方法)<===> Vue (MVVM)
MVC --> M-model(数据) ----> V-view视图--->C-control(控制器)--->M-model(数据)--->V-view
jQuery是1个对象,也是1个函数对象,有很多好用的属性和方法。JavaScript语言写出来的一个函数对象。
jQuery现在已经发布到第三个大版本,一般用第一个版本,因为兼容性最好。第三个版本是IE9以上才兼容。(功能没啥变化)
jQuery原理:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1></h1> <script type="text/javascript"> //jQurey 原理 (function(window){ //selector 选择器 var lc =function(selector){ var dom =document.querySelector(selector) var result = { dom : dom } //原型对象 var yxObj = { //如果有参数就设置innerHtml的内容,没有就返回innerHtml的内容 html: function(content){ if(content){ this.dom.innerHTML = content return this }else{ return this.dom.innerHTML } }, css:function(key,value){ this.dom.style[key] = value; } } //设置result的原型对象是yxObj result.__proto__ = yxObj return result } window.lc=lc })(window) //lc("h1").html("<span>老陈库</span>") //lc(‘h1‘).css(‘background‘,"purple") //链式原理:返回的值为当前的对象,返回this lc(‘h1‘).html("<span>老陈jq库</span>").css(‘background‘,"pink") </script> </body> </html>
语法:$(“选择器”),按照css选择器进行选择即可
返回值:jQuery文档对象,注意这个jQuery对象跟原生的dom对象不是一个东西,这里面有jQuery封装好的方法。
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>helloworld</h1> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //同一个对象 console.log($) console.log(jQuery) //简单用法 $("h1").css({ background:"skyblue", fontSize:"50px", color:"#fff" }).html("zhongwu").css({ border:"10px solid #000" }) //1.快速获取document //var h2 = document.querySelector("h1") var h1 = $("h1") //h2.style.background = "skyblue" //h1[0].style.fontSize = "50px" //css方法快速更改样式 h1.css("font-size","100px") h1.css({ border:"1px solid #000", "box-shadow":"0px 5px 10px #ccc" }) //2.快速设置文档样式 //3.快速设置文档内容 //4.快速将内容插入文档 //5.快速的写JS的动画 //6.快速html事件 //7.快速的写ajax </script> </body> </html>
语法:$(“选择器”).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") ---->//在什么后面插入内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="parent" class="parent"> </div> <div class="parent2"> <h1>woaini</h1> </div> <input type="text" name="user" id="user" value="" /> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //2.快速设置文档样式文档内容 $("#parent").html("<h1>woaini</h1>") console.log($("#parent").html()) //3.快速更改文档内容 $("#parent").text("helloworld") console.log($("#parent").text()) //4.快速将内容插入文档 $("#user").val("admin") console.log($("#user").val()) $("ul li").css("background",‘skyblue‘).html(‘都是列表!!!!‘) //往选择器里面插入数据 $(".parent").append("<h1>helloworld</h1>") //将选择器的对象插入到参数的对象上。 $(".parent").appendTo(".parent2") //在什么前面插入内容 $(".child").insertBefore("ul") //在什么后面插入内容 $(‘.child‘).insertAfter("ul") //5.快速的写JS的动画 //6.快速html事件 //7.快速的写ajax </script> </body> </html>
语法:
$(".parentt").slideToggle(5000) --->//滑动切换
$(".parentt").fadeToggle(5000) --->//淡入淡出切换
$(".parentt").fadeIn(5000,"linear",function(){console.log("动画完成")}) --->淡入进来
$(".parentt").fadeOut(5000) --->淡入出去
$(‘.parentt‘).animate({width:"900px"},5000,"linear",function(){console.log("动画已完成")})
推荐:添加类名的方式完成动画
$(‘.parentt‘).addClass("animate")
语法:
$(选择器).click(function(e){点击事件之后要执行的内容})
$(选择器).on(“事件的名称”,function(e){事件要执行的内容})
//文档加载完毕即执行事件,仅文档加载完毕,不用等待图片加载,可以将js代码放置到前后都行。
$(document).ready(function(){})
缩写:$(function(){})
快速的写ajax
原文:https://www.cnblogs.com/406070989senlin/p/10988161.html