• jQuery初级篇


    一、jQuery自我理解

      是对js与css功能的封装,并且简化一些基本的功能,调用jQuery可以用更少的代码来实现想要的功能;

      核心功能:标签的定位-->标签的属性及内容的增删改查;

    二、寻找元素

      记住先要导入jQuery

      2.1基本查找  

      $("#i1")      通过 id查找

      $(".c1")   通过类名查找

      $("div")   通过标签名超找

      $(".class,p,div")  同时查找符合条件的

      $("*")     所有标签都列出来

      2.2层级

      $(".outer div")    

      $(".d1>a")      $(".d1 a")       二者功能一样 表示类下 所有标签

      $(".d1+div")          表示 紧跟.d1后面的而且是div 只有这样才能被超找,否则 null

      $(".d1~div")         类 d1 同辈中所有的div  不包括自己。  

      2.3基本筛选器

      $("li:fist")  第一个          

      $("li:eq(2)")  查找 所有li集合中序列为2的元素

      $("li:even")     查找 所有li集合中序列偶数的元素

      $("li:gt(1)")       查找 所有li集合中序列数值比1大的序列

      2.4表单选择器

      $("[type="text"]")  --->$(":text")

      $("input:checked")     input标签的专属

      2.4筛选器

      $(".w1").children()  w1l类下的所有的儿子   

      $(".w1").children(":first")   表示第一个儿子

      $(".w1").children(":last ")   最后一个儿子

      next()    下一个兄弟

      nextAll()  自己下面的所有兄弟  

      nextUntill("d5")    自己下面的所有兄弟一直到".d5"终止(不包括'.d5')

      prev()     同辈中上一个元素

      ...

      find()      查找符合要求的所有标签

      parent()  父级元素

      parents() 爸爸、爷爷、爷爷的爸爸...(祖先)

      siblings() 所用同辈不包括自己

    二、操作元素

      1.HTML代码/文本/值

      html() 获取对象下所有的文本及html,传人参数就是设置对像下的内容

      text()  不传参数就是获取 对象下的所有文本,传入参数就是清空原来的内容设置该参数为新内容。

      2.css

      addClass("c1") 添加上"c1" 类

      removeClass("c1")删除"c1"类

      3.属性

      attr("href")    获取属性为href的值

      attr("href","789")   值更改为789

      attr({name="hied",name2="css"}) 批量设置

      removeAttr(name)   删除一个属性

      prop("checked",true)  和attr()有同样的功能,对于要设置true或false的用prop 

    三、文档的处理

      :就是插入一个自己写的标签

      1.内部插入

      append()    尾部追加

      prepend() 头部追加

      2.外部插入

      after()       尾部追加

      before()    头部追加

      3.复制标签

      clone()  复制标签及内容

      

    四、事件

      特点:执行的标签不需要设置onclick=func() 

      方式一  $(".li").click(function(){

              $(this)........

                })

      方式二 $("ul"):delegate("li","click:function(){

                      ......

                      }")

      二者的区别:方式一 加载的时候就已经绑定好了,如果你再添加新li标签是不会有效果的

            方式二 用的时候才给你加载。

      扩展: $(document).ready(function(){}) -----------> $(function(){})

          这句的用法 把函数放在$()内  意味着 只有页面全部加载完之后才会执该函数。

    四、位置

      1.获取滚轮的位置值: index = $(window  ).scrollTop()

      2. $(document).height() == $(window).height()+index    文档高度 == 窗口高度+滚轮高度

      3.  offset().top  上边框距离文档顶部的高度

      4.  position().top   距离父级上边框的距离  

    五、扩展

      1.each循环

        $().each(function(){

           if($(this)){...}

           else{.....}

            })

      $(":checkbox").prop("checked",false)  这句表示全部为假它并不是循环着的。   

      2. each 第二种循环

       var li=[11,22,33,44,55,66]

        $.each(li,function(x,y){console.log(x,y)})

       注意  只有return false 时他才会终止。

  • 相关阅读:
    TypeScript系列
    常用软件工具
    How to change Eclipse loading image
    【奥斯卡理财星体系 第五章】丨手把手教你从零开始搭建资产配置
    【奥斯卡理财星体系 第四章】丨你该如何选择适合的理财工具
    【奥斯卡理财星体系 第三章】丨你适合追求什么样的收益率
    ASP.NET Core使用Elasticsearch记录API请求响应日志实战演练
    C# Quartz.NET实现动态改变作业调度周期
    openssl 生成pfx
    netcore进程内(InProcess)托管和进程外(out-of-Process)托管
  • 原文地址:https://www.cnblogs.com/learn-python-M/p/6978249.html
Copyright © 2020-2023  润新知