09 2012 档案
摘要：jQuery实现选项卡功能。首先将界面搭建好。有导航头tab_menu，还有内容tab_box。要实现的效果就是，点击后，将相应的内容显示出来，其他内容隐藏掉。同时为了展现选中状态，为选中的项添加背景，以示区别。这一次，我自己写了代码，先看html部分：<div class="tab"> <div class="tab_menu"> <ul> <li class="selected">时事</li> <li>体育</li> <li>娱乐&l
阅读全文
摘要：ajax是局部刷新。用jQuery来实现，会简化很多。下面进行详细的说明，结合一个ajax删除的案例来进行。首先看html界面的代码：<a href="javascript:;" onclick="delete_order('<?php echo $item[order_id]; ?>')"><img src="images/admin/delete-icon.png" border="0" /></a>这个一个图片链接，表示删除。它并不跳转到某个界面
阅读全文
摘要：先获取字体大小，进行处理。再将修改的值保存。slice() 方法可从已有的数组中返回选定的元素。arrayObject.slice(start,end)。start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。jQuery代码如下：<script type="text/javascr
阅读全文
摘要：1.radiojQuery部分：<script type="text/javascript"> $(function(){ $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式 $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式 $('tbody>tr').click(function() { $(this) .addClass(&#
阅读全文
摘要：就是实现这个效果的，选中添加到右边，全部添加到右边，选中删除到左边，全部删除到左边。html部分：<body> <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">选项1</option> <option value="2">选
阅读全文
摘要：版本一css代码部分：.focus { border: 1px solid #f00; background: #fcc;} 当焦点获得时，添加focus样式，添加边框，并改背景色为#fcchtml代码部分：<body> <form action="" method="post" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="username">
阅读全文
摘要：parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。获取的是集合。HTML 代码:<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>jQuery 代码:$("span").parents("p")找到每个span的所有
阅读全文
摘要：通过一段代码来展示jQuery的动画效果。1.show&hide<script type="text/javascript">$(function(){ $("#panel h5.head").toggle(function(){ $(this).next().hide(); },function(){ $(this).next().show(); })})</script>html代码部分：<body><div id="panel"> <h5 class="he
阅读全文
摘要：这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。<script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("click"
阅读全文
摘要：有时候事件执行完了，想取消事件的效果可以通过一定的办法来处理。比如bind()方法，可以通过unbind()方法来移除事件的效果。比如下面的一个案例：<script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("click", function(){ $(&
阅读全文
摘要：事件对象是有属性的，能够灵活的利用，对于处理一些问题很有帮助。获取事件的类型：<script>$(function(){ $("a").click(function(event) { alert(event.type);//获取事件类型 //return false;//阻止链接跳转 event.preventDefault(); });})</script>通过event.type获取事件的类型。html部分代码如下：<body><a href='http://google.com'>click me .&l
阅读全文
摘要：冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。下面是html代码部分：<body><div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素</div><div id="msg"></div></body>对应的jQuery代码如下：<script type="text/javascript">$(function(){ // 为span元素绑定click事件
阅读全文
摘要：jQuery提供一些方法将两种效果合并到一起，比如：mouseover、mouseout。下面是一些案例：hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。参数 :over (Function) : 鼠标移到元素上要触发的函数。out (Function): 鼠标移出元素要触发的函数。<script type="text/javascript">$(function(){ $("#panel h5.head").hover(fu
阅读全文
摘要：bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。下面是具体的用法：<script type="text/javascript">$(function(){ $head = $("#panel h5.head");//选中 $head.bind("click",function(){//如果点击，就会触发事件，将下面的内容显示出来 $(this).next().show(); })})</script>is(":hidden")可以判断对象是否隐藏。is(&
阅读全文
摘要：<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-1-1</title><script type="text/javascript"> document.getElementById("panel").onclick=fun
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(function(){ //获取<p>元素的color $("input:eq(0)").click(function(){ alert( $("p").css("color") ); }); //设置<p>元素的color $("input:eq(1)").click(function(){ $("p").css("color&qu
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(function(){ //获取<p>元素的HTML代码 $("input:eq(0)").click(function(){ alert( $("p").html() ); }); //获取<p>元素的文本 $("input:eq(1)").click(function(){ alert( $("p").text() ); }); //设置<p>元素
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(function(){ //获取样式 $("input:eq(0)").click(function(){ alert( $("p").attr("class") ); }); //设置样式 $("input:eq(1)").click(function(){ $("p").attr("class","high"); }); /
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(function(){ //设置<p>元素的属性'title' $("input:eq(0)").click(function(){ $("p").attr("title","选择你最喜欢的水果."); }); //获取<p>元素的属性'title' $("input:eq(1)").click(function
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(function(){ $("p").replaceWith("<strong>你最不喜欢的水果是?</strong><br>"); // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); }); //]]> </script>
阅读全文
摘要：<script type="text/javascript"> $(function(){ $("ul li").click(function(){ $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素 }) }); </script> <script type="text/javascript"> $(function(){ $("ul li").click(function(){ $
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(function(){ $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。 }); //]]> </script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li = $("ul li:eq(1)").remove();
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 创建第一个<li>元素 var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 创建第二个<li>元素 var $li_3 = $("<li title='其
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li></li>"); // 创建第一个<li>元素 var $li_2 = $("<li></li>"); // 创建第二个<li>元素 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $parent.append(
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(function(){ var $para = $("p"); // 获取<p>节点 var $li = $("ul li:eq(1)"); // 获取第二个<li>元素节点 var p_txt = $para.attr("title"); // 输出<p>元素节点属性title var ul_txt = $li.attr("title"); // 获
阅读全文
摘要：<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ var $alltext = $("#form1 :text"); var $allpassword= $("#form1 :password"); var $allradio= $("#form1 :radio"); var $allcheckbox= $("#form1 :checkbox"); var $allsubmit=
阅读全文
摘要：$(document).ready(function(){ //重置表单元素 $(":reset").click(function(){ setTimeout(function() { countChecked(); $("select").change(); },0); }); //对表单内 可用input 赋值操作. $('#btn1').click(function(){ $("#form1 input:enabled").v...
阅读全文
摘要：<script type="text/javascript"> $(document).ready(function(){ //选取每个父元素下的第2个子元素 $('#btn1').click(function(){ $('div.one :nth-child(2)').css("background","#bbffaa"); }) //选取每个父元素下的第一个子元素 $('#btn2').click(function(){ $('div.one :first-chi
阅读全文
摘要：<script type="text/javascript"> $(document).ready(function(){ //选取含有 属性title 的div元素. $('#btn1').click(function(){ $('div[title]').css("background","#bbffaa"); }) //选取 属性title值等于 test 的div元素. $('#btn2').click(function(){ $('div[title=tes
阅读全文
摘要：<script type="text/javascript"> //<
浙公网安备 33010602011771号