• 财政部就“财税改革和财政工作”答问 2019-06-21
  • 后伊布时代 北欧海盗能否再扮演“豪门杀手” 2019-06-10
  • 中国宗教研究学者:儒道佛三教关系为世界宗教发展提供新启迪 2019-06-10
  • “六一”特刊丨尤叔叔的安(xìng)全(fú)小课堂 2019-06-05
  • 微信“信用卡还款”3.0版本上线 支持招商银行账单查询 2019-05-30
  • 上海发布来沪人员就业报告 2019-05-30
  • 新华时评:美逆潮流而动,必将付出代价 2019-05-24
  • 杭州约谈58同城等3家网上房源发布平台负责人 2019-05-24
  • 《典出山西》考试季特辑:“武状元”那些事 2019-05-22
  • 首趟中欧班列整车进口专列抵达西安 2019-05-22
  • 航旅纵横疑似泄露隐私,企业应管好用户信息 2019-05-18
  • 美国防部宣布暂停8月美韩联合军演 2019-05-17
  • 党媒《红网湘乡手机报》是如何做到接地气、聚人气的? 2019-05-17
  • 刘嘉玲:长江后浪一直涌来 2019-05-16
  • 营养-热门标签-华商生活 2019-05-16
  • 冰球死球是什么意思:

    北京 切换校区

    全国24小时免费热线

    400-009-1906

    JQuery知识点总结

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

    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+数据分析+机器学习??人工智能+模式识别+强化学习???WEB前端+移动端+服务端渲染

     

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

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

    武汉学区地址:武汉市东湖高新区光谷金融港B22栋11楼
    咨询电话: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-06-21
  • 后伊布时代 北欧海盗能否再扮演“豪门杀手” 2019-06-10
  • 中国宗教研究学者:儒道佛三教关系为世界宗教发展提供新启迪 2019-06-10
  • “六一”特刊丨尤叔叔的安(xìng)全(fú)小课堂 2019-06-05
  • 微信“信用卡还款”3.0版本上线 支持招商银行账单查询 2019-05-30
  • 上海发布来沪人员就业报告 2019-05-30
  • 新华时评:美逆潮流而动,必将付出代价 2019-05-24
  • 杭州约谈58同城等3家网上房源发布平台负责人 2019-05-24
  • 《典出山西》考试季特辑:“武状元”那些事 2019-05-22
  • 首趟中欧班列整车进口专列抵达西安 2019-05-22
  • 航旅纵横疑似泄露隐私,企业应管好用户信息 2019-05-18
  • 美国防部宣布暂停8月美韩联合军演 2019-05-17
  • 党媒《红网湘乡手机报》是如何做到接地气、聚人气的? 2019-05-17
  • 刘嘉玲:长江后浪一直涌来 2019-05-16
  • 营养-热门标签-华商生活 2019-05-16
  • 怎样买平特肖稳定一点 新浪足彩网 穿越火线手游 尼克斯vs篮网比分 财富之都官网 幸运28计划网 7星彩开奖历史结果 安徽十一选五开奖一定牛 pk10计划演算工具 魔兽争霸版本转换器 探灵笔记游戏介绍 通比牛牛赚钱软件 奥格斯堡vs汉诺威96前瞻 使命召唤ol设置 斯特拉斯堡穷游 免费重庆时时彩计划器