Jquery的事件操作和文档操作_优就业
2017-01-05 10:33
411 查看
IT优就业 2016-12-19 17:39
对于熟悉前端开发的小伙伴，相信对于Jquery一定不陌生，相对于JavaScript的繁琐，Jquery更加的简洁，当然简洁不意味着简单，我们可以使用Jquery完成我们想要实现全部功能，这里为小白们分享一下关于Jquery的事件和文档操作，便于小白们快速上手。
Web前端：www.ujiuye.com
一、事件操作：
<html>
<head>
<title>Jquery事件操作测试</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style>
.ul{min-width:300px;height:25px;}
.ul2{margin-top:20px;}
.ul li{float:left;min-width:50px;height:25px;line-height:25px;margin-left:10px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}
</style>
</head>
<body>
<ul class="ul ul1" id="ul1">
<li class="li li1" id="li1">第一项</li>
<li class="li li2" id="li2">第二项</li>
<li class="li li3" id="li3">第三项</li>
<li class="li li4" id="li4">第四项</li>
<li class="li li5" id="li5">第五项</li>
</ul>
<ul class="ul ul2" id="ul2">
<li class="li li1" id="li1">第一项<span>span</span></li>
<li class="li li2" id="li2">第二项</li>
<li class="li li3" id="li3">第三项</li>
<li class="li li4" id="li4">第四项</li>
<li class="li li5" id="li5">第五项</li>
</ul>
<input type='text' value="text" id="text">
<input type='password' value="password" disabled="disabled">
<input type='number' value="number">
<input type='radio' value="radio">radio
<input type='checkbox' value="checkbox">checkbox
</body>
<script>
var jq = jQuery.noConflict();//jQuery 名称冲突
jq(document).ready(function(){
alert("页面加载完成");
});
jq(".ul li").click(function(){
//alert(jq(this).text());//不带格式输出
//alert(jq(this).html());//带格式输出
});
jq("#ul1 li").click(function(){
//alert(jq(this).attr("class"));
if(jq(this).hasClass("li1")){//元素是否包含指定的class
alert(true);
}else{
alert(false);
}
});
jq("#ul1 li.li1").click(function(){
alert("#ul1 li.li1-----------" + jq(this).attr("class"));
});
jq(".ul1 li:first").click(function(){
alert(".ul1 li:first-----------" + jq(this).attr("class"));
});
jq(".ul1 li:last").click(function(){
alert(".ul1 li:last-----------" + jq(this).attr("class"));
});
jq(".ul1 li:even").click(function(){
alert(".ul1 li:even-----------" + jq(this).attr("class"));
});
jq(".ul1 li:odd").click(function(){
alert(".ul1 li:odd-----------" + jq(this).attr("class"));
});
jq(".ul1 li:eq(1)").click(function(){
alert(".ul1 li:eq(1)-----------" + jq(this).attr("class"));
});
jq(":input").click(function(){
alert(":input-----------" + jq(this).val());
});
jq(":text").click(function(){
alert(":text-----------" + jq(this).val());
});
jq(":enabled").click(function(){
alert(":enabled-----------" + jq(this).val());
});
jq(":disabled").click(function(){
alert(":disabled-----------" + jq(this).val());
});
jq("#text").change(function(){//控件失去焦点后，检查内容是否变化，变化激活
alert(".change()-----------" + jq(this).val());
});
jq("#text").focus(function(){//控件获得焦点
alert(".focus()-----------" + jq(this).val());
});
</script>
</html>
二、文档操作：
<html>
<head>
<title>jQuery文档操作</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style>
ul{display:inline-block;}
li{float:left;min-width:80px;height:40px;line-height:40px;margin-right:20px;border-radius:5px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}
p.select{color:#f54372;}
</style>
</head>
<body>
<p class="p p1" id="p1">第一段文字</p>
<p class="p p2" id="p2">第二段文字</p>
<ul class="ul1">
<li>addClass()</li>
<li>after()</li>
<li>before()</li>
<li>append()</li>
<li>attr()</li>
<li>empty()</li>
<li>hasClass()</li>
<li>html()</li>
</ul>
<br/><br/>
<ul class="ul2" style="position:relative;">
<li>css()</li>
<li>height()</li>
<li>offset()</li>
<li>offsetParent()</li>
<li>position()</li>
<li>scrollLeft()</li>
<li>scrollTop()</li>
<li>width()</li>
</ul>
</body>
<script>
$(".ul1 li:eq(0)").click(function(){
$(".p1").addClass("select");
});
$(".ul1 li:eq(1)").click(function(){
$(".p1").after("after");
});
$(".ul1 li:eq(2)").click(function(){
$(".p1").before("before");
});
$(".ul1 li:eq(3)").click(function(){
$(".p1").append("append");
});
$(".ul1 li:eq(4)").click(function(){
alert($(".p1").attr("id"));
});
$(".ul1 li:eq(5)").click(function(){
$(".p1").empty();
});
$(".ul1 li:eq(6)").click(function(){
alert($(".p1").hasClass("第一段文字"));
});
$(".ul1 li:eq(7)").click(function(){
$(".p1").html("html");
});
$(".ul2 li:eq(0)").click(function(){
$(".p1").css("color","red");
$(".p2").css({"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"});
});
$(".ul2 li:eq(1)").click(function(){
alert($(this).height());
$(this).height("50px");
});
$(".ul2 li:eq(2)").click(function(){
alert("left:"+$(this).offset().left+" top:"+$(this).offset().top);
});
$(".ul2 li:eq(3)").click(function(){
$(this).offsetParent().css("background-color", "red");
});
$(".ul2 li:eq(4)").click(function(){
alert("left:"+$(this).position().left+" top:"+$(this).position().top);
});
$(".ul2 li:eq(5)").click(function(){
alert("scrollLeft:"+$(this).scrollLeft());
});
$(".ul2 li:eq(6)").click(function(){
alert("scrollTop:"+$(this).scrollTop());
});
$(".ul2 li:eq(7)").click(function(){
alert("widht:"+$(this).width());
$(this).width("200px");
});
</script>
</html>
更多Web前端知识尽在优就业IT培训：www.ujiuye.com
本文为头条号作者发布，不代表今日头条立场。
对于熟悉前端开发的小伙伴，相信对于Jquery一定不陌生，相对于JavaScript的繁琐，Jquery更加的简洁，当然简洁不意味着简单，我们可以使用Jquery完成我们想要实现全部功能，这里为小白们分享一下关于Jquery的事件和文档操作，便于小白们快速上手。
Web前端：www.ujiuye.com
一、事件操作：
<html>
<head>
<title>Jquery事件操作测试</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style>
.ul{min-width:300px;height:25px;}
.ul2{margin-top:20px;}
.ul li{float:left;min-width:50px;height:25px;line-height:25px;margin-left:10px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}
</style>
</head>
<body>
<ul class="ul ul1" id="ul1">
<li class="li li1" id="li1">第一项</li>
<li class="li li2" id="li2">第二项</li>
<li class="li li3" id="li3">第三项</li>
<li class="li li4" id="li4">第四项</li>
<li class="li li5" id="li5">第五项</li>
</ul>
<ul class="ul ul2" id="ul2">
<li class="li li1" id="li1">第一项<span>span</span></li>
<li class="li li2" id="li2">第二项</li>
<li class="li li3" id="li3">第三项</li>
<li class="li li4" id="li4">第四项</li>
<li class="li li5" id="li5">第五项</li>
</ul>
<input type='text' value="text" id="text">
<input type='password' value="password" disabled="disabled">
<input type='number' value="number">
<input type='radio' value="radio">radio
<input type='checkbox' value="checkbox">checkbox
</body>
<script>
var jq = jQuery.noConflict();//jQuery 名称冲突
jq(document).ready(function(){
alert("页面加载完成");
});
jq(".ul li").click(function(){
//alert(jq(this).text());//不带格式输出
//alert(jq(this).html());//带格式输出
});
jq("#ul1 li").click(function(){
//alert(jq(this).attr("class"));
if(jq(this).hasClass("li1")){//元素是否包含指定的class
alert(true);
}else{
alert(false);
}
});
jq("#ul1 li.li1").click(function(){
alert("#ul1 li.li1-----------" + jq(this).attr("class"));
});
jq(".ul1 li:first").click(function(){
alert(".ul1 li:first-----------" + jq(this).attr("class"));
});
jq(".ul1 li:last").click(function(){
alert(".ul1 li:last-----------" + jq(this).attr("class"));
});
jq(".ul1 li:even").click(function(){
alert(".ul1 li:even-----------" + jq(this).attr("class"));
});
jq(".ul1 li:odd").click(function(){
alert(".ul1 li:odd-----------" + jq(this).attr("class"));
});
jq(".ul1 li:eq(1)").click(function(){
alert(".ul1 li:eq(1)-----------" + jq(this).attr("class"));
});
jq(":input").click(function(){
alert(":input-----------" + jq(this).val());
});
jq(":text").click(function(){
alert(":text-----------" + jq(this).val());
});
jq(":enabled").click(function(){
alert(":enabled-----------" + jq(this).val());
});
jq(":disabled").click(function(){
alert(":disabled-----------" + jq(this).val());
});
jq("#text").change(function(){//控件失去焦点后，检查内容是否变化，变化激活
alert(".change()-----------" + jq(this).val());
});
jq("#text").focus(function(){//控件获得焦点
alert(".focus()-----------" + jq(this).val());
});
</script>
</html>
二、文档操作：
<html>
<head>
<title>jQuery文档操作</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style>
ul{display:inline-block;}
li{float:left;min-width:80px;height:40px;line-height:40px;margin-right:20px;border-radius:5px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}
p.select{color:#f54372;}
</style>
</head>
<body>
<p class="p p1" id="p1">第一段文字</p>
<p class="p p2" id="p2">第二段文字</p>
<ul class="ul1">
<li>addClass()</li>
<li>after()</li>
<li>before()</li>
<li>append()</li>
<li>attr()</li>
<li>empty()</li>
<li>hasClass()</li>
<li>html()</li>
</ul>
<br/><br/>
<ul class="ul2" style="position:relative;">
<li>css()</li>
<li>height()</li>
<li>offset()</li>
<li>offsetParent()</li>
<li>position()</li>
<li>scrollLeft()</li>
<li>scrollTop()</li>
<li>width()</li>
</ul>
</body>
<script>
$(".ul1 li:eq(0)").click(function(){
$(".p1").addClass("select");
});
$(".ul1 li:eq(1)").click(function(){
$(".p1").after("after");
});
$(".ul1 li:eq(2)").click(function(){
$(".p1").before("before");
});
$(".ul1 li:eq(3)").click(function(){
$(".p1").append("append");
});
$(".ul1 li:eq(4)").click(function(){
alert($(".p1").attr("id"));
});
$(".ul1 li:eq(5)").click(function(){
$(".p1").empty();
});
$(".ul1 li:eq(6)").click(function(){
alert($(".p1").hasClass("第一段文字"));
});
$(".ul1 li:eq(7)").click(function(){
$(".p1").html("html");
});
$(".ul2 li:eq(0)").click(function(){
$(".p1").css("color","red");
$(".p2").css({"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"});
});
$(".ul2 li:eq(1)").click(function(){
alert($(this).height());
$(this).height("50px");
});
$(".ul2 li:eq(2)").click(function(){
alert("left:"+$(this).offset().left+" top:"+$(this).offset().top);
});
$(".ul2 li:eq(3)").click(function(){
$(this).offsetParent().css("background-color", "red");
});
$(".ul2 li:eq(4)").click(function(){
alert("left:"+$(this).position().left+" top:"+$(this).position().top);
});
$(".ul2 li:eq(5)").click(function(){
alert("scrollLeft:"+$(this).scrollLeft());
});
$(".ul2 li:eq(6)").click(function(){
alert("scrollTop:"+$(this).scrollTop());
});
$(".ul2 li:eq(7)").click(function(){
alert("widht:"+$(this).width());
$(this).width("200px");
});
</script>
</html>
更多Web前端知识尽在优就业IT培训：www.ujiuye.com
本文为头条号作者发布，不代表今日头条立场。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery选择器大全、属性操作、css操作、文档、事件等
- 详解Jquery的事件操作和文档操作
- jQuery 之 （二）事件操作、jq对文档的操作、属性选择器使用
- 详解Jquery的事件操作和文档操作
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- Jquery的事件操作和文档操作
- jQuery(二)DOM增删改，样式操作，文档加载，事件，冒泡，事件对象
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
- jQuery操作输出重复问题(click 事件中嵌套)
- jQuery 参考手册 - 文档操作
- jquery 文档操作
- jquery操作事件
- 基于jquery的树-xtree操作文档
- JQuery文档分析2--JQuery核心与属性操作
- 可视化webpart基础开发——利用事件接收器实现同步操作两个文档库（添加、删除、修改文档）
- ExtJs4 笔记（1） ExtJs大比拼JQuery：Dom文档操作
- .JQuery文档分析2--JQuery核心与属性操作
- jQuery 1.7 正式版已经可以下载使用。jQuery是一个JavaScript库，它简化了HTML文档遍历，事件处理，动画和为网络快速发展的Ajax交互。jQuery 1.7 版本加入了新的事件API .on() 和 .off()，提
- Js&Jquery文档加载完事件