初始jQuery-优快云博客

本文介绍了jQuery的基本功能，包括DOM操作、事件处理、样式控制等，并探讨了jQuery的优势及不同版本的区别。此外，还详细讲解了jQuery在实际项目中的应用技巧，如设置样式、事件冒泡处理等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Jquery能做什么

访问和操作DOM元素（注册事件，设置样式）

l控制页面样式

对页面事件进行处理

扩展新的jQuery插件（高级内容）

与Ajax技术完美结合（S2最后易买网ajax）

2.Jquery的优势

体积小，压缩后只有100KB左右

强大的选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

3.Jquery主要三个版本

Compressed：压缩版：在发布的时候使用min

unCompressed：非压缩版

Vsdoc：注释版：在开发阶段

4.关于window.onload和$(function(){})区别

第一点：执行时机

解析：window.onload等待页面上所有资源（html标签，css，img，js）都加载完成后，才执行，包括（文本素材，图片，js，css）

$(function(){}):等待页面上的标签加载完成后就开始执行

第二点：执行次数

Window.onload只能调用一次

$(function(){})可以调用多次

5.通过Jquery设置样式

1.通过$(“选择器”).css(“属性名”,”属性值”);

//这里的书写的属性名和css中书写的一致

2.$(“选择器”).html():获取两个标签之间的html代码

3.$(“选择器”).addClass(“属性值”)

可以动态的改变dom文档结构。进而设置样式。

6.DOM对象和Jquery对象的转换

//高富帅土鳖(girl friend文艺人士！)

Var $domR=$(dom);

Var domR=$domR[0];

jquery

/*dom对象转成Jquery对象 */

var domobj=document.getElementById("myid");

var $obj=$(domobj);

alert($obj.text());*/

/*ds:没钱 jquery 转dom*/

//个人魅力：咱们一起奋斗，买房

var $obj2= $("#myid");

var domobj2=$obj2[0];

7.取消事件冒泡

//取消事件冒泡

//第一道能力检测:分浏览器

event=event||window.event;

if(event.stopPropagation){

event.stopPropagation();

}else{

event.cancelBubble=true;

}*/

$(function(){

//给大div注册事件

$("#mybigdiv").click(function(){

alert('我是大div');

});

//小div

$("#myid").click(function(event){

alert('我是小div');

//UI工程师能力检测

//判定浏览器引擎是IE还是其他浏览器(第一道能力检测)

event=event||window.event;

//第二道能力检测

if(event.stopPropagation){//非IE浏览器

event.stopPropagation();

}else{

//IE浏览器

event.cancelBubble=true;

}

});

8.取消后续内容的执行

$(function(){

$("#myhref").click(function(event){

//能力检测

event=event||window.event;

if(event.PreventDefault){ //非IE下内核 webkit引擎

event.PreventDefault();

}else{

event.returnValue=false; //IE引擎

}

});

<head>
<base href="<%=basePath%>">

<title>My JSP 'day002.jsp' starting page</title>
<style type="text/css">
h1{padding:5px;}

</style>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
$("h1").css("font-size","25px");
});
});

</script>

</head>

<body>

<h1>星星泪</h1>
<p>秒针不停呀<br/><br/>
时针只能紧追随！<br/><br/>
点击查看全部<br/><br/>
<img src="img/1.jpg" style="width:150px;height:150px"></img></p>
</body>
</html>

<head>
<base href="<%=basePath%>">
<style type="text/css">

.kuang{
border:1px solid red;
}

</style>
<title>My JSP 'day003.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">

$(function(){
$("img").click(
function(){
$("img").addClass("kuang");
});
});

</script>


</head>

<body>
<a><img src="img/1.jpg" style="width:150px;height:150px" ></img></a>
</body>
</html>

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'day004.jsp' starting page</title>
<style type="text/css">
h1{padding:5px;}
p{display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
$("h1").css("background-color","pink").next().css("display","block");
});
});

</script>


</head>

<body>
<h1>如何使用叮当网购物？</h1>
<p>方法一：注册成为网站成员<br/>方法二：使用合作企业账号登陆，如新浪微博，QQ，人人网账户</p>
</body>
</html>

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'day005.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
alert("非常完美");
});
});

</script>

</head>

<body>
<h1>请为我们的服务做出评价！</h1>
</body>
</html>

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'day006.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">

$(function(){
var dom=document.getElementById("myid");
dom.onclick=function(){
if(dom.checked){
alert("操作成功,感谢您的使用!");
}
};
});

</script>
</head>

<body>
<input id="myid" type="checkbox"/>接受服务条款
</body>
</html>

<html>
<head>
<base href="<%=basePath%>">
<style type="text/css">
.mydive{
border:red solid 2px;
width:150px;
height:100px;
}

</style>
<title>My JSP 'day007.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">

$(function(){
$("div").addClass("mydive");
$("li").css("display","none");
$("h1").click(function(){
$("li").css("display","");
$("div").css("height","150px");
$("#one").css("background","blue").css("font-size","14px").css("color","white");
$("#two").css("font-size","20px");
});
});

</script>

</head>

<body>
<div>
<h1>新手指南</h1>

<ul>
<li id="one">会员注册</li>
<li id="two">订阅更新</li>
<li>用户协议</li>
<li>常见问题</li>
</ul>
</div>
</body>
</html>

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(
function()
{
var lis=$("li");

lis.mouseover(function() {
$(this).css("background","pink");
});
lis.mouseout(function() {
$(this).css("background","");
});
});
$(
function(){
var dom=document.getElementsByName("#js").innerText;
var js=$("#js").text();
var uu=$("#js").innerText;
}
);
</script>
</head>

<body>
<div>
<ul>
<li> 不再喜欢</li>
</ul>
<ul>
<li> 不再联系</li>
</ul>
</div>


</body>
</html>