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 时他才会终止。

 

posted @ 2017-06-10 11:39  鸽子灬  阅读(162)  评论(0编辑  收藏  举报