扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
1、首先新建html文档，向下查找兄弟标签：.next()。
成都创新互联主要从事成都网站制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务黎城,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
2、jquery支持链式操作，向下查找兄弟标签的兄弟标签：.next().next()。
3、接着向下查找所有兄弟标签：nextAll()，向下查找一直找到某个条件为止：nextUntil('条件')。
4、向上查找兄弟标签：.prev()，向上查找所有兄弟标签：prevAll()，向上查找一直找到某个条件为止：prevUntil('条件')。
5、最后查找父标签：parent()，查找所有父标签：parents()，如果没有人拦着，会一直找找到最上面的父标签（没什么用），条件满足时停止查找：parentsUntil('body') 。
本文实例为大家分享了jquery菜单导航栏的实现代码，供大家参考，具体内容如下
1.
HTML代码
!DOCTYPE
html
html
head
meta
charset="UTF-8"
title竖直导航菜单/title
link
href="css/Vmenu.css"
rel="stylesheet"
/
script
src="js/jquery-2.1.4.min.js"/script
script
$(function(){
//垂直导航栏，点击下拉子菜单
$(".maina").click(function(){
$(this).next().slideToggle(500)
.parent().siblings().find(".child").slideUp(500);
})
//水平导航栏，鼠标经过下拉导航栏
$(".hmain").hover(function(){
$(this).find(".child").slideToggle(500)
.parent().siblings().find(".child").slideUp();
})
})
/script
/head
body
!--垂直导航栏--
ul
class="content"
li
class="main"a
href="#"菜单
1/a
ul
class="child"
li菜单1.1/li
li菜单1.2/li
li菜单1.3/li
/ul
/li
li
class="main"a
href="#"菜单
2/a
ul
class="child"
li菜单2.1/li
li菜单2.2/li
li菜单2.3/li
li菜单2.4/li
/ul
/li
li
class="main"a
href="#"菜单
3/a
ul
class="child"
li菜单3.1/li
li菜单3.2/li
li菜单3.3/li
/ul
/li
li
class="main"a
href="#"菜单
4/a
ul
class="child"
li菜单4.1/li
li菜单4.3/li
/ul
/li
li
class="main"a
href="#"菜单
5/a
ul
class="child"
li菜单5.1/li
li菜单5.2/li
/ul
/li
/ul
!--水平导航栏--
ul
class="content"
li
class="hmain"a
href="#"菜单
1/a
ul
class="child"
li菜单1.1/li
li菜单1.2/li
li菜单1.3/li
/ul
/li
li
class="hmain"a
href="#"菜单
2/a
ul
class="child"
li菜单2.1/li
li菜单2.2/li
li菜单2.3/li
li菜单2.4/li
/ul
/li
li
class="hmain"a
href="#"菜单
3/a
ul
class="child"
li菜单3.1/li
li菜单3.2/li
li菜单3.3/li
/ul
/li
li
class="hmain"a
href="#"菜单
4/a
ul
class="child"
li菜单4.1/li
li菜单4.3/li
/ul
/li
li
class="hmain"a
href="#"菜单
5/a
ul
class="child"
li菜单5.1/li
li菜单5.2/li
/ul
/li
/ul
/body
/html
2.
CSS代码
*{
margin:
0px;
padding:
0px;
}
.content{
margin:
40px
100px;
float:
left;
}
ul
,li{
list-style:
none;
}
.main,.hmain{
width:
150px;
background:
#222;
font-size:
16px;
text-align:
center;
cursor:
pointer;
line-height:
40px;
color:
white;
}
.maina,.hmaina{
text-decoration:
none;
color:
white;
display:
inline-block;
width:
150px;
min-height:
40px;
}
.main:hover,.hmain:hover{
background:
black;
}
.child{
background:
#444;
display:none;
}
.child
li:hover{
background:
#333333;
}
/*垂直导航栏左浮动*/
.hmain{
float:
left;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
!DOCTYPE HTML
html lang="en"
head
meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /
meta http-equiv="Content-Type" content="text/html;charset=UTF-8"
titletest/title
link rel="stylesheet" href="css.css" type="text/css" media="screen"
script src=""/script
/head
body
style type="text/css"table tr td{border:1px solid #ddd;padding:15px;text-align: center;background: #f3f3f3}input{text-align: center;}/style
div/div
div/div
table id="t"
tr
td/tdtdname/tdtd单价/tdtd数量/tdtd总价/tdtddel/td
/tr
tr
td1/tdtdhtc/tdtd￥span1395.00/span/tdtdinput type='button' value='-' onclick='less(this)'input type='text' style='width:30px' name='num' value='1'input type='button' value='+' onclick='more(this)'/tdtdspan/span/tdtdspan onclick='del(this)'del/span/td
/tr
tr
td2/tdtdapple/tdtd￥span5555.00/span/tdtdinput type='button' value='-' onclick='less(this)'input type='text' style='width:30px' name='num' value='1'input type='button' value='+' onclick='more(this)'/tdtdspan/span/tdtdspan onclick='del(this)'del/span/td
/tr
tr
td3/tdtdMac/tdtd￥span9999/span/tdtdinput type='button' value='-' onclick='less(this)'input type='text' style='width:30px' name='num' value='1'input type='button' value='+' onclick='more(this)'/tdtdspan/span/tdtdspan onclick='del(this)'del/span/td
/tr
tr
td COLSPAN='6'合计:￥span/span/td
/tr
/table
input type="button" value="加一行" onclick="tr_more()"
script type="text/javascript"
$(function(){
heji();
})
function heji(){
var tr=$("#t").find("tr").length;
var total=0;
for(i=1;itr-1;i++){//略过第一行和最后一行
var price=$('table#t tr:eq('+i+') td:eq(2)').find('span').html();
var num=$('table#t tr:eq('+i+') td:eq(3)').find('input:eq(1)').val();
$('table#t tr:eq('+i+') td:eq(4)').find('span').html('￥'+eval(price*num));
total=eval(total+eval(price*num));
}
$('table#t tr:eq('+eval(tr-1)+') td').find('span').html(total);
}
function less(e){
var num=$(e).parent().find('input:eq(1)').val();
if(num=0){num=0}else{num--}
$(e).parent().find('input:eq(1)').val(num);
heji();
}
function more(e){
var num=$(e).parent().find('input:eq(1)').val();
if(num0){num=0}else{num++}
$(e).parent().find('input:eq(1)').val(num);
heji();
}
function del(e){
$(e).parent().parent().remove();
heji();
}
function tr_more(){
var tr=$("#t").find("tr").length;
var trr=tr-2;
var newRow = "trtd"+eval(tr-1)+"/tdtdMac/tdtd￥span9999/span/tdtdinput type='button' value='-' onclick='less(this)'input type='text' style='width:30px' name='num' value='1'input type='button' value='+' onclick='more(this)'/tdtdspan/span/tdtdspan onclick='del(this)'del/span/td/tr";
$('table#t tr:eq('+trr+')').after(newRow);
heji();
}
/script
/body
/html
这段时间在学习研究jQuery源码，受益于jQuery日益发展强大，研究jQuery的大牛越来越多，学习的资料也比前两年好找了，有很多非常不错的资源，如高云的jQuery1.6.1源码分析系列。这些教程非常细致的分析了jQuery内部原理和实现方式，对学习和理解jQuery有非常大的帮助。但是个人认为很多教程对jQuery的整体结果把握不足，本人试图从整体来阐述一下jQuery的内部实现。
大家知道，调用jQuery有两种方式，一种是高级的实现，通过传递一个参数实现DOM选择，如通过$(“h1″)选择所有的h1元素，第二种是较为低级的实现，如果通过$.ajax实现ajax的操作。那么，这两种方式到底有何不同？用typeof函数检测$(‘h1′)和$.ajax,类型分别为object和function，稍微学过jQuery的都知道或者听过过，前者返回的是一个jQuery对象，那么jQuery对象是什么，它和jQuery是什么关系呢？我们先来通过for(var
i
in
$(”))
document.write(i+”
:::”+$(“”)[i]+””);打印一下jQuery对象的属性和对应的值,可以看到它有100多个属性，通过console输入$(“*”)可以看到大部分属性是继承自jQuery原型的属性，jQuery对象实际上是这样一个对象:
所以我们来推测，jQuery的实现可能是类似这样的：
function
jQuery(){
this[0]="Some
DOM
Element";
this[1]="Some
DOM
Element";
this[2]="Some
DOM
Element";
this.length=3;
this.prevObject="Some
Object";
this.context="Some
Object";
this.selector="Some
selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}
这些代码通过new操作符就就能创建出拥有上述属性的jQuery对象,但是实际上我们调用jQuery创建jQuery对象时并没有使用new操作符，这是如何实现的呢？来看jQuery的实现:
var
jQuery
=
function(
selector,
context
)
{
//
The
jQuery
object
is
actually
just
the
init
constructor
'enhanced'
return
new
jQuery.fn.init(
selector,
context,
rootjQuery
);
}
jQuery.fn=jQuery.prototype={
jquery:
core_version,
init:function(selector,context){
//some
code
return
this;
}
//some
code
there
//......
}
jQuery.fn.init.prototype=jQuery.fn;
这里有几点做得非常巧妙的地方,第一点是通过jQuery原型属性的init方法来创建对象来达到不用new创建对象的目的，第二点是对init方法内this指向的处理。我们知道，通过调用init返回一个jQuery的实例，那么这个实例就必须要继承jQuery.prototype的属性，那么init里面这个this,
就继承jQuery.prototype的属性。但是init里面的this，受制于作用域的限制，并不能访问jQuery.prototype其它的属性，jQuery通过一句'jQuery.fn.init.prototype=jQuery.fn'把它的原型指向jQuery.fn,这样以来，init产生的jQuery对象就拥有了jQuery.fn的属性。
到这里，一个jQuery的基本原型就浮出水面了。这里有两个对象，一个是jQuery这个构造函数，另外一个是这个构造函数产生的对象(我们称之为jQuery对象，它和普通对象没有什么区别),
如下关系图:
可以看到jQuery构造函数和jQuery.prototype均有各自的属性和方法，两者的调用方法各不一样,这两个对象都有一个extend方法，都是用来扩展自身的属性和方法，在jQuery内部，extend的实现实际是靠一样的代码,
将在后面的源码分析中做以详细的分析。
本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考，具体如下：
(function
($)
{
//
自定义itemtab事件
$.fn.bind
=
function(types,
data,
fn)
{
//
重载jQuery.fn.bind方法，用来截获绑定自定义事件的元素
if(typeof
types
==
'string'
'itemtab'
==
types)
{
var
itemTouchStart
=
-1;
//
touchstart位置
var
itemTouchMove
=
-1;
//
touchend位置，值为-1时表示未触发
var
itemTriggerDistance
=
0;
//
拖动距离阀值，若大于该值则为拖动列表，若小于等于该值则为点击列表项
var
itemMoved
=
false;
//
列表是否为拖动状态
$(this).bind('touchstart',
function
(event)
{
if(!event.originalEvent.touches.length)
return
true;
itemMoved
=
false;
itemTouchStart
=
event.originalEvent.touches[0].pageX;
//
记录起始位置
}).bind('touchmove',
function
(event)
{
if(!event.originalEvent.touches.length)
return
true;
itemTouchMove
=
event.originalEvent.touches[0].pageX;
//
当前拖动位置
//console.log('touchmove:',
itemTouchStart,
itemTouchMove,
itemMoved);
if(Math.abs(itemTouchMove
-
itemTouchStart)
itemTriggerDistance)
{
itemMoved
=
true;
//
列表被拖动
}
}).bind('touchend',
function
(event)
{
//console.log('itemMoved:',
itemMoved);
if(itemMoved)
{
//
列表被拖动过，非点击操作
return
true;
}
$(this).trigger('itemtab');
//
触发自定义事件
});
}
return
this.on(
types,
null,
data,
fn
);
//
这种做法具有侵入性，多个类似的代码会相互覆盖，可采用深度复制方式调用原$.fn.bind方法
}
})(jQuery);
希望本文所述对大家jQuery程序设计有所帮助。
例：img src="img/1.jgp" /;
//点击图片事件
$("img").click(function(){
//点击图片后发送跳转到指定页面的事件。
window.location.href="输入另一个页面的链接"；
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网