北京 切换校区

全国24小时免费热线

400-009-1906

JQuery知识点总结

时间:2019-03-14   来源:尚学堂   阅读:94
首页> 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=>同步),第四个是用户名,最后一个是密码

相关资讯

  • 北京校区
  • 山西校区
  • 郑州校区
  • 武汉校区
  • 四川校区
  • 长沙校区
  • 深圳校区
  • 上海校区
  • 广州校区
  • 保定招生办

北京海淀区校区(总部):北京市海淀区西三旗街道建材城西路中腾建华商务大厦东侧二层尚学堂
北京京南校区:北京亦庄经济开发区科创十四街6号院1号楼 赛蒂国际工业园
咨询电话:400-009-1906 / 010-56233821
面授课程: JavaEE培训大数据就业班培训大数据云计算周末班培训零基础大数据连读班培训大数据云计算高手班培训人工智能周末班培训人工智能+Python全栈培训H5+PHP全栈工程师培训

山西学区地址:山西省晋中市榆次区大学城大学生活广场万科商业A1座702

郑州学区地址:河南电子商务产业园6号楼4层407
咨询电话:0371-55177956

武汉学区地址:湖北省武汉市江夏区江夏大道26号 宏信悦谷创业园4楼
咨询电话:027-87989193

四川学区地址:成都市高新区锦晖西一街99号布鲁明顿大厦2栋1003室
咨询电话:028-65176856 / 13880900114

网址:http://www.cssxt.com/
咨询电话:0731-83072091

深圳校区地址:深圳市宝安区航城街道航城大道航城创新创业园A4栋210(固戍地铁站C出口)
咨询电话:0755-23061965 / 18898413781

上海尚学堂松江校区地址:上海市松江区荣乐东路2369弄45号绿地伯顿大厦2层
咨询电话:021-67690939

广州校区地址:广州市天河区元岗横路31号慧通产业广场B区B1栋6楼尚学堂(地铁3号线或6号线到“天河客运站”D出口,右拐直走约800米)
咨询电话:020-2989 6995

保定招生办公室

地址:河北省保定市竞秀区朝阳南大街777号鸿悦国际1101室

电话:15132423123

Copyright 2006-2019 北京尚学堂科技有限公司  京ICP备13018289号-19  京公网安备11010802015183  
媒体联系:18610174079 闫老师  

Java基础班,免费试学三周