<!DOCTYPE html>
<html>
<head>
<!--声明当前页面的编码集 utf-8国际编码,一般要用 utf-8,-->
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<!--当前页面的三要素-->
<title>jQuery,js常用的东西</title>
<meta name="Keywords" content="关键词,关键词"><!--这个是百度搜索到的关键词-->
<meta name="Description" content="描述"><!--这是关键词下的描述-->
<!--css,js js一般放在 /body前面-->
<style type="text/css">
*{margin:0;padding:0}
body{font-size:12px;font-family:"微软雅黑";}
.get_div{text-align:center;}
#txt{margin-top:20px;margin:20px 0px 10px 20px;}
.div_bg{background:red;}
.changr_bg{width:120px;height:100px;background-color:#9932cc;margin:auto;}
.changr_bg p{color:red;}
.show_hend{border:none;width:100px;height:40px;background:#3385ff;font-size:14px;border-radius:5px;margin-top:10px;}
</style>
</head>
<body>
<!--常用js,jQuery的使用-->
<div class="get_div"><input type="text" id="txt" class="txt" value="值"/><input type="button" id="btn" value="获取值" /><div>
<div id="bg_color_div" style="width:auto;height:100px;border:1px solid #000;">
这是一个普通的div
<input type="button" value="改变div的背景颜色" onclick="changeBg();"/>
</div>
<div class="changr_bg" id="changr_bg">
<p>鼠标经过，鼠标离开改变颜色<p>
</div>
<input type="button" value="显示和隐藏div" id="show_hend" class="show_hend"/></br>
<span id="append">追加：</span>
<input type="button" value="追加" onclick="append();"/>
<input type="button" value="删除" onclick="remove();"/><br/><br/>
全选: <input name="quanxuan" type="checkbox" onclick="quanxuan();" />
<input type="button" value="获取选中的值" onclick="get_checkbox();"/>
<br/><br/>
1:<input type="checkbox" name="items" value="1"/>
2:<input type="checkbox" name="items" value="2"/>
3:<input type="checkbox" name="items" value="3"/>
<br/><br/>
<input type="radio" name="sex" value="0" checked/>男
<input type="radio" name="sex" value="1"/>女
<input type="button" id="get_sex" value="获取选中的性别" onclick="get_sex();"/><br/><br/>
<input type="button" value="获取所有文本框的值" onclick="get_all_text();"/><br/><br/>
<select id="select_id">
<option value="1">值1</option>
<option value="2">值2</option>
<option value="1">值3</option>
</select>
<input type="button" value="获取下拉框选中的值" onclick="get_option();"/>
<!-- 分享功能的代码 ShareTo Button BEGIN -->
<a class="shareto_button" href="http://shareto.com.cn/share.html"><img src="http://s.shareto.com.cn/btn/lg-share-cn.gif" width="125" height="21" alt="分享道" style="border:0"/></a>
<script type="text/javascript" src="http://s.shareto.com.cn/js/shareto_button.js" charset="utf-8"></script>
<!-- ShareTo Button END -->
<!-- 加入收藏夹的功能 star-->
<input name="Button" onclick="window.external.AddFavorite(location.href, document.title)" type="button" value="加入收藏夹"/>
<!-- 加入收藏夹的功能 end -->
<!--导入js文件,脚本代码一般写在 /body 前面 -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//使用 $(function(){});是保证页面加载完成之后再去加载里面的方法
$(function(){
//1. $.each(list,function(i,v){}); 这个是常用的遍历,相当于for循环 list:要循环的数据 i:循环是取出的下标 v:循环是取出的值 退出循环 return false;
var a = [];//创建一个数组 或者 var a = new Array();
a.push("学习"); // 添加到数组的最后
a.push(918);
$.each(a,function(i,v){
//alert(v);
});
});
//----选择器 id用#id名字 class用.class的名字 标签就直接标签的符号
//绑定点击事件,同理,其他焦点事件什么的也是这么绑定的 如：鼠标经过 $("a").mouseover(function(){});
$("#btn").click(function(){
//控件类取值 $("").val(); 设值 $("").val("值");
//标签类的取值: $("").html(); 设置 $("").html("值"); 这个常用于拼接网页的页面,然后展示
//还有个.text() 文本值
//或者 document.getElementById("id").innerHTML="值";
//获取文本框的值
var txt = $("#txt").val();
$(".txt").val("这个是设置的值");
});
//改变div的样式,这个是点击事件，和上面的一样的效果
function changeBg(){//这个是一个函数,相当于java里的方法
$("#bg_color_div").addClass("div_bg");
}
//鼠标进过和离开事件一起设置 hover(over, out)
$(".changr_bg").hover(function(){
$(this).css("background","#000");//修改背景颜色
},function(){
$(this).css("background", "#9932cc");
});
//div的显示和影藏
$(".show_hend").click(function(){
if(document.getElementById('changr_bg').style.display=="none"){//判断div是否被隐藏
$("#changr_bg").show();
}else{
//或者 document.getElementById('id').style.display="none"; none:隐藏; inline(或者直接""):显示；
$("#changr_bg").hide();
}
});
//追加
function append(){
$("#append").append("<a href='#'>append的内容</a>");
}
//删除元素
function remove(){
$("#append").remove();
}
//复选框的全选和全不选
function quanxuan(){
$("input[name='quanxuan']").each(function(){
if($(this).attr("checked")){
$("input[name='items']").attr("checked",true);// .attr();是用来添加属性的
}else{
//$("input[name='items']").attr("checked",false);
$("input[name='items']").removeAttr("checked");//这个就是移除掉属性
}
});
}
//设置复选框默认选中,如果你要指定哪一个的话就使用$("#id).attr("checked",true);
//或者 document.getElementById("id").checked=true;
$("input[name='items']").attr("checked",true);
//获取复选框的值
function get_checkbox(){
var ids = "";
if($("input[name='items']:checked").length>0){
$("input[name='items']").each(function(){
if($(this).attr("checked")){//如果要未选中的 ==false 就可以了
ids += $(this).val()+",";
}
});
alert(ids);
}else{
alert("请选择你要删除的数据！");
}
}
//获取单选框选中的值
function get_sex(){
var sex = $("input[name='sex']:checked").val();
alert(sex);
}
//鼠标双击事件
$("div").dblclick(function(){
$(this).css("background", getRandomColor());
});
//获取所有文本框的值
function get_all_text(){
$("input:text").each(function(index){
var v = this.value;
if(v != undefined && v != ""){
alert(v);
}
});
}
//让下拉框某个值选中
$("#select_id").val("2");
//获取下拉框选中的值(注意:下拉框里的value属性指定的值是提交的值,外面的是显示的值)
function get_option(){
//var v = $("#select_id").find("option:selected").val();
var v = $("#select_id").val();
alert(v);
}
//产生随机颜色的方法
function getRandomColor(){
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}
/*延迟显示 setTimeout(function(){
延迟显示的内容.
},"5000");
*/
/*
让文本框不能修改属性
readonly="readonly" :这个表单提交还能取到值
disabled="disabled" :这个表单提交是后台不能取到值
*/
//最重要的方法,是对Ajax的请求的封装 如果不是使用json传递的话就删掉 ,"json"
//Ajax 主要特点，异步请求，局部刷新
//异步请求：在加载的同时执行代码(也就是，边加载着页面，边执行着异步任务),后续代码还会执行
//传参可以也可以直接在url里传，如果没有参数,第二个参数为 {}或者null
//第二个参数也可以 "参数名=参数值,参数2=值" 这样用引号也可以
//$.post("url",{id:"参数值"},function(data){//data是回调函数的返回值
//},"json");
/*
判断组件是否被选中（也就是是否有焦点）返回boolean值
document.activeElement.id=="组件的id"
*/
/*
--js中的跳转:location.href="路径";
--让页面刷新:window.location.reload();
--提交:document.f表单name.submit(); | $("#id").submit();
--最简单的提示用户是否要删除:
<a href="" onclick="confirm('是否删除?')"></a>会先执行onclick,按'是'返回true就会执行href
--获取表单的所有值 var c = $("#form表单的id").serialize(); 取值的是拼接好的 name="值"这种的
--js中 iframe 架构里的跳转，就是左边点击，右边显示页面的那种
例：
main.jsp左右:
<iframe src="url地址" width="10
评论0
最新资源