网站开发日志

jQuery基础 - 如何判断页面元素存在与否

在传统的Javascript里，当我们对某个页面元素进行某种操作前，最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。例如：

document.getElementById("someID").innerText("hi");

如果ID为"someID"的元素不存在，我们将得到Javascript运行错误：document.getElementById("someID") is null

正确的写法应该是：

obj = document.getElementById("someID");
if (obj){
  obj.innerText("hi");
}

那么在jQuery，我们如何判断页面元素存在与否呢？如果参照上面的传统Javascript的写法，我们第一个想到的办法一定是：

if ($("#someID")){
  $("#someID").text("hi");
}

可是这么写是不对的！因为jQuery对象永远都有返回值，所以$("someID")总是TRUE，IF语句没有起到任何判断作用。正确的写法应该是：

if ( $("#someID").length > 0 ) {
$("#someID").text("hi");
}

注意：判断某个页面元素存在与否在jQuery实际上是没有必要的，jQuery本身会忽略对一个不存在的元素进行操作，并且不会报错。

标签： Javascript, Jquery, jQuery基础

...阅读全文

我在前面的文章里介绍了 - 如何添加/移除CSS类，那种方法需要先定义好CSS类，然后针对"类"来改变某个元素的样式。本文要介绍的是另外一种改变CSS样式的方法 - 直接添加样式法。使用CSS样式一般有两种方法：一种是在Head里引用外部定义了CSS样式的文件；另一种是直接在HTML元素里嵌入样式。如何添加/移除CSS类一文里介绍的方法通常需要把CSS类定义在外部CSS样式文件里；而本文介绍的方法就类似于嵌入式CSS。

jQuery提供css()的方法来实现嵌入式改变元素样式，css()方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码：

$("#61dh a").css('color','#123456');
//这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。
//.css(‘color’,'#123456');表示把颜色设为'#123456'

如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下：

var divcss = {
  background: '#EEE',
      width: '478px',
      margin: '10px 0 0',
      padding: '5px 10px',
      border: '1px solid #CCC'
};
$("#result").css(divcss);
//这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。
//然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。

另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码：

$("#61dh a").css("color")
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接，也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是，hover()方法需要定义两个函数，一个是鼠标划过时；另一个是鼠标划过后。具体方法如下：

$("#61dh a").css('color','#123456');
  $("#61dh a").hover(function(){
  $(this).css('color','#999');
  },
  function(){
  $(this).css('color','#123456');
});
//hover()方法的两个函数使用用逗号分隔

你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨)，其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中，建议使用如何添加/移除CSS类一文提到的方法来改变鼠标划过的链接样式。

演示+代码

标签： Javascript, Jquery, jQuery基础

...阅读全文

jQuery基础 - 如何添加/移除CSS类

在网页设计中，我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！”

1. addClass() - 添加CSS类

$("#target").addClass("newClass");
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类

$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称

3. toggleClass() - 添加或者移除CSS类：如果CSS类已经存在，它将被移除；相反，如果CSS类不存在，它将被加上。

$("#target").toggleClass("newClass")
//如果ID为“target”的元素已经定义了CSS样式，它将被移除；
//反之，CSS类”newClass“将被赋给该ID。

在实际运用中，我们常常先定义好这些CSS类，然后通过Javascript事件触发（比如点击某个链接）来改变页面元素样式。此外，jQuery还提供一种方法 hasClass("className")，用来判断某个元素是否已经被赋予某个CSS类。

演示+代码

标签： Javascript, Jquery, jQuery基础

...阅读全文

jQuery基础 - 树形结构的选择器

在前面的文章里，我介绍了jQuery选择器。在那篇文章里介绍的选择器的方法，不管是通过"id"还是通过"class”，它们都是针对某个元素本身，这和常规的Javascript方法(getElementById以及getElementByName)的思想相似。在这篇文章里我要介绍jQuery提供的另外一种类型的选择器，我称之为树形结构的选择器。树形结构里的节点，如果它不是根部，也不是末枝，那么它一定有父母和孩子。DOM结构其实也是一种树形结构，jQuery提供的树形选择器可以用来选择DOM Tree里的节点。这些树形选择器的方法包括：children(), parent(), parents(), next(), prev(), siblings().

选择某个元素的"孩子" - children()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#parent").children().length //得到所有的”孩子“(li)的个数，“3”
$("#parent").children("#son1").text(); //得到第一个”孩子“(li)的值 - “第一列”

选择某个元素的“父母” - parent()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#son1").parent().attr("id");//得到ul的ID - "parent"

选择某个元素的“祖先”-parents() (注意：一级一级向上选择直到<html>)

<div id="grand">
  <ul id="parent">
    <li id="son1">第一列</li>
    <li id="son2">第二列</li>
    <li id="son3">第三列</li>
  </ul>
</div>
$("#son2").parents().each(function(i){
  if(i<3) //只显示3代祖先
  alert($(this).html());
});

选择某个元素的“弟弟” - next()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#son2").next().text(); //选择#son3

选择某个元素的“哥哥” - prev()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#son2").prev().text(); //选择#son1

选择某个元素的“兄弟” - siblings()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#son2").siblings().text(); //选择#son1和#son3

演示以及代码

标签： Javascript, Jquery, jQuery基础

...阅读全文

jQuery基础 - 处理表单元素

我在以前的文章里已经介绍过如何运用jQuery来获取和设置表单元素，因为表单在HTML里非常重要，所以在“jQuery基础”这个系列，我觉得很有必要把jQuery对表单元素的处理做更加详细的介绍。

HTML表单(Form)常用控件有：参考

input type="text" 单行文本输入框
input type="password" 密码输入框(输入的文字用*表示)
input type="radio" 单选框
input type="checkbox" 复选框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
textArea 多行文本输入框
select 下拉框 (单选和多选)

在jQuery里，我们大致可以通过三种方法来获取这些控件的值：

1.获取input类的值： $("input").val();

2.获取textarea类的值: $("textarea").val();

3.获取select类的值：$("select").val();

当表单上含有多个input类（或者textarea类和select类），使用上述方法得到的将是一个数组。当然，你可以给这些控件加上ID，从而对某个特定的控件取值，例如：$("input#myID").val()。

下面将对每一种控件的取值方法做一一介绍：

1. input type="text" 单行文本输入框和input type="password" 密码输入框

$("input").val();

2. input type="radio" 单选框

$("input:checked").val(); //使用checked，取被选中的单选框的值

3. input type="checkbox" 复选框 (值得注意)

$("input:checked").each(function(index){
  $("#result").append($(this).val() + " ");
});
//因为复选框的选择结果通常大于1，所以得到的结果是数组。
//使用.each()方法，可以把选择的值一一取出。
//这里结果将被加入(append)到ID为"result"的段落里

4. input type="submit" (表单提交按钮)

取值方法和单行文本输入框的取法相同，但没有什么实际意义。

5. textArea 多行文本输入框

$("textarea").val();

6. select 下拉框 (单选和多选)

$("select").val(); 
//注意：如果是复选，那么得到的结果是用逗号分格的字符串，例如："选择一，选择二”。

注意：

对表单元素取值，通常是发生在表单别递交后，在jQuery我们可以用下面的语句进行判断：

$("form").submit(function(){
  $("input").val();
});

对表单元素设值，只要把要设置的值作为传递参数即可，例如：$("input").val("61dh.com");

演示及代码

标签： Javascript, Jquery, jQuery基础

...阅读全文

jQuery基础 - 如何处理HTML标签属性

当我们对页面进行操作的时候，常常需要对HTML标签属性(tag attribute)进行处理，这包括获取某个标签属性的值，或者对某个标签属性的值进行设置。在jQuery里我们可以通过.attr()的方法来实现。

1. 获取标签属性的值 (演示)

语法：$('选定目标').attr('属性名')
例子如下：(如果你对如何选定目标不了解，请查看前面的文章：jQuery基础 - 选择器)

<p id="b6_a">点击获取本段落的ID</p>
<button>查看ID</button>
<p id="b6_a">点击查看链接的URL</p>
<ul>
  <li><a href="http://www.61dh.com/blog">网站开发日志</a></li>
  <li><a href="http://www.61dh.com/blog/categories/">日志分类</a></li>
</ul>
//使用下面的jQuery代码，来获取ID和HREF
$(document).ready(function() {
  $('button:eq(0)').click(function(){
    alert("ID:" +$('p:eq(0)').attr("id"));
  });
  
  $("ul>li>a").click(function(){
    alert("URL:"+$(this).attr('href'));
    return false;
  });
});

2. 设置标签属性的值 (演示)

语法：$('选定目标').attr('属性名', '值')
例子如下：

<p id="b6_c">点击设置本段落的ID，</p>
<button>设置ID</button>
//通过下面的jQuery代码，点击按钮后，p的'id'将被设置为"b6_cc"
$("button").click(function(){
  $('#b6_c').attr("id", "b6_cc");
});

3. 使用jQuery设置标签属性值的功能，我们可以对表单的提交的目的地进行修改，这在实际运用中还是挺有用。例如：用户可以通过点击某个链接，让表单提交给不同的php文件做不同的处理。

$('a').click(function(){
  $("#myform").attr("action", "custom1.php");
});

4. 上面介绍的设置标签属性值的方法都只有对一个属性进行修改，其实jQuery的.attr()方法也可以对某个标签的多个属性进行修改，例子如下：

$("#myimg").attr({
  src : "newimage.gif",
  title : "New Image",
  alt : "New Image",
  border : 1
});

标签： Javascript, Jquery, jQuery基础

...阅读全文

jQuery基础 - 如何处理网页内容

改变页面内容应该算是Javascript最常用的功能，这包括更改已经存在的页面元素或者添加新的HTML元素。jQuery提供两种实现这种功能的方法 – text()和html()。text()是对纯文本的处理；html()和text()相似，不同的是它还支持HTML代码。

//设置ID为"b5_a"段落的内容为"这是新加入的文本信息";
$('#b5_a").text("这是新加入的文本信息");
//在ID为"b5_b"的div里加入一段html代码；
$("#b5_b").html("<p>新加入一个html段落</p>");

演示

有时我们要读取页面的内容，这也可以用text()和html()来实现。同样，使用text()得到的是纯文本；使用html()得到的是html代码。

//点击第二个按钮查看相关元素的文本内容
$("button:eq(1)").click(function(){
  alert($('#b5_a').text());
});
//点击第四个按钮查看相关元素的HTML内容
$("button:eq(3)").click(function(){
  alert($('#b5_a').html());
});

演示

注意：text()和html()返回值得类型都是字符串型（string）。如果我们要对返回值进行算术运算，我们可以使用原始的JavaScript 函数：parseInt 或者 parseFloat 先把字符串转换成整形或者浮点型。

<ul id="u2">
  <li>12.3</li>
  <li>1.5</li>
</ul>
//通过下面的jQuery代码，可以对上述列表求和
$("button:eq(4)").click(function(){
  var sum = 0;
  $('li').each(function(index){
  sum += parseFloat($(this).text());
  });
  alert(sum);
});

演示

标签： Javascript, Jquery, jQuery基础

...阅读全文

jQuery基础 - 处理多个选择结果

在上篇文章里，我介绍了jQuery的选择器。其中一种选择方法是直接对页面标签元素选择，比如说选择段落 $("p”)，这样就会把页面的所有段落都选中。jQuery提供.each()方法来对选中的结果进行循环处理，而且在每次执行函数时，都会给函数传递匹配元素在选中结果里所处位置的数字值作为参数（从零开始的整形变量）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

例子一：演示

<ul>
  <li>第一列</li>
  <li>第二列</li>
  <li>第三列</li>
</ul>
<button>选中所有列</button>
//使用下面的jQuery代码，点击按钮后，所有列将被选择，并且在每列后加上index
$('button').click(function(){
   $('li').each(function(index){
      var str = "<b>"+index+"</b>";
      $("li:eq("+index+")").append(str);
   });
});
//注意：index是从零开始的整形变量。

例子二：演示

<ul>
<li>第一列</li>
<li>第二列</li>
<li class="mark">第三列</li>
<li class="mark">第四列</li>
</ul>
<button>选择列</button>
//使用下面的jQuery代码,点击按钮后，class为“mark”的列将被选择
$('button').click(function(){
   $('li').each(function(index){
      if ($(this).is(".mark")){
         this.style.color = 'blue';
      }
   });
});
//如果我们只想选第一个class为"mark"的列，可以使用return false，停止循环
$('button').click(function(){
   $('li').each(function(index){
      if ($(this).is(".mark")){
         this.style.color = 'blue'; 
         return false; //注意这个return
      }
   });
});

注意：在上述例子里，我用到了$(this)和this, 前者是jQuery对象，后者是DOM对象。jQuery对象具有is方法，但不具有style方法，同理，DOM对象具有style方法，但不具有is方法。

标签： Javascript, Jquery, jQuery基础

...阅读全文

jQuery基础 - 选择器

传统的Javascript是通过document.getElementById()函数来选择页面元素，这需要被选择的元素具有定义好的ID。相比之下，jQuery对页面元素的选择就要灵活多，它不但支持通过ID选择，而且还支持Class Name、元素及其位置顺序、以及这些方法的组合。

如果你对CSS熟悉，你一定知道什么是ID和Class。ID和Class都是对页面元素的标识，不同的是ID是对某个元素的标识（不同的元素不可以具有相同的ID），而Class是对一类元素的标识（不同元素可以具有相同的Class）。 jQuery用到的ID和Class就是来自CSS。

1. 通过“ID”来选择：

<p id="myID">这一段落的ID是“myID"</p>
//用以下jQuery来选择这一段落，然后加上特效（向右移动10px）
$("#myID").animate({ marginLeft: 10}, 'fast');

2. 通过“Class”来选择：

<p class="myClass">这一段落的Class是”myClass“</p>
//用以下的jQuery来选择这一段落，然后附加上一个词
$(".myClass").append("<b>Hello</b>"

3. 通过“元素及其位置顺序”来选择：

<ul>
  <li>第一列</li>
  <li>第二列</li>
  <li>第三列</li>
</ul>
//使用下列jQuery对第三列进行选择，然后加上特效
$('li:eq(2)').animate({ marginLeft: 10}, 'fast');

4. 使用“上述方法的组合”来多项选择：

<p id="myID">paragraph with id</p>
<p class="myClass">paragraph with class</p>
<ul>
  <li>第一列</li>
  <li>第二列</li>
  <li>第三列</li>
</ul>
//使用以下jQuery可以把上面的HTML元素都选中
$('#myID, .myClass, li:eq(2)').$('li').append("-被选中");

注意：

选择页面元素的格式是：$('selector') , 这里selector是你要选择的元素，它可以是以上4种情况。
元素选择后，通常要执行一些操作，以上例子里使用了animate和append，更多更深入的探讨将在以后的文章里详述。
jQuery的选择器(selector)功能强大，所包含的内容比较多，这里只是对最基本的功能进行介绍。我会在以后的文章里对它进行更加详细的介绍。
Update:2/15/2009: $('selector')是jQuery('selector')的缩写，如果你的Javascript代码包含有对$的其他定义，你必须使用jQuery来代替$

标签： Javascript, Jquery, jQuery基础

...阅读全文

jQuery基础 - document.ready

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，这个问题在“javascript执行顺序里”一文里有详细介绍。jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

比如在"jQuery基础 - 如何开始"一文里，我用到如下jQuery代码：

<script type="text/javascript">
$(document).ready(function () {
alert("我的第一个jQuery代码!");
});
</script>

这段代码的意思是：当Dom Tree加载完成后，显示警告信息。document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。

最后要注意两点（来自jQuery文档）：

确保在 <body> 元素的onload事件中没有注册函数，否则可能不会触发$(document).ready()事件。(

我尝试用下面的例子来演示这个情况，但是没有成功，所以我想这种情况只是可能发生。)

<html>
<head>
<title>My second jQuery</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
//下面是load的函数含有jquery注册函数$
function load(){
   $("p").append("<b>Hello</b>");
}
//下面是jQuery的代码
$(document).ready(function () {
$("p").append("我的第一个jQuery代码!");
$("p").append("<b>Hello</b>"); 
});
</script>
</head>
<body onload="load()">
<h2>jQuery 简单例子2</h2>
<p>I would like to say: </p> 
</body>
</html>

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

标签： Javascript, Jquery, jQuery基础

...阅读全文

jQuery基础 - 从何开始？

到目前为止，访问我的博客的朋友大多数是通过搜索来的。而这些搜索使用的关键词里，“jQuery”占得比例最高。既然有这么多人都想学习jQuery，我准备在本博客里对它进行系统详细地介绍，首先要介绍的是jQuery基础。

使用jQuery需要3个基本步骤：

1. 下载jQuery.js并保存在网页可以存取的位置。下载链接：dowload

2. 在HTML的head里引用jQuery.js

3. 运用jQuery的方法

提示：在步骤一提供的下载页面里，你会发现每一种jQuery发行版本都有三个下载链接：Minified、Packed、和Uncompressed。到底应该下载哪一个要根据你的需要来定：

如果你想知道jQuery内部到底是如何工作的，你可以选择未压缩版本，也就是uncompressed。
如果你只是想使用它，你可以选择Packed或者Minified
Packed和Minfied版本都去掉了多余的空格和注释，不同的是Packed版本还对源代码进行编码，因此体积要比Minified版本还要更小。但是万事总是有利有弊，使用Packed版本，客户端需要花费一定的时间来解压代码。

简单的例子(HTML)如下：

<html>
<head>
<title>My first jQuery</title>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
//下面是jQuery的代码
$(document).ready(function () {
alert("我的第一个jQuery代码!");
});
</script>
</head>
<body>
<h2>jQuery 简单例子</h2>
</body>
</html>

注：你可以根据需要修改上面的jQuery代码，在接下来的文章里我将详细介绍一些具有代表性的使用方法。

标签： Javascript, Jquery, jQuery基础

...阅读全文

网站开发日志

jQuery基础 - 如何判断页面元素存在与否

jQuery基础 - 改变CSS样式

jQuery基础 - 如何添加/移除CSS类

jQuery基础 - 树形结构的选择器

jQuery基础 - 处理表单元素

jQuery基础 - 如何处理HTML标签属性

jQuery基础 - 如何处理网页内容

jQuery基础 - 处理多个选择结果

jQuery基础 - 选择器

jQuery基础 - document.ready

jQuery基础 - 从何开始？

关于

上一个

存档