`
云上太阳
  • 浏览: 128327 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jquery从头开始——一篇文章学完jQuery基础

jQueryjs 
阅读更多

      刚开始是做java web 开发的，一直主攻后端，所以前端能力有所欠缺。虽然jquery也一直在用，但是真的很不系统，每次遇到稍微有点生僻的就要查资料。首先要说明的一点是我的学习网络资源http://www.w3school.com.cn/jquery/index.asp 版权归w3school所有。这次狠下心把jquery花几天时间重新梳理一遍，要说明的是默认读者是有html基础的，下面直接从代码开始我们的jquery之旅

<html>
<head>
<!-引入jquery资源->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p>点击我，我会消失哦</p>
</body>

</html>

 很简单的实现了一个功能，点击<p>元素内容，会隐藏<p>元素的内容。在<head>中引入jquery.js文件。平时我会这么写，加载Microsoft CDN （谷歌也有，但是谷歌在国内很蛋疼），也就是微软提供的jquery 网络资源

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"

这样做的好处是，用户很可能已经加载过微软jquery，那么当下次访问的时候会直接从缓存中加载，这样会加快访问的速度。

 

 

一. 四种获取元素的方式

 

  • ${#test} 表示 id 为 test 的元素；
  • ${.test} 表示 class test 的元素； 
  • ${this} 表示当前元素；
  • ${p} 表示所有的<p>元素

需要说明的是this的用法，代码说明

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
<!-下面一行表示在文档完全加载完之后再运行js代码->
$(document).ready(function(){
<!-第一处->
  $("button").click(function(){
<!-第二处->
  $(this).hide();
});
});
</script>
</head>

<body>
<button type="button">Click me</button>
</body>
</html>

 

代码表示所有的button标签在点击后隐藏自己。

 

二. jQuery选择器


      前面一节讲了四种获取获取HTML元素的方法，大家也许发现了，只是通过一种方式满足不了我们的日常使用，如果我想获取的id为test的<p>元素呢？jQuery可以这样获取：${p#test} 选取所有id="test"的<p>元素。

 

   1. jQuery元素选择器 

  jQuery 使用 CSS 选择器来选取 HTML 元素。

  $("p") 选取 <p> 元素。

  $("p.intro") 选取所有 class="intro" 的 <p> 元素。

  $("p#demo") 选取所有 id="demo" 的 <p> 元素。

 

  2. jQuery属性选择器

  $("[href]") 选取所有带有 href 属性的元素。

  $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

  $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

  $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

    

 3. jQuery CSS选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。比如下面表示把所有p元素的背景颜色变为红色；

$("p").css("background-color","red");

    * jQuery是为处理 HTML 事件而特别设计的，下面是一些事件

Event 函数绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

 

三. 隐藏、显示、切换，滑动，淡入淡出，以及动画

 

  1.   隐藏与显示
  还记得前面学过的hide()函数吗？下面是功能更加强大的，具有动画效果的hide()和show()函数

 

$(selector).hide(speed,callback); //speed表示动画的速度，取值有"fast"，"slow"或者具体的毫秒数，
$(selector).show(speed,callback); //callback表示动画执行完毕之后回调的函数名
$(selector).toggle(speed,callback);//表示hide与show之间的切换

  

    下面代码表示点击隐藏按钮后，首先隐藏P标签的内容，然后执行show()函数，即弹出一个对话框。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
 <!-在缓慢的隐藏p元素之后执行show函数->
  $("p").hide(2000,show);
  });
});
<!-弹出一个窗口->
function show(){alert("隐藏了")}
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

 

  2.  淡入淡出

  

$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback);  //淡出
$(selector).fadeToggle(speed,callback);  //淡入与淡出之间切换
$(selector).fadeTo(speed,opacity,callback);// opacity 是0到1之间的一个数值，表示不透明度

 

  3. 滑动

$(selector).slideDown(speed,callback); //向下滑动
$(selector).slideUp(speed,callback); //向上滑动
$(selector).slideToggle(speed,callback); //向上与向下切换

 

  4. 动画

 动画用animate（）来表示

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},2000);
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

   上面代码实现的是：点击“开始动画”按钮，彩色快开始向右移动，完毕后div里面的HELLO字体开始变大。

   有时候我们在上面这些动作进行的时候需要停止动作，可以对进行动作的元素执行函数stop()；比如上面的

   动画，我们可以用$("div").stop()；来停止动画。

 

易错实例：我们在某个动画执行完后想继续执行下面的行为；比如hide()之后弹出alert();直接看代码

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
<!-写法1->
  $("p").hide(1000);
  alert("先执行弹出窗，再完全隐藏掉p元素");
  });

<!-写法2->
 $("p").hide(1000,function(){
  alert("P元素完全隐藏后再执行弹出窗"););
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

 很明显写法2才是正确的选择。写法1是不能实现我们的需求的；因为JS执行是逐一执行的，隐藏执行接下来立马执行alert()，但是此时hide()函数还没有执行完，所以会产生这种错误。

 

  5. jQuery chaining（动画链）

有时候需要对某个组件执行一系列的动画或动作，那么就需要jQuery chaining 了，如下所示

$("#p").css("color","red").slideUp(2000).slideDown(2000);
//先改变颜色为红色，然后上滑接着下滑

 

三. jQuery HTML

       jQuery 中非常重要的部分，就是操作 DOM（Document Object Model（文档对象模型）） 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。下面列出常用的

 1. HTML获取和设置

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

    下面的实例是给上面的方法增加了回调函数。

例：<p>元素的内容后面添加内容
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").text(function(i,oldText){
      return "Old text: " + oldText + " New text: 这是新的!"; 
    });
  });
});
</script>
</head>

<body>
<p>这是旧的</p>
<button id="btn1">显示旧/新文本</button>
</body>
</html>

 

  2. HTML的添加

  append() - 在被选元素的结尾插入内容

  prepend() - 在被选元素的开头插入内容

  after() - 在被选元素之后插入内容

  before() - 在被选元素之前插入内容

  *需要注意的是前两个是对元素内部的内容添加，而后两个是对选中元素之外插入内容。

 

  3. HTML的删除

  remove() - 删除被选元素（及其子元素）

  empty() - 从被选元素中删除子元素

 

  4. 获取并设置CSS类

 

         有时候需要动态的设置样式，jQuery可以很方便的实现这个步骤；jQuery 拥有若干进行 CSS 操作的方 法。我们将学习下面这些：

 

   addClass() - 向被选元素添加一个或多个类

 

   removeClass() - 从被选元素删除一个或多个类

 

   toggleClass() - 对被选元素进行添加/删除类的切换操作

 

   css() - 设置或返回样式属性,如：$("p").css("background-color","yellow");

 

<!DOCTYPE html>
<html>
<head>
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS 类</button>
</body>
</html>

 

 

 

 

 

   5. jQuery尺寸

 

  width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

 

  height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

 

  innerWidth() 方法返回元素的宽度（包括内边距）。

 

  innerHeight() 方法返回元素的高度（包括内边距）。

 

  outerWidth() 方法返回元素的宽度（包括内边距和边框）。

 

  outerHeight() 方法返回元素的高度（包括内边距和边框）。

 

  outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

 

  outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

 

  需要说明的是也可以试着元素的宽高 如：$("#div1").width(500).height(500);

 

  四. jQuery遍历

 

    这里的遍历表示获取本元素的父元素、同级元素和子元素。

 

  1.向上遍历

 

        parent() 方法返回被选元素的直接父元素。

       parents()方法返回被选元素的所有父元素，直到根元素为止。

       parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

    2.向下遍历

       children() 方法返回被选元素的所有直接子元素。

       find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

     3.同胞元素

  • siblings() 返回所有的同胞元素
  • next() 返回接下来的第一个同胞元素
  • nextAll()返回接下来所有的同胞元素
  • nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

    接下来三个与上面类似，只不过是向前查找

  • prev()
  • prevAll()
  • prevUntil()

      4.过滤遍历

 

      三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

 

    5.jQuery Ajax

    感觉这是jQuery最好的功能了，纯js的ajax编码真的是恶心出翔了。

 

分享到：
| UIWebView应用——自己动手写IOS浏览器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics