JQuery学习笔记

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

原文地址:https://www.cnblogs.com/kennyliu/p/3375228.html