jQuery知识点全面解析

jQuery概述

js与jQuery

获取的对象

jQuery获取的是jquery对象,js获取的是js对象(dom对象),dom对象不能调用jquery的方法,jquery对象也不能调用dom对象的方法

dom对象转换为jQuery对象:$(dom对象)

层级选择器

子代选择器 $("ul>li") 使用>号,获取儿子层级的元素,注意:并不会获取孙子层的元素后代选择器 $("ul li") 使用空格,代表后代选择器,获取ul下的所有的li元素,包括孙子辈

jQuery解决的问题

将原生的单个化操作，批量操作

将原生的复杂的查询方式，简单化

将原生逐步操作的方式，链式操作

将原生操作复杂的逻辑，提供简单的接口

队列控制：

为了解决原生的js的不足,队列也可以解决回调地狱

控制异步代码的执行顺序

把要执行的每一步放在数组[1,2,3,4,5],一步一步执行

入队..出队

三种队列

• animate(最高级别)

$("div").animate({width:400},1000)

• fx

queue dequeue

• 自定义队列
• finish 直接结束,来到最后一个状态
• stop 结束当前队列的状态,进行下一个状态

插件机制：

插件:能够让功能进行扩展的一个术语,让一个对象的功能进行扩展

• jQuery.fn.extend(object)

多库共存：

项目的开发方式

本质：

JavaScript框架

宗旨：

write Less do More

作用：

优化js操作、dom操作、页面交互、事件、ajax、动效

特性：

隐式循环，链式调用

jQuery核心函数：

jQuery ( )=$ ( )

• undefinde
• 返回空的jquery对象
• 选择器,返回jQuery对象

jQuery(".box")

• 函数，给document 添加 ready事件
• 这个函数在 页面加载完成后执行

jQuery(function(){ })​jQuery("document").reaady(function(){​})​jQuery().ready(function(){ }) //作用一样

• 传入dom对象，返回jQuery对象

jQuery(function(){ let box=document.querySelector(".box"); jQuery(box);})

• 传入字符串 ,创建新节点 "<div></div>"

$(function(){ $("<div><span>this is span</span></div>").appendTo($(".box"))})

jQuery对象常用方法：

• 选择器
• .css ("样式属性","样式值") .css ( { } )
• 
  

$(function(){ $(".box").css({ backgroundColor:"blue", borderRadius:50% })})

• ​
• 筛选器 :first :not(selector) :even
• :header=>匹配如 h1, h2, h3之类的标题元素
• :eq(index)=>匹配一个给定索引值的元素
• :gt(index)=>匹配所有大于给定索引值的元素
• :animated=>选择正在运动的元素

$(function(){ $(".box:first").css("background-color","red")})

• ​
• 筛选的方法：
• .eq (index) 返回对应下标的jQuery对象
• .get (index) 返回对应下标的原生对象
• .first( )
• .last( )
• .hasClass("类名") 判断jQuery数组中是否有一个类名为***对象 返回true、false

$(function(){ $(".son").hasClass("son2")})

• .filter([选择器]，[元素]，[，function]) 筛选出符合条件的对象

$(function(){ $(".son").filter("son2")})​$(function(){ $(".son").filter(function(item){ $(this).attr("class")=="box2" })})

• .is("选择器") 判断是否为某个标签
• .map (fn) 遍历对象 生成一个新的数组
• .has ("选择器") 返回一个选中的jQuery对象

$(function(){ $(".box").has("span").css("background","red")})

• .not ("选择器") 从jQuery数组中删除选中的元素

$(function(){ $(".box").not(".box2")})

• .slice (start,[end]) 截取指定位置的jQuery的对象 传入的是下标

$(function(){ $(".box").slice(5)；})

• .each (fn) 遍历jQuery数组，index在前、item在后

$(function(){ $(".box").each(function(index,item){ console.log(item) })；})

• .index ( ) 返回jQuery对象在数组中的下标
• 操作属性的方法：
• attr ( )
• removeAttr ( )
• prop ( )
• removeProp ( )
• 操作类名的方法
• addClass ( )
• removeClass ( )
• toggleClass ( )

$(function(){ $(".box").addClass("box2")})

• 操作内容的方法：
• .text ( )
• .html ( ) 可以识别<>
• .val ( )
• jQuery对象元素的位置信息
• .offset ( ) 返回一个位置信息的对象 相对于浏览器的位置

 {top:**,left:**}

• .position ( ) 返回一个位置信息的对象 相对于定位的祖先元素的位置

 {top:**,left:**}

• .scrollTop ( )
• .scrollLeft ( )
• 常用方法
• .toArray ( ) 将jQuery对象转换为原生对象
• 事件对象：
• e.offsetX
• e.offsetY
• e.pageX
• e.pageY
• e.Target
• e.currentTarget ==this
• e.stopPropagation 阻止事件流
• e.preventDefault 阻止默认事件
• 事件

$("div").click(function () { $("div").css("color","red") })

one（）

on（）

trigger（） 自动触发事件

triggerHandler 自动触发事件，并且清除浏览器默认行为

hover(fn,fn)

ajax:

ajax要解决的问题

1. 页面无刷新操作数据
2. 按需获取数据的问题
3. 让b/s架构的软件，能像c/s架构的软件操作流畅

ajax（async javascript and xml）

​ 利用javascript异步操作数据

new XMLHttpRequest()

function ajax(params){ if (typeof params!=='object'){ console.error('参数类型不对'); return } if (!params.url){ console.error('请输入url')； return } //参数初始化 var url=url var type=params.type||"get" var datatype=params.dataType||"text" //处理数据 var data=params.data||"" if (typeof data=='object'){ var str="" for(var i in data){ str+=i+"="+data[i]+"&" } data=str.slice(0,-1) } //判断获取方式 var ajax=new XMLHttpRequest() ajax.onload=function(){  } if (type=='get'){ ajax.open("get","/ajax?name=zhang") ajax.send() } else if (type=="post"){ ajax.open("post","/ajax") ajax.setRequestHeader("content-type","application/x-www-form-urlencoded") ajax.send("name=zhangsan") }}ajax({ url:'/', 必须有 type:'get', 可有可无 dataType:'text', 可有可无 data:{name:"zhangsan"}, 可有可无 success:function(data){ 可有可无 upDate(data) },})

#天气页面获取数据$(".btn").click(function(){ $.ajax({ url:"https://www.toutiao.com/stream/widget/local_weather/data/?city=太原", dataType:"json", success:function(data){ upDate(data) }, error:function(){ console.log("no") } }) }).trigger("click")​ function upDate(data){ $(".box").text(data.data.weather.aqi) console.dir(data.data.weather) $(".box2").text(data.data.weather.city_name) $(".box3").text(data.data.weather.dat_condition) }

xml

html、svg是xml衍生出来的

html也叫模板，数据也叫模型

svg=>矢量图

ajax获取数据

建立:1.xml

<?xml version="1.0" encoding="UTF-8"?><root> <stu> <name>zhangsan</name> <age>20</age> <sex>man</sex> </stu></root> //xml没有标签，可以自己定义

建立:2.html

//表格<script> window.onload=function(){ var ajax=new XMLHttpRequest() var tbody=document.querySelector("tbody") ajax.onload=function(){ console.log(ajax.response) con=ajax.responseXML stu=con.getElementsByTagName("stu") var str='' for (i=0;i<stu.length;i++){ var name=con.getElementsByTagName("name")[i].innerHTML var age=con.getElementsByTagName("age")[i].innerHTML var se $("ul>li") x=con.getElementsByTagName("sex")[i].innerHTML str=str+'<tr><td>'+name+'</td><td>'+age+'</td><td>'+sex+'</td></tr>' } tbody.innerHTML=str } ajax.open("get","aa.xml") ajax.send() }<script> ajax.response 返回文本,默认为文本格式ajax.responseXML 返回文档，document格式ajax.responseType 指定返回格式 可以加："Text" "bold" "document" "json"

ajax传递数据

uri 统一资源标示符（Uniform Resource Identifier）

url 统一资源标示符（Uniform Resource Locator）

url（一个资源在互联网中的唯一标示）是uri的一种

/add?id={{item.id}} ？后面是数据获取 false 同步 true 异步（默认为异步）

• get方式

ajax.open("get","/ajax?name=zhang")ajax.send()

• post方式
• ajax.open('post','/',true,user,passwd)
• 第一个参数指定获取格式，第二个制定路径（从哪获取），第三个制定同步或异步（true=>异步、默认为异步false=>同步），第四个是用户名，最后一个是密码