您的位置：首页 > Web前端 > JQuery

jquery 基础

2015-10-19 00:51 615 查看

今天闲来无事看到一个jqueryAPI的东西。看了下入门指南。虽然经常使用jquery .但是里面还有很多不错的东西没有使用过。下面把今天看的内容简单列出来。方便以后翻阅。

下面为学习代码:

<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
</head>
<body>
<h2>学习Jquery</h2>

<ul>
<li>First</li>
<li>Sencond</li>
<li>Third</li>
</ul>

<button id="btnRestFrom">RestForm</button>
<form id="testForm">
name:<input type="text" name="name" />
</form>

<hr>
FAQ:
<div id="faq">
<dt>1.中国是否是人口大国？</dt>
<dd>是的，包括13亿之多的人口数量。</dd>

<dt>2.中国包括多少省份？</dt>
<dd>中国有34个省级行政区 其中，有23个省、5个自治区、4个直辖市、2个特别行政区。</dd>
</div>
<input type="checkbox"><input type="checkbox">

<script type="text/javascript">

$(function(){

//jquery 的Hover 用法。
$("ul>li:last").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","");
});

//修改每个li的内容
$("ul>li").each(function(i){
$(this).html($(this).html()+i);
});

//jquery 的form对象不存在reset 方法。但是DOM 存在此方法。 以后清空编辑操作更方便了。
$("#btnRestFrom").click(function(){
var form = $("#testForm");
console.log(form);
console.log(form[0]);
form[0].reset();
});

//简单的FAQ页面，答案首先会隐藏，点击问题显示答案。
$("#faq").find("dd").hide().end().find("dt").click(function(){
var answer = $(this).next();
if(answer.is(':visible')){
answer.slideUp();
}else{
answer.slideDown();
}
});

//写基于Jquery的插件时就是这样写的。
$.fn.check = function(){
this.each(function(){
this.checked = true;
})
};

//此处调用插件方法，选中所有checkbox
$("input[type='checkbox']").check();
});

</script>

</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航