Jquery___2013.10.16
1、空格造成的影响
$(‘.test :hidden’).length; //是选择class为test的元素中的隐藏子元素
$(‘.test:hidden’).length; //是选择隐藏的class为test的元素。从后向前读
2、DOM选择
Var p = $(“p”) //获取P元素
Var li = $(“ul li:eq(1)”) //获取ul下面的第二个li的内容。eq从0开始
Var title = p.attr(“title”) ; //获取p中的title值 attr() 方法设置或返回被选元素的属性值。
Var test = li.text(); //获取li的内容。
li.attr(“title”,”myTitle”); 设置被选元素的属性和值。
最快的清除页面内容:
Document.getElementById(“div1”).innerHTML = “”;
Document.getElementById(“div1”).appendChild(br); //追加内容
$(“p”).append(“<b>你好</b>”) 追加内容
appendTo() ; 反着来,将A追加到B中
prepend() ; 前置
prependTo() ; 将A前置到B中。
After() ; 是插入在p元素之后,为兄弟元素
InsertAfter() ;
Before();
insertBefore();
2013.10.17
Empty(); 清空页面元素内容,元素还存在。
Jquery实现点击增加一行,可以删除这行:
$(function()
{
$(“input[type=button]”).click( function()
{
Var br = $(“<br>”);
Var input = $(“<input type =’file’>”);
Var button = $(“<input type = ‘button’ value = ‘remove “+(++count) +” ’> ”);
$(“#div1”).append(br).append(input).append(button);
Button.click(function()
{
Br.remove();
Input.remove();
Button.remove();
});
});
});
二:
$(“ul > li”) 表示ul直接的后代,没有>表示ul后所有的后代li
克隆:
$(this).clone().appendTo(“ul”);
.clone(true) 表示克隆的对象具有原有的所有的事件。
替换:
$(“p”).replaceWith(“<a href = ‘http://www.baidu.com’>baidu</a>”)
后面的替换掉前面的
$(“<a href = ‘http://www.baidu.com’>baidu</a>”).replaceAll(“p”)
前面的替换掉后面的
包括:
$(“p“).wrap(“<a href = ‘http://www.baidu.com’>baidu</a>”)
是给P元素加了个超链接。
有嵌套元素时是把被包括的内容放在了最里层。
$(“p“).wrap(“<a href = ‘http://www.baidu.com’>baidu</a>”)
WrapInner() 把P的文办放在了最里面
属性操作:
Attr()获取,设置属性
removeAttr() 移除属性
花括号可设置属性对象:
$(“p”).attr({“title”:”welecome”,”hello”:”world”});
获取属性:
$(“p”).attr(“hello”);
删除属性:
$(“p”).removeAttr(“title”);
Dojo 框架
操作class: class属性可以有多个,用空格隔开
<style type=”text/css”>
样式 *{margin:0 ;padding:0} //*号表示所有的
.high{
Font-weight:bold;
Color:red
}
.another{
Font-style:italic;
Color:green
}
</style>
$(“p”).attr(“class”,”high”)
$(“p”).addClass(“.high”);
移除:
$(“p”).removeClass(“high”)
$(“p”).removeClass() ; 是移除全部class
两种样式的切换:
$(“p”).toggleClass(“another”);
判断元素是否具有特定样式:
$(“p”).hasClass(“another”);
是否具有这个选择器:
$(“p”).is(“.another”);
Is:selected checked 判断是否被选中
$(“p”).html() 打印出p元素内的内容
$(“p”).text() 是打印出文本内容
$(“p”).val() ;显示文本
$(“p”).val(“hello ”) ;替换显示的文本内容
得到焦点:
$(“#username”).focus(function()
{
Var value = $(this).val();
If(value == ‘username’)
{
$(this).val(‘’);
}
});
失去焦点:
$(“#username”).blur()
取得子节点:
$(“body”).children();
Var v3 = $(“ul”).children();
V3[i].innerHTML;
$(“p”).next (); 下面的兄弟节点
next.show();显示 show(‘slow’), show(‘normal), show(‘fast’), show(100), 直接设定ms。
$(“p”).prev(); 遍历上面的兄弟节点
$(“p”).siblings(); 上面的和下面的节点
绑定事件:
停止事件的冒泡:
浏览器生成了event对象,
Event.stopPropagation(); //停止事件的传播
Var startTime = new Date().getTime();
$(document).ready 只用加载页面的DOM结构,不用下载外部的文件。速度比
Window.onload() 快很多。
Hide() 隐藏
绑定鼠标放上,离开事件:
$(“#panel h5.head”).bind(“mouseover”,function())
$(“#panel h5.head”).bind(“mouseout”,function())
可直接 $(“#panel h5.head”). mouseover