jquery常用方法及使用示例汇总(3)
复制代码 代码如下: head meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / title/title script src=" http://libs.baidu.com/jquery/1.9.0/jquery.js"/script /head body ul class="on
复制代码 代码如下:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<ul class="one">
<li class="two">item 1</li>
<li>item 2</li>
<li class="three">item 3</li>
</ul>
<script type="text/javascript">
$('ul.one').find(".two").css("color","red").find('.three').css("background","blue");
</script>
在上面的代码例子中，我们只会看到item 1的字体颜色改变了，而背景颜色没有改变。这是因为
第二个find()方法之前的状态返回的是红色字体的class值为two的对象，因此，第二次find()只会查找<ul class="one"> 中的.two，使用end()方法修改该链式操作的代码如下：
复制代码 代码如下:
<script type="text/javascript">
$('ul.one').find(".two").css("color","red").end().find('.three').css("background","blue");
</script>
end()方法在这里是 返回调用 find() 之前的状态，也就是$('ul.one')
toggleClass()
`toggleClass()方法：`如果在元素中指定类名称不存在，则添加指定类名称；如果元素已经拥有指定
类名称，则从元素中删除指定类名称。
css(name,value)方法：设定指定的值到每个已匹配元素的指定的css样式属性
wrap()和wrapInner()
`wrap()和wrapInner()：`前者把所有匹配的元素用其他元素的结构化标记包裹起来；
后者将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
看下面一个wrap()的例子：
用原先div的内容作为新div的class，并将每一个元素包裹起来
HTML 代码:
复制代码 代码如下:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代码:
复制代码 代码如下:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
结果:
复制代码 代码如下:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
接着再看下面一个wrapInner()的例子:
用原先div的内容作为新div的class，并将每一个元素包裹起来
HTML 代码:
复制代码 代码如下:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代码:
复制代码 代码如下:
$('.inner').wrapInner(function() {
return '<div class="' + $(this).text() + '" />';
});
结果:
精彩图集
精彩文章