jQuery对象中无法使用DOM对象的任何方法。同样DOM对象也不能使用jQuery里的方法。
jQuery对象和DOM对象的相互转换：
jQuery转DOM：
var $cr = $("#cr");
var cr = $cr[0]; // 或 $cr.get(0);
alert(cr.checked);
DOM转jQuery：
var cr = document.getElementById("cr");
var $cr = $(cr);
alert($cr.is(":checked"))
<input type="checkbox" checked="checked" id="cr">
================
解决jQuery和其他类库的冲突：
jQuery库在其它库之后：
调用jQuery.noConflit()函数来将变量$的控制权移交给其他类库。这时如果要使用jQuery就要使用jQuery关键字: jQuery("p").click();
jQuery库在其它库之前：
无需调用jQuery.noConflit()，但使用时也要使用jQuery关键字，其它类库则使用“$”
================
jQuery选择器:
<p class="demo" id="pp">jQuery Demo</p>
<SCRIPT LANGUAGE="JavaScript">
$(".demo").click(function(){
alert("hello world");
})
$("#pp").click(function(){
alert("hello world2");
})
</SCRIPT>
基本选择器：
$("#test") 选取id为test的元素，返回单个元素
$(".test") 选取所有class为test的元素，返回集合元素
$("p") 选取所有的<p>元素，返回集合元素
$("*") 选取所有元素，返回集合元素
$("div,span,p.myCloass") 选取所有<div>，<span>和拥有class为myClass的<p>标签的一组元素
-----------------
层次选择器：
$("div span") 选取<div>里的所有的<span>元素,返回集合元素
$("div>span") 选取<div>元素下名是<span>的子元素
$(".one + div")或$(".one").next("div") 选取class为one的下一个<div>兄弟元素
$("#two ~ div")或$("#two").nextAll("div") 选取id为two的元素后面的所有<div>兄弟元素
-----------------
过滤选择器：
基本过滤选择器：
:first $("div:first")选取所有<div>元素中第一个<div>元素，返回单个元素
:last $("div:last") 选取所有<div>元素中最后一个<div>元素，返回单个元素
:not(selector) $("input:not(myClass)") 选取class不是myClass的<input>元素，返回集合元素
:even $("input:even") 选取索引是偶数的<input>，返回集合元素
:odd $("input:odd") 选取索引是奇数的<input>，返回集合元素
:eq(index) $("input:eq(1)") 选取索引为1的元素,index从0开始，返回单个元素
:gt(index) $("input:gt(1)") 选取索引大于1的元素,index从0开始，返回集合元素
:lt(index) $("input:lt(1)") 选取索引小于1的元素,index从0开始 ，返回集合元素
:header $(":header") 选取网页中所有的<h1>,<h2>,..，返回集合元素
:animated $("div:animated") 选取正在执行动画的<div>元素，返回集合元素
内容过滤选择器：
:contains(text) $("div.contains('我')") 选取含有文本"我"的div元素
:empty $("div:empty") 选取不包含子元素(包括文本元素)的div空元素
:has(selector) $("div:has(p)") 选取含有<p>元素的<div>元素
:parent $("div:parent") 选取拥有子元素(包括文本元素)的<div>元素
可见性选择器:
:hidden $(":hidden") 选取所有不可见的元素。包括<input type="hidden">,<div style="display:none;">,<div style="visibility:hidden;">等元素。
若只想去input元素可以$("input:hidden")
:visible $("div:visible") 选取所有可见的<div>元素
---------------
属性过滤选择器：
过滤规则：通过元素的属性来获取相应的元素，如id，name。
[attribute] $("div[id]") 选取拥有属性id的元素
[attribute=vlaue] $("div[title=test]") 选取title为test的div
[attribute!=vlaue] $("div[title!=test]") 选取title不为test的div.注意:没有属性title也会被选取
[attribute^=vlaue] $("div[title^=test]") 选取title以test开头的div
[attribute$=vlaue] $("div[title$=test]") 选取title以test结束的div
[attribute*=vlaue] $("div[title*=test]") 选取title含有test的div
[selector1][selector2][selector3] $("div[id][title$='test']") 选取拥有属性id,并且属性title以test结束的div
----------------
子元素过滤选择器:
:nth-child(index/odd/even) 将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0开始的
:first-child $("ul li:first-child") 选取每个<ul>中的第一个li
:last-child $("ul li:last-child") 选取每个<ul>中的最后一个li
:only-child $("ul li:lony-child") 在ul中选取是唯一子元素的li元素
----------------
表单对象属性过滤选择器:
对有选择性的表单做出过滤.如:下拉框,多选框等
:enabled $("#form1 :enabled") 选取id为form1的表单内所有可用元素
:disabled $("#form2 :disabled") 选取id为form2的表单内所有不可用元素
:checked $("input:checked") 选取所有被选中的input元素
:selected $("select :selected") 选取所有被选中的的选项元素
----------------
表单选择器:
// form1中有几个checkbox
var length = $("#form1 :checkbox").length;
alert(length)
注意:
$("#form1 input") 与 $("#form1 :input")的区别
前者后面还可以跟过滤器,如:$("#form1 input:enabled")
后者则不可以
==================
jQuery中DOM操作
查找元素节点:
var $li = $("ul li:eq(1)") // 获取ul中第二个li节点
var li_txt = $li.text(); // 获取第二个li中的文本内容
----------------
查找属性节点:
attr()方法
var $p = $("p"); // 获取<p>节点
var p_txt = $p.attr("title"); // 获取p节点的title属性
---------------
创建节点:
创建元素节点:
例如:需要创建两个<li>,并插入到ul当中
var $li1 = $("<li title='这是香蕉'>香蕉</li>");
var $li2 = $("<li title='这是苹果'>苹果</li>");
$("ul").append($li1).append($li2);
append()
after()
append()和after()的区别:
HTML代码:
<p>我想说:</p>
$("p").append("<b>你好</b>");// 结果 <p>我想说:<b>你好</b></p>
$("p").after("<b>你好</b>"); // 结果 <p>我想说:</p><b>你好</b>
prepend()
before()
prepend()和before()的区别:
HTML代码:
<p>我想说:</p>
$("p").prepend("<b>你好</b>");// 结果 <p><b>你好</b>我想说:</p>
$("p").before("<b>你好</b>"); // 结果 <b>你好</b><p>我想说:</p>
------------------
删除节点:
remove() 删除节点
empty() 清空节点内容
$("ul li:eq(1)").remove() // 删除ul中第二个li
返回的结果是指向被删除节点的引用,可以继续使用.
$("ul li:eq(1)").empty() // 清空元素的内容
---------------
复制节点:
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");
}) // 单击一个li元素并复制到ul后面,并且复制后的li也能进行复制
替换节点:
replaceWith()
replaceAll()
HTML
<p>hello</p>
$("p").replaceWith("world"); // 把hello改成world
$("world").replaceAll("p"); // 意思同上
注意:如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件.
------------------
包裹节点:
如果要将某个节点用其它标记包裹起来.
wrap()
wrapAll()
wrapInner()
$("strong").wrap("<b></b>"); // 用<b>标签把<strong>元素包裹起来
wrapAll() 将所有匹配的元素用一个元素来包裹.
wrapInner()将每一个匹配的元素子内容(包括文本节点) 用其他结构化的标记包裹起来.
------------------
属性操作:
attr()用来设置和获取元素属性,
removeAttr()用来删除元素属性
$("p").attr("title","gaga");
注意:jQuery中还有好多方法都是同一函数实现获取和设置功能的.
如: html(), text(), height(), width(), val(), css()等.
-----------------
样式操作:
addClass()追加样式
<style>
.xt{
font-style:italic;
}
.hs{
color:red;
}
</style>
<p class="xt">hello</p>
$("p").addClass("hs");// 先是斜体黑色,加了样式后就变斜体红色了.
-----------------
移除样式:
removeClass() 功能与addClass()相反
-----------------
切换样式:
$("p").toggleClass("another"); // 重复切换another样式,如果没有则添加,如果有则删除
-----------------
判断是否含有某个样式:
$("p").hasClass("another"); // 返回布尔类型
=================
设置和获取HTML,文本和值
html() // 类似于js中的innerHTML,可以设置和获取某个元素的HTML内容
text() // 类似于js中的innerText,可以设置和获取某个元素的文本内容
val() // 类似于js中的value熟悉,可以设置和获取元素的值
=================
遍历节点:
children()方法
var $body = $("body").children();
children()方法只考虑子元素而不考虑任何后代元素.
next()方法
用于取得匹配元素后面紧邻的同辈元素
prev()方法
用于取得匹配元素前面紧邻的同辈元素
siblings()方法
该方法用于取得匹配元素前后所有的同辈元素
closest()方法
用来取得最近的匹配元素.首先检查当前元素是否匹配,如果匹配这直接返回元素本身.
如果不匹配则向上直找到匹配选择器的元素.如果什么都没找到则返回一个空jQuery对象.
================
CSS-DOM操作:
css()方法,用来设置或读取元素的样式
$("p").css("color","red");
$("p").css({"fontSize":"30px" , "backgroundColor":"#888888"})
offset()方法:
作用是获取元素在当前视窗的相对便宜,返回对象中包含两个属性,top,left
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;
position()方法:
获取元素相对于最近的一个position样式属性设置为relative祸absolute的祖父几点的相对偏移.
var position = $("p").position();
var left = position.left;
var right = position.right;
scrollTop()方法和scrollLeft()方法:
作用是分别获取元素滚动条距顶端和距左侧的距离.
====================
案例:
提示框:
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<style>
#tooltip{
border-style:solid;
border-width:"1px";
background-color:"yellow";
font-size:"12px"
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
var y = 20;
var x = 10;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
// 清除自带的提示
this.title = "";
var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
// 把提示内容追加到文档中
$("body").append(tooltip);
// 设置提示层显示位置
$("#tooltip").css({"position":"absolute","top":e.pageY+y+"px","left":e.pageX+x+"px"}).show();
}).mouseout(function(e){
// 还原自带的提示
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){// 添加移动跟随
$("#tooltip").css({"position":"absolute","top":e.pageY+y+"px","left":e.pageX+x+"px"});
})
})
//-->
</SCRIPT>
</HEAD>
<p><a a href="#" title="这是我的超链接提示1" class="tooltip">提示11111111111111111111111111111111111</a></p>
<p><a a href="#" title="这是我的超链接提示2" class="tooltip">提示2</a></p>
--------------
图片提示:
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
var y = 40;
var x = 20;
$("img.smallImage").mouseover(function(e){
var mySrc = $(this).attr("src");
$("#img").attr("src",mySrc);
var myTitle = this.title?"</br>"+this.title:"";
//alert(mySrc)
var tooltip = "<div id='imagetip'><img class='showImage' src='"+mySrc+"' />"+myTitle+"</div>";
// 把提示内容追加到文档中
$("body").append(tooltip);
// 设置提示层显示位置
$("#imagetip").css({"position":"absolute","top":e.pageY+y+"px","left":e.pageX+x+"px"}).show("fast");
}).mouseout(function(e){
$("#imagetip").remove();
})
})
//-->
</SCRIPT>
<a href="#"><img src="image/1.JPG" class="smallImage" title="擎天柱"/></a>
<a href="#"><img src="image/2.JPG" class="smallImage" title="红蜘蛛"/></a>
<a href="#"><img src="image/3.JPG" class="smallImage" title="威震天"/></a>
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
