jQuery是一个js框架，封装了js的属性和方法。操作方法如下：
1、首先，要定义出页面对应的dom对象（这个不是必须的，可以在页面加载的时候，动态添加到页面尾部）。
2、定义对应的css样式，样式已添加了对ie6等低版本浏览器的支持。
3、初始化控件，当然第一步所说的动态添加，也在这步所示，代码包括初始化和关闭按钮控件。
4、初步做好了弹出框，添加自适应窗口的优化,包括各浏览器中获取宽高方法。
5、最后弹出框增加鼠标拖动的效果，鼠标变十字后就可拖动了，就完成了。
1、jquery选择器$('selector')返回的不是数组，而是封装好的jquery对象。但这个对象有一个特别的地方，就是查询到的节点被以下标为属性，添加到了jquery对象上，所以它看起来像数组，因为它存在一些属性是数字；\x0d\\x0d\2、jquery对象有哪些属性和方法？\x0d\我们可以理解，$('selector')返回了一个对象obj，obj[0]obj[i]总是返回查询到的第i个节点。除此之外，jquery对象还被通过prototype添加了一些方法，即：\x0d\jQueryprototypeeach = function(){}\x0d\jQueryprototypehasClass = function(){}\x0d\jQueryprototypehide = function(){}\x0d\jQueryprototypecss = function(){}\x0d\jQueryprototypeattr = function(){}\x0d\等等。这样的话，$('selector')返回的对象就可以调用这些方法，比如objattr('name')、objcss('color', 'red')。\x0d\\x0d\\x0d\3、jquery方法如何处理多个节点？\x0d\实际上，以上诸如hide、css、attr等方法，在jquery内部都是通过循环来处理各个节点的。但是，如果是要获取节点属性，比如objattr('name')，显然这个只能返回一个字符串，所以类似的方法都是获取节点集合中的第一个节点的属性。也就是说，虽然返回的节点很多，但只有第一个会被处理。\x0d\\x0d\4、为什么jquery可以链式调用？\x0d\在jquery中，很多同名的方法通过参数个数的不同实现不同的功能，比如css方法，如果传一个参数则表示获取css属性；如果传两个参数，则表示给节点添加某个属性，并赋值为第二个参数。attr、width等也是这样的处理。对于方法的返回值，除了获取属性值、获取css值等需要返回实际值的方法外，当css方法、attr方法表示为为节点添加属性、css样式时，是不需要返回值的，但jquery让这些方法返回了this，也就是返回了调用者自身，所以可以链式调用。
jQuery的插件使用方法具体步骤如下：
一、调用库文件
使用jQuery必须链接jQuery的库文件，无论是压缩版还是正常版，必须至少在网页中链接一个，如：
<script type="text/javascript" src="jqueryjs"></script>
二、调用Jquery插件
应用做好的jQuery插件效果。
比如jQuery官网制作的插件jQuery，在使用它时不仅要链接库文件，还要链接UI文件以及UI的CSS文件，如：
<link href="http://ajaxgoogleapiscom/ajax/libs/jqueryui/18/themes/base/jquery-uicss" rel="stylesheet" type="text/css"/> <script src="http://ajaxgoogleapiscom/ajax/libs/jquery/14/jqueryminjs"></script> <script src="http://ajaxgoogleapiscom/ajax/libs/jqueryui/18/jquery-uiminjs"></script>
经过这几部的操作，jQuery插件效果才能真正被引用到网页文件中起到作用。
Jquery是一个优秀的Javascript库，还兼容各种浏览器。jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。
jquery 失去焦点隐藏菜单：
本实例主要用到了一个切换显示与隐藏的事件 hover 与点击事件 click;
以及is("hidden")对某个元素状态的判断。
<html>
<head>
<title></title
<style>
{margin:0px;padding:0px;}
body{background:#cccccc;}
ul,ol{list-style-type:none;display:none;}
menu div{
height:35px;
line-height:35px;
background:#99CC33;
border-bottom:1px solid #333333;
text-align:center;
cursor:pointer;
}
ul{height:auto;margin:1px auto;background:
#99CCCC;text-align:center;}
ul li{width:220px;height:30px;line-height:30px;text-align:center;
}
ul li:hover{background:#ccff33;}
ul li a{text-decoration:none;}
</style>
<script src="/jqueryjs"></script>
<script>
$(function(){
var dv=$("menu div");
dvclick(function(){ //出发页面的其他部分
var aixuexi=$(this);
if(aixuexinext("ul")is(":hidden")){
aixuexinext("ul")show();
}else{
aixuexinext("ul")hide();
<ul>
<li><a href="siteInfophp" target="main">网站基本信息</a></li>
<li><a href="updateSitephp" target="main">网站配置</a></li>
</ul>
<div>权限管理</div>
<ul>
<li><a href="userGroupListphp" target="main">用户组列表</a></li>
<li><a href="usersPowerphp" target="main">用户权限列表</a></li>
</ul>
<div>用户管理</div>
<ul>
<li><a href="userListphp" target="main">用户列表</a></li>
<li><a href="addUserphp" target="main">添加用户</a></li>
</ul>
</div>
</body>
</html>。
欢迎分享，转载请注明来源：浪漫分享网
微信扫一扫
支付宝扫一扫
评论列表（0条）