• 为山西公安“一网通一次办”点赞 2019-04-22
  • 奥委会将办特殊乒乓赛:钦点马龙丁宁 福原爱复出 2019-04-21
  • 真的很美!越冬候鸟迎来迁徙高峰 2019-04-21
  • ——客观唯物主义哲学思想的“幸福”的定义:“幸福”就是在“客观规律和定律”的制约中满足了人的直接感觉的好的结果。这样,也就存在着客观唯物主义哲学思想的不幸福感。 2019-04-19
  • 推进科技兴军 建设世界一流军队的伟大实践 2019-04-12
  • 罗伯特·劳伦斯·库恩 2019-04-12
  • 广东摧毁全国首例“呼死你”犯罪团伙 2019-04-11
  • 上合再出发 开启新征程 2019-04-09
  • 传Switch即将支持媒体应用 看电影听音乐不是梦传Switch即将支持媒体应用-行情资讯 2019-04-08
  • 北京地铁早高峰大数据:7时30分至8时30分客流最大 2019-04-08
  • 日本大阪北部地区6.1级地震 2019-04-03
  • 走奋发图强之路,壮我中华科技实力。 2019-03-30
  • 端午小长假旅游去这些地方逛逛吧 2019-03-30
  • 《中国教育报》电子版 2019-03-24
  • 精神分裂患者全病程规范管理,有望重返真实世界 2019-03-24
  • 冰球赛事: 冰球打架中国对韩国

    北京 切换校区

    全国24小时免费热线

    400-009-1906

    JQuery知识点总结

    时间:2019-03-14   来源:尚学堂   阅读:13

    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

    网址://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基础班,免费试学三周

  • 为山西公安“一网通一次办”点赞 2019-04-22
  • 奥委会将办特殊乒乓赛:钦点马龙丁宁 福原爱复出 2019-04-21
  • 真的很美!越冬候鸟迎来迁徙高峰 2019-04-21
  • ——客观唯物主义哲学思想的“幸福”的定义:“幸福”就是在“客观规律和定律”的制约中满足了人的直接感觉的好的结果。这样,也就存在着客观唯物主义哲学思想的不幸福感。 2019-04-19
  • 推进科技兴军 建设世界一流军队的伟大实践 2019-04-12
  • 罗伯特·劳伦斯·库恩 2019-04-12
  • 广东摧毁全国首例“呼死你”犯罪团伙 2019-04-11
  • 上合再出发 开启新征程 2019-04-09
  • 传Switch即将支持媒体应用 看电影听音乐不是梦传Switch即将支持媒体应用-行情资讯 2019-04-08
  • 北京地铁早高峰大数据:7时30分至8时30分客流最大 2019-04-08
  • 日本大阪北部地区6.1级地震 2019-04-03
  • 走奋发图强之路,壮我中华科技实力。 2019-03-30
  • 端午小长假旅游去这些地方逛逛吧 2019-03-30
  • 《中国教育报》电子版 2019-03-24
  • 精神分裂患者全病程规范管理,有望重返真实世界 2019-03-24
  • 互联网+足球 3d过滤缩水工具彩宝网 彩经网新时时彩杀号 888博彩 3d315期试机号 新濠娱乐城 pk10牛牛公式解析 p62开奖结果 七星彩票论坛 北京pk10计划手机软件 时时彩开奖结果 新疆时时彩11选5玩法 北京赛车彩票规则介绍 北京pk10计划软件 足彩17064期冷门分析 玩重庆幸运农场害人