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要解决的问题
-
页面无刷新操作数据
-
按需获取数据的问题
-
让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=>同步），第四个是用户名，最后一个是密码