Jquery笔记
JQuery笔记
1、节点操作插入节点
$(html)函数中，$(“<form> <input name=’usernmae’> </form>”);
Append() 向每个匹配的元素内部追加内容//理解：相当于把<body>里的标签剪切到appent的位置。（在开始位置追加）
appendTo() 将所有匹配的元素追加到指定的元素中（在原有标签后追加）。
prepend()向每个匹配的元素内部前置内容（内容A追加到B元素开始的位置）;
prependTo()将所有匹配的元素前置到指定的元素中
After() 在每个匹配的元素插入到指定元素的后面
insertAfter()将所有匹配的元素插入到指定元素的后面
function temp()
{
$("#selt option").each(function(index,element)
{
$("#selt").prepend($(element));
}
2、包裹节点wrap
l Wrap方法：$(“label”).wrap(“<b> </b>”)；//在所有label的两端添加<b>标签。
用一个指定的元素来包裹。
l wrapAll(); 将匹配的元素用一个元素来包裹。不连续移动第一个<lable>标签的位置下。
l wrapInner(html)包含指定标签子元素。
3、替换节点replacewith
replaceWith
$(function())
$(“lable’){replaceWith(“<b>这里是B标记</b>”});
replaceAll(selector选择器)
$(functon())
{
$(“<b>这里是B标签</b>”).replaceAll(“label”);
}
4、复制节点clone(true)
语法：clone（） clone(true)
$("label").clone().prependTo("div");
5、删除节点 empty()
两种删除元素的方法，
1、empty()用于删除元素的方法，使用empty()方法删除元素的子元素；使用remove()方法删除当前元素。
$(function())
{
$(“div’).empty();
}
2、remove()方法用于从Dom里删除包装里所有元素。
用法：一般用一个按钮onclick事件：$("#div1 b").remove().appendTo("#div2");
6、属性操作atter
l attr（name）次方法用于获取指派到包装集里第一个元素指定属性的值。
如果为空，或第一个元素没有该属性，就返回undefined.
l Atter(name,value)
用法：$(function)
{
$(“input”)进行封装.atter(“size,”5”)；//把文本框input size的长度改为5}
Atter(atteributes)$(“font”).atter(size:5,face:”黑体”);
删除属性：
l removeAttr(name)
7、样式操作addClass()
添加指定一个或多个类名称道包装集的所有元素，指定多个类时中间用空格分隔
修改元素样式类变
<style type="text/css">
.A{border:1px solid black}
.B{height:50px;width:200px;margin-bottom:30px}
</style>
<script type="text/javascript">
$(function()
{
$("div").addClass("A B");//重点在这里
}
)
</script>
</head>
<body>
<div>这里是div1</div> <div>这里是div2</div>
</body>
l removeClass(Class) 中间用空格分开
$(“div’).removeClass();
l toggleClass(name) 使用该方法可以完成类开关操作来控制class属性的删除/设置操作。
<style type=”text/css”>
.show(display:none;)
<style>
function show()
{
$("input").toggleClass("show");
}
8、获取和设置样式css（name，value）
css(name,value);
$(“div”).css(“color”,”red”);
$(“div”).css({color:”red”,”width”:”500px”})
Css(name)//name计算样式值。返回字符串css的属性值。
9、设置元素内容（html ）
操作html（）和html（text）
$（Function（）{alert($(“div”).html)()}）
$（Function（）{alert($(“div”).html)(“<input/>”)}）//可以用heml直接替换标签。
操作Text()和text（content）//l连接而成的字符串。//会把所有的”div”里的内容显示出来。
$(alert($(“div”).text()))//显示div内的内容
$(alert($(“div”).text(“abc”)))//通过传递参数来设置包装集元素的文本内容。//实质修改替换div内部的内容。
10、处理表单元素（重点）val()
l Val（）此方法不带参数，用于返回匹配集里第一元素的value属性集。包装集里第一元素不是表单元素，就会抛出错误。
alert($("input[name=grade]:checked").val());//通过选择器获取组名：grade的所有单选按钮，接着通过属性过滤器找出选中项。
l Val（value）//传值
alert($("input[name=txt]").val("abc"));//取准确的值如果是：“input”就是给所有的方法
l Val（values）方法导致包装集里任何复选框、单选按钮、select 元素的选项变为选中（checked 或 selected）
l $("select").val(["bbb","sel"]); //下拉框注意：bbb是外面的值，而sel是标签value=的值就会选中。
选择器
层次选择器(操作元素的)
l $（“select option”）//返回select option所有option的元素
l $(“parent >child’)//选取pareent元素下chilid子元素。
过滤选择器（基本）通过元素的位置和下标
l $(“div:first”)//选取第一个元素 ：last
l $(“input:not(.myClass)”)//选取类名不是myClass的元素
l $:even 偶数 从o开始 ：odd 奇数
l ：eq(Index) 选取索引等于index的元素。0开始
l 小于 ;lt(index)
l ：header//标题选择器
内容过滤选择器 包含的子元素或文本内容上
l $(“tr:contains(‘李’)’) 过滤tr中姓李的文本内容
l ：empty//不包含子元素 $(“tr:empty”).html(“<b>不详</b>”);//选中为空的 添加不详
l 包含 :$(“div:has(p)”) 选取含有<p>元素的<div>元素。
l ：parent 含有子元素或者文本的元素。
可见性过滤选择器 根据可见状态来选择相应的元素
l <input type=hidden> $(“input:hidden”);
要让隐藏的显示出来 $(“div:hidden”).css(“display”,”block”)
l Visible 选中所有可见的元素 $(div:visible)
属性过滤选择器 通过元素的属性来获取相应的元素。用【】
l 【attribute】 选取拥有此属性的元素 $(“div[id]”)
l [attribute=value} 选取属性的值为value的元素 $(“div[title=test]”)选取属性title为test的div元素
l 【attribute!=value】
l [attribute^-=value] 选取属性test开始的<div>元素
l 【attribute$=value】结束的元素
l 【attribute*=value】包含有*value的元素
子元素过滤选择器 只要将元素的父元素和子元素区分清楚
l ：nth-chilc(index/even/odd/equation) 选取每个父元素下的第index个子元素从1算起
1． :Nth-child(even)能选取每个父元素下的索引值是偶数的元素。
2． :nth-child(odd)能选取每个父元素下的索引值是奇数的元素。
3． :nth-child(2)能选取每个父元素下索引值等于2的元素
4． :nth-chlid(3n)选取父元素下索引是3的倍数的元素 n是从零开始的。
5． ：nth-child(3n+1)
与eq(index)只匹配一个元素 而 nth-child为每一个父元素匹配子元素
l ：first-child 选取每个父元素的第一个子元素
与:first 只返回单个元素 而 ：first-child 选取每个父元素的第一个子元素
l ：last-child 选取每个父元素的最后一个子元素。
l ：only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，侧不会被配置。
表单选择器 通过表单元素的类型进行元素的抓取
l ：input 元素 获取所有的<input> $(:input)
l :text $(:text)
l :Password $(:password)
l :file
l :hidden
表单对象属性过滤选择器
l ：enabled 选取所有可用的元素 $(“#form1：enable”)选取id 为form1表单中所有可用元素 相反：disable
l :checked 选取所有被选中的元素(单选 和复选框) $(“input:checked”)
l :selected 选取所有被选中的选项元素（下拉列表）$(“select :selected”)选被选中选项
事件和动画
1、绑定事件处理程序 bind()
l Bind(name(事件动作click mousemove等),[,date],function()){alert (“hello jQuery!”)};
$(function(){
$(“input”).bind(“click”,function(){alert(“hello,JQuery”)})；
})
简写方法：$(“input”).click(function())
l one() 和上面一样只建立一次性的事件处理程序。
l $(“#btn”).unbind(“click”,myFunc1事件名)
事件冒泡
1、调用Event 事件对象stopPropagation 阻止冒泡事件
合成事件：
Hover（enter，leave）方法：用于建立匹配元素的mouseover 和mouseovet事件
移入移出2个动作$（“myDiv”）.hover(function(){$(“#msg”).html})
Toggle(fn1,fn2,fn3...)用于连续单击事件。
$(function(){
$(“input”).toggle(function(){
$(“div”).css(“display”,”none”);
},function(){
$(“div”).css(“display”,”block”);
})
})
默认加载事件
用$(“#btn”).click();
动画效果（通过改变元素的位置，改变元素的宽和高，改变元素的透明度等）
l 通过wedth()/height()来获取或设置元素的宽度和高度。
如果不带参数，可以以像素为单位获取显示元素的高度或宽度，返回值以数字类型返回。并且获取document及window对象的高度和宽度。 返回值的像素为单位的数值。
$(document).height() 和$(window).height();;
如果带有参数 $(“div”).height(500).width(500);
l Offset() 获取元素在当前视窗的相对偏移
$(function(){
Var os=$(“div”).offset();
Var left=”left:”+os.left;
Var top=”top:”+os.top;
})
l Position() 获取元素相对最近的一个position样式属性设置relative 或者absolute的祖父的相对偏移。（大层套用小层 小层相对于大层）用法同上
l scrollTop() 和scrollLeft()
常用动画效果
使元素显示和隐藏
1、show（）/hide() $(“input”).hide();
慢慢的显示和隐藏效果
$(“div”).hide(1000) $(“div”).show(1000);
如果隐藏效果完成后可以用show()方法的第二个参数 $(“div”).show(1000,function(){}$(“top”).html(“显示出来”))
2、toggle(speed) 对方法show 和 hide的封装 添加判断操作。实现切换效果
$（function(){
$(“input’).click(function(){$(“div’).toggle(1000)}.)
}）下面有2个div 一个是显示的 一个是隐藏的。
使元素淡入淡出 fadeIn(speed)/fadeout
$(function()){$(“input”).toggle(function(){$(“div”).fadeOur(1000)},function()${“div”}.fadeIn(1000))}
fadeTo(speed,opactity)设置半透明度 $(“div”).fadeTo(1000,.0.5);
工具函数：
1、Trim()语法：$.trim(value) 只能接收字符串不能接收数组。
2、$.each()方法：
常见for循环:$(div).get(0)转换成Dom对象。
For（var i=0;i<$(div).length;i++）
{
Var obj=$(“div”)[i];
}
例子：Each(iterator)迭代函数，传递函数的参数别设置为包装集里当前元素的下标，而当前元素可通过this关键字来访问。