Jquery的事件操作和文档操作_优就业

最新推荐文章于 2025-08-21 12:39:49 发布

转载最新推荐文章于 2025-08-21 12:39:49 发布 · 219 阅读

本文通过实例介绍了Jquery的事件操作及文档操作，包括点击事件、焦点事件、样式修改、属性获取等常用操作。

IT优就业 2016-12-19 17:39

对于熟悉前端开发的小伙伴，相信对于Jquery一定不陌生，相对于JavaScript的繁琐，Jquery更加的简洁，当然简洁不意味着简单，我们可以使用Jquery完成我们想要实现全部功能，这里为小白们分享一下关于Jquery的事件和文档操作，便于小白们快速上手。

Jquery的事件操作和文档操作_优就业

Web前端：www.ujiuye.com

一、事件操作：

<html>

<head>

<title>Jquery事件操作测试</title>

<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>

</ul>

<input type='radio' value="radio">radio

<input type='checkbox' value="checkbox">checkbox

</body>

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>

<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>

<li>addClass()</li>

<li>after()</li>

<li>before()</li>

<li>append()</li>

<li>empty()</li>

<li>hasClass()</li>