1. append()和prepend()
假设
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
</div>
1
2
3
1
2
3
使用
$('.a').append($('.c'));
1
1
效果如下:
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
<div class='c'>c</div>
</div>
1
2
3
4
1
2
3
4
同样使用
$('.a').prepend($('.c'));
1
2
1
2
效果如下:
<div class='a'> //<---you want div c to append in this
<div class='c'>c</div>
<div class='b'>b</div>
</div>
1
2
3
4
5
6
1
2
3
4
5
6
2. 使用after()和before()
同样使用假设代码:
$('.a').after($('.c'));
1
1
效果如下:
<div class='a'>
<div class='b'>b</div>
</div>
<div class='c'>c</div>
1
2
3
4
1
2
3
4
同样使用before()
$('.a').before($('.c'));
1
1
效果如下:
<div class='c'>c</div>
<div class='a'>
<div class='b'>b</div>
</div>
1
2
3
4
1
2
3
4
总结:
append() & prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() & before()是在元素的外面插入内容(其内容变成元素的兄弟节点)。
=======================================================
filer()和children()和find()的区别 (2012-11-14 14:35:41)转载▼
标签: 杂谈
.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。
.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。
.filter(selector)方法是返回匹配元素集合中每个元素的筛选。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。
jquery之empty()与remove()区别
要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置。
remove([expr])则是把其从dom中删除,而不会保留其所占的位置。
例:
<p>Hello</p>
World
<p>welcome</p>
执行$("p").empty()其结果是
<p></p>
World
<p></p>
执行$("p").remove()其结果是
World
=====================================
HTML中jQuery控制button按钮可点击、不可点击
1.首先来说button按钮不可点击
1.1第一种(html代码中控制)
[cpp] view plain copy print?
<button id="button_id" disabled="disabled">按钮不可点击</button>
1.2第二种(jquery控制)
[cpp] view plain copy print?
$("#button_id").attr('disabled',true);
2.按钮可点击
2.1第一种(html代码中控制,默认)
[cpp] view plain copy print?
<button id="button_id">按钮可点击</button>
2.2第二种(jquery控制)
[cpp] view plain copy print?
$("#button_id").attr('disabled',false);
=================================================
$('button').click(function(){
$(this).css('background','red')
});
============================
$('#exmp_form input').each(function(){
var idName= this.id;
$('#idName').val();
});
//exmp_form 为你的表单ID
//遍历每个input元素
//idName 为input 元素对应的id值
//用jquery语法 $('#idName').val(); 获得值
==============================================================
<a>是没有VALUE的,不过你要是想用这个值可以使用Jquery来实现
如:<a id="aa" href="" value="123">aa</a>
$("#aa").attr("value")得到的值就是123
============================================================
$("input[id^='code']");//id属性以code开始的所有input标签
$("input[id$='code']");//id属性以code结束的所有input标签
$("input[id*='code']");//id属性包含code的所有input标签
$("input[name^='code']");//name属性以code开始的所有input标签
$("input[name$='code']");//name属性以code结束的所有input标签
$("input[name*='code']");//name属性包含code的所有input标签
===================================
Jquery的parent和parents(找到某一特定的祖先元素)
关于Jquery的parent和parents
parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
可以看出parent取的很明确,就是当前元素的父元素;parents则是当前元素的祖先元素。下面列出例子说明:
<div id='div1'>
<div id='div2'><p></p></div>
<div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>
$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1,这点比较奇特;不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3
parent(exp)用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
</script>
</head>
<body>
<table>
<tr>
<td><input id="btn1" class="btn" type="button" value="test"/></td>
<td>some text</td>
</tr>
</table>
....
其中:
this.parent()是input前面的td
this.parent().parent()获取的是tr
this.parent().parent().parent()获取的是table
this.parent().next()获取的是td相临的td
另例子中:
<div><p>Hello</p><p>Hello</p></div>
$("p").parent() 得到的是:<div><p>Hello</p><p>Hello</p></div>对象,因为p标签的父标签是div.
==========================================
var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
最常见的判断方法:typeof
alert(typeof a) ------------> string
alert(typeof b) ------------> number
alert(typeof c) ------------> object
alert(typeof d) ------------> object
alert(typeof e) ------------> function
alert(typeof f) ------------> function
================================