jquery 代码篇

原创 2018年04月17日 18:12:41

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jquery-1.html</title>

 

 <style type="text/css">

  .divFather{border:1px solid red; height:500px;width:300px;}

 </style>

 

 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

 <script type="text/javascript">

    $(function(){

  $(".subBtn").bind('click',function(){  

    if($('.divFather').is(':hidden')){//如果当前隐藏  

        $('.divFather').show();//那么就显示div  

        }else{//否则  

        $('.divFather').hide();//就隐藏div  

        }  

  });

})

  </script>

</head>

<body>

<div class="divFather"></div>

<input type="submit" value="提交" class="subBtn">

</body>

</html>

【显示,点击隐藏,再次点击显示】

 

$(“.html”).html(“往指定位置set”);

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jquery-1.html</title>

 

 <style type="text/css">

  .divFather{border:1px solid red; height:500px;width:300px;}

 </style>

 

 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

 <script type="text/javascript">

    $(function(){

  $(".subBtn").bind('click',function(){  

   var one = $(".divFather >span").eq(2).text();

   alert(one);

  });

})

  </script>

</head>

<body>

<div class="divFather">

  <span></span>

  <span></span>

  <span></span>

</div>

<input type="submit" value="提交" class="subBtn">

</body>

</html>

 

【获取div span 标签中的一个】

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jquery-1.html</title>

 

 <style type="text/css">

  .divFather{border:1px solid red; height:500px;width:300px;}

 </style>

 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

 <script type="text/javascript">

    $(function(){

 $(".divFather > span").bind('click',function(){

   var span = $(this).text();

   alert(span);

 })

})

  </script>

</head>

<body>

<div class="divFather">

  <span></span>

  <span></span>

  <span></span>

</div>

</body>

</html>

【标签相同,点击那个,当前标签弹出来】

 

$("span").last().text()

 

<!DOCTYPE html>

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("span").parent().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

 

<div class="ancestors">

  <div style="width:500px;">div (曾祖父)

    <ul>ul (祖父)  

      <li>li (直接父)

        <span>span</span>

      </li>

    </ul>   

  </div>

  

</div>

 

</body>

</html>

 

【该标签的父级标签】

 

<!DOCTYPE html>

<html>

<head>

<style>

.descendants *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

var p=  $("div").children().eq(0).text();

alert(p);

});

</script>

</head>

<body>

 

<div class="descendants" style="width:500px;">div (当前元素)

  <p>p ()

    <span>span (yi)</span>     

  </p>

  <p>p (child)

    <span>span (er)</span>

  </p>

</div>

 

</body>

</html>

 

【子级标签】

$("div").find("span").eq(0).css({"color":"red","border":"2px solid red"});

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

.siblings *{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

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

</script>

<script>

$(document).ready(function(){

$("li.aaa").prev().next().css({"color":"red","border":"2px solid red"});

$("li.start").siblings().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

 

<div style="width:500px;" class="siblings">

<ul>ul (父节点)  

<li >li (兄弟节点)</li>

<li>li (类名为"start"li节点的上一个兄弟节点)</li>

<li class="start">li (类名为"start"li节点)</li>

<li>li (兄弟节点one)</li>

<li class="aaa">li (兄弟节点)</li>

</ul>   

</div>

 

</body>

</html>

【当前节点的左一个右一个节点,兄弟节点】

$("input[name='username']").val();

 var test = $(".divFather span:last-child").text();

var si= $(".si").prevAll().text();

 

$("#results").html( $.toJSON( $("form").serializeArray() ));

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jquery-1.html</title>

 

 <style type="text/css">

  .divFather{border:1px solid red; height:500px;width:300px;}

 </style>

 

 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

 <script type="text/javascript">

    $(function(){

  $(".subBtn").bind('click',function(){  

    var radio =$(":radio").val();

var checkbox = $(":checkbox").val();

var selected =$("input:checked").val();

alert(selected);

var option = $("select option:selected ").val();

alert(option);

  });

})

  </script>

</head>

<body>

<div class="divFather">

    <span></span>

<span></span>

<span></span>

<input type="radio" value ="" />

<input type="radio" value =""checked="checked"/>

<input type="checkbox" value ="足球"/>足球

<input type="checkbox" value="篮球"checked="checked"/>篮球

<select>

<option>one</option>

<option >two</option>

<option selected="selected">three</option>

</select>

</div>

<input type="submit" value="提交" class="subBtn">

</body>

</html>

 

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

    $(":radio").each(function(){

      alert($(this).val())

    });

  });

});

</script>

</head>

<body>

<button>输出每个列表项的值</button>

<input type="radio" value ="" />

<input type="radio" value =""checked="checked"/>

</body>

</html>

【遍历】

 $(":radio").removeAttr("checked");

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jquery-1.html</title>

 

 <style type="text/css">

  .divFather{border:1px solid red; height:200px;width:300px;}

 </style>

 

 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

 <script type="text/javascript">

    $(function(){

var datas = $("form").serialize();

 

var result = $("form").serializeArray();

console.log(datas);

  $(".subBtn").bind('click',function(){  

        $.ajax({

            type : 'post',

            data : datas,

            url : "/saleToMoney",

            async : false,

            dataType: "json",

            success : function(data) {

                var toUrl = data.buyBack;

                window.location.href=toUrl;

            }

        });

  });

})

  </script>

</head>

<body>

<form>

<div class="divFather">

   <input type="text" id="username" name="username" value="黑土"/>

   <input type="radio" name="sex" value=""/>

   <input type="radio" name="sex" value=""/>

   <input type="date" id="birthday" name="birthday" value="2012-12-12"/>

</div>

<input type="submit" value="提交" class="subBtn">

</form>

</body>

</html>

【表单序列化】

【合并数组】

   $(function(){

 var first = [1, 3, 5];

 var second = [2, 4, 6];

 var result = $.merge(first, second);

  $(".subBtn").bind('click',function(){  

       alert(result);

  });

})

【倒计时】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"> 
var countdown=60; 
function sendemail(){
    var obj = $("#btn");
    settime(obj);
    
    }
function settime(obj) { //发送验证码倒计时
    if (countdown == 0) { 
        obj.attr('disabled',false); 
        //obj.removeattr("disabled"); 
        obj.val("免费获取验证码");
        countdown = 60; 
        return;
    } else { 
        obj.attr('disabled',true);
        obj.val("重新发送(" + countdown + ")");
        countdown--; 
    } 
setTimeout(function() { 
    settime(obj) }
    ,1000) 
}
</script>
<body> 
<input type="button" id="btn" value="免费获取验证码" onclick="sendemail()" /> 
  
</body>
</html>



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35781178/article/details/79978662

jQuery高级篇 第四章 JQuery常用插件与自定义插件

-
  • 1970年01月01日 08:00

jQuery笔记总结

jQuery笔记总结 第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑,通过内置wi...
  • XCL18215166914
  • XCL18215166914
  • 2017-12-06 10:23:10
  • 108

Java语言程序设计(基础篇) (原书第10版)代码

  • 2016年01月23日 21:44
  • 28.05MB
  • 下载

疯狂 iOS 讲义(基础篇)- 全代码

  • 2017年06月06日 11:21
  • 25.37MB
  • 下载

jQuery文章章节平滑切换过渡动画特效

  • 2017年04月26日 16:52
  • 38KB
  • 下载

疯狂iOS讲义(提高篇)全源码

  • 2017年11月14日 20:24
  • 64.18MB
  • 下载

jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(function(){ $("p").hide(); }); ...
  • huang2009303513
  • huang2009303513
  • 2013-12-08 00:17:58
  • 4958

jquery插件整理篇(三)图片展示插件

(1)imgAreaSelect imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。 imgAreaSelect    (2)Easy Slide ...
  • MichaelFeng726
  • MichaelFeng726
  • 2013-03-07 13:15:21
  • 2397

jQuery框架精华篇

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 套餐包含: 零基础学软件之jQuery框架视频课程 jQuery高级篇 第二章 Ajax在jQuery中的使用视频课程 jQuery高级篇视频课程 第三章 jQuery使用JSON与XML数据 jQuery高级篇视频课程 第四章 jQuery常用插件与自定义插件 jQuery高级篇视频课程 第五章 jQuery常用函数和技巧
  • 2017年04月28日 10:34

Visual C++ 6.0高级编程技术-OpenGL篇

  • 2008年08月31日 22:44
  • 24.88MB
  • 下载
收藏助手
不良信息举报
您举报文章:jquery 代码篇
举报原因:
原因补充:

(最多只允许输入30个字)