JQUERY不过如此.docx
- 文档编号:18535474
- 上传时间:2023-08-19
- 格式:DOCX
- 页数:56
- 大小:34.80KB
JQUERY不过如此.docx
《JQUERY不过如此.docx》由会员分享,可在线阅读,更多相关《JQUERY不过如此.docx(56页珍藏版)》请在冰点文库上搜索。
JQUERY不过如此
锋利的JQUERY
一、认识JQuery
1-编写简单的JQUERY
1.弹出helloword提示框(JQUERY写法)
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
$(document).ready(function(){
alert("helloworld!
");
});
$(document).ready(function(){
alert("helloworld2!
!
");
})
两个提示框都会弹出,按顺序先弹出helloword1再弹出helloword2!
以下代码为简写
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
$(function(){
alert("helloworld!
!
");
});
$(function(){
alert("helloworld2!
!
");
});
2.弹出helloword提示框(JavaScript写法)
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
window.onload=function(){//窗口加载
alert("helloworld!
!
");
};
window.onload=function(){
alert("helloworld2");
};
无论有几个弹出框只弹出一个而且是最后一个即helloworld2
2-JQuery对象与DOM对象的转换
1.JQuery对象转换为DOM对象(DOM判断)
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
$(document).ready(function(){
var$cr=$("#cr");//取得jQuery对象
varcr=$cr[0];//转换为DOM对象
//varcr=$cr.get(0);//第二种转换为DOM对象的方式
$cr.click(function(){//当点击的时候
if(cr.checked){//如果表单被选中
alert("谢谢你的注册!
!
!
");
}
})
})
如果同意以上条件请点击!
!
2.DOM对象转换为JQuery对象
varcr=document.getElementById("cr");//取得DOM
var$cr=$(cr);//转换为JQuery对象
3.JQuery方式判断
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
$(document).ready(function(){
var$cr=$("#cr");//jQuery对象
$cr.click(function(){
if($cr.is(":
checked")){//jQuery方式判断
alert("感谢你的支持!
你可以继续操作!
");
}
})
});
如果同意以上条件请点击!
!
二、JQuery选择器
1-认识JQuery选择器
JQuery选择器完全继承了CSS的风格,利用JQuery选择器,可以非常快捷的找到特定的DOM元素,然后为它们添加相应的行为。
例子:
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
includepage="css/css.jsp">
include>
$(".demo").click(function(){//取得DOM元素并操作
alert("jQuerydemo!
");
})
2-三种DOM取得元素的方式
通过标签名称获得元素
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
includepage="css/css.jsp">
include>
window.onload=function(){
varitems=document.getElementsByTagName("p");//通过标签名称取得元素
for(vari=0;i items[i].onclick=function(){ alert("fuck! "); } } }
叶子
花
通过表单ID和表单名称取得元素—>实现表格隔行变色
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
includepage="css/css.jsp">
include>
window.onload=function(){
tb=document.getElementById("table");
tbodys=document.getElementsByTagName("tbody")[0];
trs=document.getElementsByTagName("tr");
for(vari=0;i if(i%2==0){ trs[i].style.backgroundColor="#888"; } } }
通过ID,名称和NAME取的元素,并操作-点击按钮后弹出选中的表单个数
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
includepage="css/css.jsp">
include>
window.onload=function(){
varbtn=document.getElementById("btn");
btn.onclick=function(){
vararrays=newArray();
varitems=document.getElementsByName("check");
for(vari=0;i if(items[i].checked){ arrays.push(items[i].value); } } alert("选中的个数是: "+arrays.length); } btn1.onclick=function(){ varits=document.getElementsByName("check"); for(vari=0;i if(its[i].type="checkbox"){ its[i].checked=true; } } } btn2.onclick=function(){ varits=document.getElementsByName("check"); for(vari=0;i if(its[i].type="checkbox"){ its[i].checked=false; } } } } 3-jQuery获取元素的方法 对应DoM中的相应功能 <%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
includepage="css/css.jsp">
include>
$(function(){
$('p').click(function(){
//取得P元素并添加onclick事件
alert("水浒!
");
})
})
浪子
燕青
对应DoM中的相应功能
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
includepage="css/css.jsp">
include>
$(function(){
$('#tbtbodytr:
even').css("backgroundColor","red");
$('#tbtbodytr:
odd').css("backgroundColor","green");
//取得id为tb下的tbody下的tr偶数的为红色奇数的为绿色
//第一行以0表示
})
对应DoM中的相应功能
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
includepage="css/css.jsp">
include>
$(function(){
$('#btn').click(function(){
varitems=$("input[name='check']:
checked");
alert("选中的个数"+items.length);
});
$('#btn1').click(function(){
$("input[name='check']").each(function(){
//遍历
$(this).attr("checked",true);
//attr(name,value)设置属性的值
});
});
$('#btn2').click(function(){
$("input[name='check']").each(function(){
//遍历
$(this).attr("checked",false);
//attr(name,value)设置属性的值
});
});
});
4-案例-->隐藏与显示
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
*{
margin:
0;
padding:
0;
}
body{
font-size:
12px;
text-align:
center;
}
a{
color:
#04D;
text-decoration:
none;
}
a:
hover{
color:
#F50;
text-decoration:
underline;
}
.SubCategoryBox{
width:
600px;
margin:
0auto;
text-align:
center;
margin-top:
40px;
}
.SubCategoryBoxul{
list-style:
none;
}
.SubCategoryBoxulli{
display:
block;
float:
left;
width:
200px;
line-height:
20px;
}
.showmore{
clear:
both;
text-align:
center;
padding-top:
10px;
}
.showmorea{
display:
block;
width:
120px;
margin:
0auto;
line-height:
24px;
border:
1pxsolid#AAA;
}
.showmoreaspan{
padding-left:
15px;
background:
url(img/down.gif)no-repeat00;
}
.promoteda{
color:
red;
}
includepage="css/css.jsp">
include>
$(function(){
var$category=$('ulli:
gt(5):
not(:
last)');
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JQUERY 不过如此