Jquery杂项--选看

--------------------------------------------------------------------------------------------------

jquery框架

① jquery是一个 javascript框架/javascript 库

为什么出现 javascript框架?

比如: 为了获取 id 对应对象

document.getElementById('id号');

为了获取标签名获取对象

document.getElmentsByTagName("tagname");

如果使用框架

$('#id') $('.classname')

如果使用jquery框架发送 ajax请求

Jquery.send(..);

得出结论是: 使用js框架可以提高我们开发js的效率

② write less do more

③ jquery是一个轻量级的js库，给使用者提供一系列的函数

④ 目前流行的js库有:

jquery 2. extjs 3. prototype 4. dwr(运行服务器) 5. dojo

如何在zend studio 安装一个插件(apatana) 可以提示js的函数和属性,目前这个工具很流行

u 下面我演示如何安装

① 先下载aptana插件 www.aptana.org

② 安装的方式有两种

在线安装(推荐)

离线安装 (首先下载插件包)

help->software->find and install->search for new featrue .. ->new archived site->选中你的aptana.zip ->finish->选中aptana zip复选框

如果提示某个jar安装不成，则去掉这个jar选项

安装时，大概3分钟.

快速入门案例

使用jquery开发在网页打开是，提示一句话: "hello,world"!

//$(document)是一个jquery 对象

//document是dom对象

$(document).ready(function(){

window.alert('hello,world');

}

);

</script>

☞ 在使用jquery开发中，有两种对象 1. jquery对象 2. dom对象, 如果是jquery对象则只能使用jquery库提供的方法, 如果是dom对象，则只能使用 js本身提供的方法.

分析一下，为什么可以使用jquery方法?

<script type="text/javascript">

function Dog(){

}

Dog.prototype={

ready: function(){

window.alert('ok');

}

var dog1=new Dog();

dog1.ready();

</script>

u 什么事jquery对象

jquery对象就是对dom对象进行包装，这样就可以使用jquery的方法, jquery对象和dom对象可以相互转换,方法是:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

//说明jquery对象和dom对象区别

function testing(){

//使用传统的方法来获取test

//obj1是dom对象

var obj1=document.getElementById("test");

window.alert(obj1.value);

//如果是jquery对象,规定一个jquery对象名是 $开头

var $obj2=$('#test');

alert($obj2.val());

//他们之间是否能够相互转换.

//dom->jquery

//var $obj3=$(obj1); // $(document).ready()..

//window.alert($obj3.val());

//jquery->dom对象?

//在jquery开发中，把一个对象当做集合处理

//有两种方法.1.

var obj4=$obj2[0]; //obj4就是dom

//现在

alert("obj4 valu="+obj4.value);

//第二种方法把jquery->dom

var obj5=$obj2.get(0);

alert("obj5 val="+obj5.value)

}

</script>

</head>

<body>

</body>

</html>

u jquery的选择器

基本选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b3"/>

<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/>

div id为one

</div>

div id为two

</div>

div id为three

</div>

span one

</span>

span two

</span>

</body>

//************改变 id 为 one 的元素的背景色为 #0000FF***********

/*function abc(){

document.getElementById("one").style.background="#0000FF";

}*/

//jquery的id选择器去和按钮绑定一个事件

//$('#b1')表示选中 b1这个控件

//$('#b1').click 给b1这个按钮绑定 click事件

//function(){

// window.alert('yes');

//} 表示点击b1按钮时，究竟做什么

$('#b1').click(

function(){

$('#one').css("background","#0000FF");

}

);

//*****改变 class 为 mini 的所有元素的背景色为 #FF0033

$('#b2').click(

function (){

$('.mini').css("background"," #FF0033");

}

);

//******改变元素名为 <div> 的所有元素的背景色为 #00FFFF

$('#b3').click(

function (){

$('div').css("background","#00FFFF");

}

);

//******改变所有元素的背景色为 #00FF33

$('#b4').click(

function(){

$("*").css("background","#00FF33");

}

);

//*****改变所有的<span>元素和 id 为 two class .mini 的元素的背景色为 #3399FF

$('#b5').click(

function(){

//??

$('span,#two,.mini').css("background","#3399FF");

}

)

//***********end*************

</script>

</html>

练习案例:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

$('p').click(

function(){

//this表示当前被点击元素，但是此时我们当做dom对象

//window.alert(this.innerHTML);

//$(this) 表示当前被点击元素，但是此时我们当做jquery对象

window.alert($(this).html());

//window.alert('ok');

}

);

</script>

</body>

</html>

u 层次选择器的

prev + next 表示选择 prev 的下一个元素 (强调：同一级)
prev ~ siblings 表示选择 prev 的后面所有元素(强调：同一级)

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>

<input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>

<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>

<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>

<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>

div id为one

</div>

div id为two

id twoo1

</div>

id twoo2

</div>

div id为three

id three01

</div>

span one

</span>

span two

</span>

</body>

//*******改变 <body> 内所有 <div> 的背景色为 #0000FF

$('#b1').click(function(){

$('div').css("background","#0000FF");

})

//*******改变 <body> 下 <div> 的背景色为 #0000FF

$('#b2').click(function(){

$('body > div').css("background","#0000FF");

})

//改变 id 为 one 的下一个 <div> 的背景色为 #0000FF(选择一个)

$('#b3').click(function(){

$('#one + div').css("background","#0000FF");

})

//*******改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF

$('#b4').click(function(){

$('#two ~ div').css("background","#0000FF");

})

//****改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF

$('#b5').click(function(){

$("#two").siblings("div").css("background","#0000FF");

})

</script>

</html>

u 过滤选择器

① 基础过滤选择器

所有的案例如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

div id为one

</div>

div id为two

id twoo1

</div>

id twoo2

</div>

div id为three class one

id three01

</div>

执行动画

</div>

span one

</span>

span two

</span>

</body>

//函数

function ca(){

$("#mover").slideToggle("slow",ca);

}

//调用

ca();

//*****改变第一个 div 元素的背景色为 #0000FF

$('#b1').click(

function(){

//$('div:first').css("background","#0000ff");

$("div:eq(0)").css("background","#0000ff");

}

);

//*****改变最后一个 div 元素的背景色为 #0000FF

//所谓最后一个指的是是从上到下，从左到右去搜，最后的一个

$('#b2').click(

function(){

$('div:last').css("background","#0000ff");

}

);

//***改变class不为 one 的所有 div 元素的背景色为 #0000FF

$('#b3').click(

function(){

//先选择所有div,然后再过滤(select mysql )

$("div:not(.one)").css("background","#0000ff");

}

);

//********改变索引值为偶数的 div 元素的背景色为 #0000FF

$('#b4').click(

function(){

//:表示过滤

$("div:odd").css("background","#0000ff");

}

);

//5

//*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF

$('#b6').click(

function(){

$("div:gt(3)").css("background","#0000ff");

}

);

//改变索引值为等于 3 的 div 元素的背景色为 #0000FF

$('#b7').click(

function(){

$("div:eq(3)").css("background","#0000ff");

}

);

//**改变索引值为小于 3 的 div 元素的背景色为 #0000FF

$('#b8').click(

function(){

$("div:lt(3)").css("background","#0000ff");

}

);

//****改变所有的标题元素的背景色为 #0000FF

$('#b9').click(

function(){

$(":header").css("background","#0000ff");

}

);

//***改变当前正在执行动画的所有元素的背景色为 #0000FFF

$('#b10').click(

function(){

//怎么样吧颜色在重新找回的.

$(":animated").css("background","red");

}

);

</script>

</html>

-----

练习

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h1>第一个表格</h1>

</table>

<h1>第二个表格</h1>

</table>

$("table:eq(0) tr:even").css("background","red");

$("table:eq(0) tr:odd").css("background","blue");

//第二个表格

$("table:eq(1) tr:even").css("background","green");

$("table:eq(1) tr:odd").css("background","yellow");

</script>

</body>

</html>

代码

u 内容选择器

根据内容来选择你需要的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

div id为one

</div>

div id为two

id twoo1

</div>

id twoo2

</div>

div id为three class one

id three01

</div>

XXXXXXXXXX

</div>

</div>

执行动画

</div>

span one

</span>

span two

</span>

</body>

//********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF

$('#b1').click(function(){

$("div:contains('di')").css("background","#0000ff");

})

//**************改变不包含子元素(或者文本元素) 的 div 的背景色为 #0000FF

$('#b2').click(function(){

$("div:empty").css("background","red");

})

//******改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF

$('#b3').click(function(){

//这个是元素本身

$("div:.mini").css("background","green");

//这个元素它父元素

//$("div:has('.mini')").css("background","green");

})

//****改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF

$('#b4').click(function(){

//这个是元素本身

$('div:parent').css("background","yellow");

})

//*****改变不含有文本 di; 的 div 元素的背景色

$('#b5').click(function(){

//这个是元素本身

$("div:not(contains('di'))").css("background","red");

})

//****改变索引值为大于 3 的 div 元素的背景色为 #0000FF

$('#b6').click(function(){

//这个是元素本身

$("div:gt(3)").css("background","#0000ff");

})

//***

</script>

</html>

u 可见度选择器

该选择器，是根据元素的可见性来选择对象

----------------------------------

u jquery的属性选择器

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

div.visible{

display:none;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

div id为one test

</div>

div id为one texxx

</div>

div id为one texxx

</div>

div id为one xxxesxxxxxt

</div>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

</div>

XXXXXXXXX

</div>

</body>

//*****含有属性title 的div元素.

$("#b1").click(

function(){

$("div[title]").css("background","green");

}

);

//****属性title值等于test的div元素

$("#b2").click(

function(){

$("div[title=\"test\"]").css("background","green");

}

);

//属性title值不等于test的div元素(没有属性title的也将被选中)

$("#b3").click(

function(){

$("div[title!='test']").css("background","red");

}

);

//属性title值以te开始的div元素

$("#b4").click(

function(){

$("div[title^='te']").css("background","red");

}

);

//属性title值以est结束的div元素

$("#b5").click(

function(){

$("div[title$='est']").css("background","red");

}

);

//属性title值含有es的div元素

$("#b6").click(

function(){

$("div[title*='es']").css("background","red");

}

);

//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素

//我们的过滤方式有两种 :

//比如选出文本中含有 abc的 div $("div:contains['abc']")

$("#b7").click(

function(){

//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素

$("div[title*='es'][id]").css("background","red");

}

);

</script>

</html>

u 子元素选择器

根据该元素是父元素下出现的位置来选中子元素.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

div.visible{

display:none;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

XXXXXXXXX one

</div>

XXXXXXXXX two

</div>

XXXXXXXXX three

</div>

XXXXXXXXX four

</div>

XXXXXXXXX one

</div>

</body>

//****每个class为one的div父元素下的第2个子元素

$('#b1').click(

function(){

$("div .one:nth-child(1)").css("background","red");

}

);

//*****每个class为one的div父元素下的第一个子元素

$('#b2').click(

function(){

$("div .one:first-child").css("background","red");

// $("div .one:nth-child(1)").css("background","red");

}

);

//*****每个class为one的div父元素下的最后一个子元素

$('#b3').click(

function(){

$("div .one:last-child").css("background","red");

}

);

//**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

$('#b4').click(

function(){

$("div .one:only-child").css("background","red");

}

);

</script>

</html>

u 表单对象选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<form>

</form>

</body>

//选择所有的button

var buttons=$(':button');

alert(buttons.length);

var buttons=$("input[type='button']");

alert(buttons.length);

</script>

</html>

小结: 我们在获取表单元素时候,有两种方式

$(":表单元素名") [input button file img....] ,这种方式选择最全.
$("input[type='button']"); 这种方式<input type="button"/>

u 表单对象属性选择器

$("select option:selected")

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

div.visible{

display:none;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

<br>

<br>

<input type="checkbox" value="爱好1"/>爱好1

<input type="checkbox" value="爱好2"/>爱好2

<input type="checkbox" value="爱好3"/>爱好3

<input type="checkbox" value="爱好4"/>爱好4

<br>

</select>

</select>

</body>

//*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值

$("#b1").click(function(){

$("input[type='text']:enabled").val("hello");

})

//**利用 jQuery 对象的 length 属性获取多选框选中的个数

$("#b3").click(function(){

// alert($(":checkbox:checked").length);

alert($("input[type='checkbox']:checked").length);

})

//****利用 jQuery 对象的 text() 方法获取下拉框选中的内容

$("#b4").click(function(){

//alert($("select option:selected").text());

//必须用这个 val()函数把每个值打印;

var $objs=$("select option:selected");

/* $.each($objs,function(){

alert($(this).val());

});*/

/* $.each($objs,function(i,n){

// alert(n.value);

alert($(n).val());

})*/

/* $objs.each(function(){

window.alert($(this).val());

})*/

$objs.each(function(i,n){

window.alert("ok"+$(n).val());

})

</script>

</html>

☞ 总结一下过滤器使用的方式

$("div:contains('di')"); //内容

$("div[type]")//属性

$("div .one")// 选中div 中含 class 为 .one 的div元素

$("div, .one")// 选中div 和 class 为 .one 的div元素

☞总结jquery对象集合遍历的四种形式

//必须用这个 val()函数把每个值打印;

var $objs=$("select option:selected");

/* $.each($objs,function(){

alert($(this).val());

});*/

/* $.each($objs,function(i,n){

// alert(n.value);

alert($(n).val());

})*/

/* $objs.each(function(){

window.alert($(this).val());

})*/

$objs.each(function(i,n){

window.alert("ok"+$(n).val());

})

☞如何使用我们的选择器

总结如下:

1.使用什么样的选择器根据需求定

2.如果针对文档内容，则使用内容选择器

3.如果是选择父子（祖先、后代）元素则使用层次选择器

4. 如果是根据id/class/tagname/使用基本选择器

5. 如果是选择表单中的元素，则使用表单选择器、表单对象属性选择器

6. 根据可见性选择元素，则使用可见性选择器

7. 如果是选择某个元素中包含某个属性（属性值），则使用属性选择器

8. !!!如果考虑对选中的元素，要进行过滤，则使用过滤选择器，（有三种方法）

$("div:contains('di')"); //内容

$("div[type]")//属性

$("div .one")// 选中div 中含 class 为 .one 的div元素

u jquery如何操作dom

jquery的dom操作分为三种 (js)

① xml dom

② html dom

③ css dom

查找节点，然后去通过attr函数去修改或者设置属性的值.

--------------------------------------------------------------------------

jquery的dom操作

u 创建对象

使用jquery的 $() 来创建一个dom对象，并包装成一个jquery对象返回

快速入门:

如果传统的dom方法.

//添加重庆li到上海下(使用dom的传统方法)

function test1(){

var myli=document.createElement("li");

myli.setAttribute("id","cq");

myli.setAttribute("name","chongqing");

myli.innerHTML="重庆";

document.getElementById("city").appendChild(myli);

}

如果使用的 jquery方法

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

</ul>

</body>

//*****添加重庆li到上海下

$("#b1").click(function(){

//jquery方法

//<li id='cq' name=''chongqing>重庆</li>

//有两种方法

//1.一步到位********

// $myli=$("<li id='cq' name='chongqing'>重庆</li>");

//先使用内部插入

//$('#city').append($myli) :表示在 $('#city')对象内部后面添加一个 $myli对象

// $('#city').append($myli);

//1.end ....一步到位********

//2.逐步添加我们的dom对象

$myli=$("<li></li>");//<===>$myli=$("<li/>");

$myli.text("重庆"); //=> <li>重庆</li>

$myli.attr("id","cq");//==><li id='cq'>重庆</li>

$myli.attr("name","chongqing");

//把$myli添加到上海

////$('#city').append($myli) :表示在 $('#city')对象内部后面添加一个 $myli对象

//$('#city').append($myli);

//如果使用appendTo这应当这样使用

//$myli.appendTo($("#city")); :表示把$myli添加到 $("#city")对象的内部后面

$myli.appendTo($("#city"));

})

//***添加成都li到北京前

$("#b2").click(function(){

//jqury方法

$myli=$("<li id='cq' name='chongqing'>成都</li>");

//$('#city').prepend($myli);

$myli.prependTo($('#city'));

})

</script>

</html>

$aaa.append($bbb);

$bbb.appendTo($aaa);

我们看看外部插入:

核心代码如下:

$('#b4').click(function(){

//使用外部插入

//一步到位

//$("#bj").after("<li id='cd' name='chengdu '>成都</li>");

$("<li id='cd' name='chengdu '>成都</li>").insertAfter($('#bj'));

})

$('#b5').click(function(){

//使用外部插入

//一步到位

//$("#jl") 对象前面添加 "<li id='cd' name='chengdu '>成都</li>";

var $jl=$("<li id='cd' name='chengdu '>成都</li>");

//$("#jl").before($jl);

$jl.insertBefore($('#jl'));

})

l 使用jquery去查找某个对象，如果这个对象(id/class...)不存在，jquery不报错, val()

//alert($('#text2').val());

alert(document.getElementById("text2").value);

//dom,这样处理

/*if(document.getElementById("text2")){

alert(document.getElementById("text2").value);

}else{

window.alert("ok");

}*/

</script>

u 删除节点

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

您喜欢的城市:<br>

</ul>

您爱好的游戏:<br>

</ul>

<p>Hello</p> how are <p>you?</p>

<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>

</body>

//*****删除所有p

// $("p").remove();

//***所有p清空

$("p").empty();

//****删除上海这个li

$("#b3").click(function(){

$("#sh").remove();

})

</script>

</html>

u 复制节点

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

///////////////////////////////////////////////<br>

</body>

$("p").click(function(){

window.alert($(this).text());

});

//$("p").clone()表示复制一份 $("p"),但是没有复制事件

//$("p").clone(true)表示复制一份 $("p"),同时复制事件

$("p").clone(true).insertAfter($('button'));

</script>

</html>

u 节点替换

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<p>Hello</p><p>cruel</p><p>World</p>

</body>

//with : 用什么去替换什么

// $("p").replaceWith("<input type='button' value='按钮'><br/>");

// $("<a href='#'>sohu</a>").replaceAll($("p"));

$("p").replaceWith("<a href='#'>sohu</a><br/>");

</script>

</html>

在jquery开发中有这样几个函数，可以获取值，同时也可以设置值

val() val(val)
html() html(val)

$("#div1").html("<p>hello</p>")

text() text(val)

$("#div1").text("<p>hello</p>");

4. attr(name) attr(name,val)

$('#div1').attr("title");

$(''#div1).attr("title","abc");

css("css名字"), css("css名字",val)

$("#div1").css("backgorund");

$("#div1").css("backgorund","red");

removeAttr(): 删除指定元素的指定属性

$("#a1").removeAttr("href");

$("#a1").attr("href","http://www.baidu.com");

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<br>

</body>

$(document).ready(function (){

//当dom对象加载完毕后，给 b1绑定一个focus事件

$("#b1").focus(function(){

//获取当前值

$curVal=$(this).val();

if($curVal==this.defaultValue){

//应当设置""

$(this).val("");

}else{

$(this).val($curVal);

}

})

//在绑定一个事件 blur

$("#b1").blur(function(){

//获取当前值

$curVal=$(this).val();

if($curVal==""){

$(this).val(this.defaultValue);

}else{

$(this).val($curVal);

}

})

});

</script>

</html>

***如何获取子元素和兄弟元素的方法:

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<div >

ccccccc

</div>

XXXXXXXXX one

</div>

XXXXXXXXX two

</div>

XXXXXXXXX three

</div>

XXXXXXXXX four

</div>

<div>

tttttttttt

</div>

<div>

aaaaaaa

</div>

<div>

bbbbbb

</div></body>

//**查找所有子元素（class 为 one 的div的子元素)

$("#b2").click(function(){

window.alert('aaaa');

/* $(".one").children().each(function(){

alert($(this).text());

})*/

//指定获取第几个子孩子

alert($(".one").children().eq(1).text());

})

//***获取后面的同辈元素（class 为 one 的div的子元素)

$("#b3").click(function(){

//获取.one后面所有的兄弟

// $(".one").nextAll().each(function(){

// alert($(this).text());

// })

//获取.one后面的第2兄弟

alert($(".one").nextAll().eq(1).text());

})

//**获取前面的同辈元素（class 为 one 的div的子元素)

$("#b4").click(function(){

//获取.one前面所有的兄弟

// $(".one").prevAll().each(function(){

// alert($(this).text());

//})

//获取.one前面的第1兄弟

alert($(".one").prevAll().eq(0).text());

alert($(".one").prev().text());

})

//**获取所有的同辈元素

$("#b5").click(function(){

$(".one").siblings().each(function(){

alert($(this).text());

})

//***

</script></html>

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

请选择您的爱好!

<br><input type="checkbox" id="checkedAll_2"/>全选/全不选

<br/>

<input type="checkbox" name="items" value="足球"/>足球

<input type="checkbox" name="items" value="篮球"/>篮球

<input type="checkbox" name="items" value="游泳"/>游泳

<input type="checkbox" name="items" value="唱歌"/>唱歌

<br/>

</form>

</body>

$("#checkedAll_2").click(

function (){

if(this.checked){

$("input[name='items']").attr("checked","checked");

}else{

//$("input[name='items']").attr("checked","");

$("input[name='items']").removeAttr("checked");

}

);

$('#CheckedAll').click(function(){

$("input[name='items']").attr("checked", "checked");

}

);

$('#CheckedNo').click(function(){

$("input[name='items']").attr("checked", "");

}

);

//反选

$('#CheckedRev').click(function(){

$("input[name='items']").each(function(){

if(this.checked){

$(this).attr("checked","");

}else{

$(this).attr("checked","checked");

}

})

}

);

</script>

</html>

小结: jquery和ajax整合的使用方法

使用jquery的方法

load(url,[data,],[callfunction])

这个load方法把我们ajax自行写的代码包装,

url表示向哪个php发送ajax请求.

data数据是可以选填，但是格式有要求应当按照 json格式来发送, 一旦有这个数据则，load将以post方式提交, 如果没有数据 ,可以设置null,则默认以get方式提交

callfunction :形式 function(data,textstatus,xmlHttpRequest);

data :表示从服务器返回数据(string)

textstatus:表示文本状态succuss, error, notmodify, timeout

xmlHttpRequest,就是XMLHttpRequest对象

返回的数据可能是text/xml/json, 这时你需要用不同的方法来处理，然后使用jquery来显示到某个适当位置

说明： load方法需要用jquery 对象来调用.

jquery.load();

get(url,[data,][callfunction]);
post(url,[data,][callfunctino]);

这个post方法可以不依赖某个jquery对象,它可以直接调用

$.post();

url也是向某个php发送数据.

data 也是可以选填的，格式仍然遵守json格式 {"name":"sp"}; $_POST['name'];

该函数返回的值就是xmlHttpRequest 对象

callfunction函数只能有两个参数. data,textstatus

-------------------------------

最新版的jquery性能最好 jquery性能提升来源：http://www.jb51.net/article/32524.htm 这个了解即可

-----

posted @ 2014-09-30 12:39 海龙王来了阅读(293) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

睡眠中

Jquery杂项--选看

公告