welcome to 一点点 home

一点点的博客

jquery 【一】

<!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
上一篇dubbo zookeeper
下一篇mysql的前世今生
想对作者说点什么? 我来说一句

ASP.NET MVC和jQuery系列一:入门篇

2011年11月10日 272KB 下载

jQuery入门-2015

2015年08月05日 17KB 下载

jQuery入门

2011年10月27日 314KB 下载

JQuery的使用——实例讲解

2010年02月21日 3.75MB 下载

没有更多推荐了,返回首页

关闭
关闭