jQuery的学习笔记

简介---语法---获取元素--事件---DOM操作(获增删)


1,什么是jQuery
      是JavaScript的函数库。(优点:方便,解决了浏览器的兼容问题)
2,功能:
  • HTML元素的选取
  • HTM元素的操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效和动画
  • HTML DOM 遍历和修改
  • AJAX (不刷新页面的同时来修改页面的内容)
  • Utilities(jQuery的库)
3,引入jQuery
  • 从jquery.com下载jQuery库
  • 从CDN中下载jQuery
  • 版本介绍:v1.x (ie6+) v2.x(ie9+)
4,基本的语法:
  • $(ele).action();
    • 说明:$ 定义jQuery
  • 文档加载完毕 $(document).ready(function(){});
    选择器(selector)-----得看文档
    • 元素选择:$("p")
    • id选择:$("#id")
    • 类名选择:$(".class")

5,jQuery事件:
  • 常用的事件方法-----得看文档
  • 绑定事件  on(事件名,函数名)   $("#pid").on("click",demo1);
  • 解除绑定事件  off(事件名,函数名)  $("#id").off("click",demo1);
  • 事件的目标
  • 事件的冒泡: 阻止父级事件冒泡(stopPropagation());阻止所有的事件冒泡(stopImmediatePropagation();)
  • 自定义事件  :
  •        
           
           
           
    $(document).ready(function() {
    $("#btn1").click(function() {
    var e=jQuery.Event("myEvent"); //自定义自己的事件
    $("#btn1").trigger(e);
    });
     
    $("#btn1").bind("myEvent",function (event) {
    console.log(event);
    })
    });
6,DOM操作
  • 捕获
    获取文本内容 text()
    获取value值(常用于input标签) val()
    获取元素的属性 attr("属性名")

  • 修改
    • 修改文本内容 text("要改的内容")
      修改内容 html("要改的,可以加标签")
      修改文本框的value内容 val("要改成的内容")
      修改元素的属性值 attr({"属性名":"属性值","属性名":"属性值"})
      回调 text(function(nteger index, String text ){return})

  • 添加
    • append()/after() 在后面添加元素
      prepend()/before() 在前面添加元素
      三种添加元素的方式(html,jQuery,js)
                  
                  
                  
                  
      var text1="<p>text1</p>";
      var text2=$("<p></p>").text("text2");
      var text3=document.createElement("p");
      text3.innerHTML="text3";
      $("body").append(text1,text2,text3);


  • 删除
    • remove() 全部删除
      empty() 删除里面的内容

  • 显示和隐藏
    • hide(time) 隐藏
      show(time) 显示
      toggle(time) 隐藏/显示
      很炫酷的显示和隐藏效果
                  
                  
                  
                  
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>显示和隐藏的效果</title>
      <style type="text/css">
      div{float:left; width:50px; height:50px;margin:4px; border:2px solid #ff0;
      box-shadow:0 0 4px #00f; border-radius:5px; background-color:#ff0;}
      </style>
      <script type="text/javascript" src="jquery-1.12.1.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
       
      for(var i=0;i<5;i++){
      $("<div>").appendTo(document.body);
      }
       
      $("div").click(function() {
      $(this).hide(1000);
      });
       
      });
      </script>
      </head>
      <body>
      </body>
      </html>


  • 淡入和淡出
    • fadeIn(time) 淡入
      fadeOut(time) 淡出
      fadeToggle(time) 淡入/淡出
      fadeTo(time,透明度) 透明度是0-1

  • 滑动效果
    • slideUp(time) 向上滑动
      slideDown(time) 向下滑动
      slideToggle(time) 向上/向下滑动

  • 回调
    • 每一个动画都有一个function,用于回调;
    • 一个对象可以连续加多个动画 $("con").slideUp(1000).slideDown(1000);

7,ajax的异步访问和加载
  • 三种方法:get(); post(); load();
8,jQuery的扩展和noConflict     
9,jQuery的css方法和盒子模式
  • 操作css的方法:
    • css({
         width:"100px",
         height:"100px"
      })
      修改css的样式
      addClass(类名) 修改css
      toggleClass(类名)

  • jQuery的盒子模型
    • height()
      innerHeight()  
      --height+padding
      outerHeight()
      --height+padding+border
      outerHeight(true)
      --height+padding+border+margin

10,jQuery的元素遍历和过滤
  • 向下遍历
    • children("名字")  :向下遍历一级
    • find("名字"):可以一直向下遍历
  • 向上遍历
    • parent("名字"):向上遍历一级
    • parents("名字"):向上遍历所有的
    • parentsUtil("名字"): 向上遍历一段区间中的
  • 同级的遍历
    • siblings("名字"): 同级遍历所有的
    • next() :直接的下一个
    • nextAll("名字"):下面的所欲的
    • snextUtils("p2"):下面的一段区间上的
    • pre(): 直接的上面的
    • preAll():直接上面
    • preUtils("p2"):直接上面的一段区间
  • 过滤
    • first() :第一个
    • last() :最后一个
    • filter("标准") :满足标注的元素
    • not("标注"):不满足标注的元素

你可能感兴趣的:(jQuery的学习笔记)