码迷,mamicode.com
首页 > Web开发 > 详细

jquery 学习 总结

时间:2018-03-17 16:12:52      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:嵌入   对象   一个   height   rip   元素   set   padding   提高   

  OM = Document Object Model(文档对象模型)

一.基础

1.    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

  <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">

  可以减少加载时间,提高加载速度

2.    选择器

  $(this)  $("p:first")  :even  :odd

3.    事件

  鼠标事件  键盘事件  表单事件  文档窗口事件

4.    hide() 和 show() 方法来隐藏和显示 HTML 元素  toggle()切换 hide() 和 show() 方法

5.    淡入淡出效果  fadeIn() fadeOut()  fadeToggle()  fadeTo()

6.    滑动 slideDown()  slideUp() slideToggle()

7.    动画  animate({left:‘100px‘},"slow") 方法用于创建自定义动画  使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right    

  也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=   $("div").animate({ left:250px, height:+=150px, width:+=150px });

   stop() 方法用于停止动画或效果,在它们完成之前

  stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

8.    $(document).ready(function(){

    $("button").click(function(){

      $("p").hide("slow",function(){
        alert("段落现在被隐藏了");
      });
    });
  }); //回调函数
  $(document).ready(function(){
    $("button").click(function(){
      $("p").hide(1000);
        alert("现在段落被隐藏了");
    });
  }); //非回调函数

二.操作 HTML 元素和属性

  • text() - 设置或返回所选元素的文本内容 
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

  attr() 方法用于获取属性值。 $("#runoob").attr("href")

  $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); ///回调函数 return 

  append/prepend 是在选择元素内部嵌入。

  after/before 是在元素外面追加。

  删除元素和内容 

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

  remove(".italic"); 对被删元素进行过滤

三.遍历 DOM 树

  • parent()
  • parents()
  • parentsUntil()方法返回介于两个给定元素之间的所有祖先元素
  • children() 方法返回被选元素的所有直接子元素。
  • find()方法返回被选元素的后代元素,一路向下直到最后一个后代。
  • siblings() 方法返回被选元素的所有同胞元素。
  • next() 方法返回被选元素的下一个同胞元素。
  • nextAll() 方法返回被选元素的所有跟随的同胞元素。
  • nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元
  • first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素
  • filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
  • not() 方法返回不匹配标准的所有元素。

    提示:not() 方法与 filter() 相反。

四.Ajax

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});

 

jquery 学习 总结

标签:嵌入   对象   一个   height   rip   元素   set   padding   提高   

原文地址:https://www.cnblogs.com/otsf/p/8590245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!