您的位置：首页 > Web前端 > JQuery

锋利的jQuery第一章

2019-08-07 19:08 1251 查看

原文链接：https://www.geek-share.com/detail/2616150201.html

以前总是感觉js,html,css,jquery这些东西太繁杂，看着都头晕，想着做后台，不用管这些东西，可是工作之中发现，很多前台后台结合的地方，比如通过ajax发送到后台，如果不懂得jQuery,感觉很被动，于是，我也不管那么多了，从现在开始学习jQuery了。

　　我喜欢看书本学习，以后博客将记录我学习的笔记：

1,window.reload()和$(document).ready()的区别：

2,有关菜单的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >

$(document).ready(function(){  //等待所有dom绘制完成后就执行

$(".level2").hide();    //加载时隐藏class="level2"

$(".level1 > a").click(function(){    //选择class="level1"下的a
$(this).addClass("current")        //给当前元素a添加一个样式
.next().show()                        //下一个元素ul显示
.parent().siblings().children("a").removeClass("current")
//父元素li的同辈元素li的子元素a移除样式
.next().hide();                        //a的下一个元素ul隐藏
return false;
});

});
</script>
<title>菜单的例子</title>
</head>
<body>

<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none">衬衫</a>
<ul class="level2">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖T衫</a></li>
<li><a href="#none">长袖T衫</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">卫衣</a>
<ul class="level2">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">裤子</a>
<ul class="level2">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

我实验了一下，选择level1下的a可以有两种方式：

(1)$(".level1 > a") (2)$(".level1 a")

3,jQuery对象和Dom对象的区别

(1)每一份Dom都可以表示为一棵树。如下图：

Dom对象可以使用Javascript的方法，不能使用jQuery的方法：

var domObj = document.getElementById("id");    //获取Dom对象
var ObjHTML = domObj.innerHTML;                //使用js的属性innerHTML

(2)jQuery对象是jQuery包装Dom对象以后产生的对象。

jQuery只可以使用jQuery的方法：

$("#foo").html();    //获取id为foo元素的html代码

(3)

jQuery对象转为Dom对象：

var $cr = $("#cr");    //jQuery对象
var cr = $cr[0];        //Dom对象

var cr = $cr.get(0);    //Dom对象

Dom对象转为jQuery对象：

var cr = document.getElementById("cr");    //Dom对象
var $cr = $(cr);                //jQuery对象

4，一个小例子：

<input type="checkbox" id="cr" /><label for="cr">我同意上面的制度</label>

var $cr = $("#cr");    //取出来id=cr的对象
$cr.click(function(){
if($cr.is(":checked")){  //is(":checked")判断JQuery对象是否被选择中
alert("谢谢您同意");
}
});

还可以这样写：

var $cr = $("#cr");    //取出来id=cr的对象
var cr = $cr[0];
$cr.click(function(){
if(cr.checked){  //js方法判断
alert("谢谢您同意");
}
});

5,开发工具和插件下载：

(1)下载插件jQuery_api_for_dw4安装到dreamweaver中可以提示jQuery函数。

下载地址：http://code.google.com/p/jquery-api-zh-cn/downloads/list

安装：命令---扩展管理---安装扩展---选择

(2)开发工具APtana，本身提供html，css,js提示功能

下载地址：http://www.aptana.com/

对于jQuery提示插件下载地址：https://github.com/aptana/javascript-jquery.ruble

这个插件叫jquery.ruble.后缀是.sdocml，只要把他放到你的项目下面就行了。

转载于:https://www.cnblogs.com/bkwz/p/3840029.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航