1、我对jQuery的几个不理解的地方。
第一个是如何选中我要选择的元素
第二个是如何处理数组中的一个元素
第三个是如何选择同时具有多个类的元素
现在就有这两个东西很疑惑,致使使用的时候心里总是没底:
jQuery能做的就是使结构与行为分离。这句话 我觉得很好理解。因为jquery可以不用修改HTML文件。HTML文件表示的是结构。jQuery表示的是行为。
jQuery对象的方法与DOM对象的方法是不能混合使用的。
例如:$("#id").innerHTML或者document.getElementById("id").html()都是错误的
jQuery对象于DOM对象的转换:
jQuery选择器返回的对象实则是以对象数组的方法返回的,因此可以使用数组下标进行转换,也可以使用jQuery中get(index)方法
$(function())
{
var $p = $("p"); //我很疑惑 ,就是这里的$P可不可以不用呢,为什么一定要加一个$p,我觉得应该可以不用,因为只是一个名称而已
var p=$p[0];
alert(p.innerHTML);,
})
也可以将DOM对象转换为jQuery对象
var p = document.getElementById("p");
var $p=$(p);
上面说的东西只是在告诉我们首先不要将DOM和JQuery混淆了。第二DOM和JQuery对象是可以转换的。第三JQuery对象得到的结果都是用数组来存放的。
jQuery 选择器
jQuery选择器和CSS选择器十分类似。
css选择器的种类:
- 标签选择器:p{css rules}
- id选择器 :#ID{css rules}
- 类选择器:.Class{css rules}
- 群组选择器:h1,h2,h3{css rules}
- 后代选择器:div p {css rules}
- 通配选择器:* {css rules}
- 伪类选择器:a:link ,a:visited{css rules}
- 多类选择器
- 属性选择器
- 部分属性选择器
- 相邻兄弟选择器
- 子选择器
jQuery中基本选择器包括 *,class,element.id以及群组方式selector1,selector2………
使用$可以避免document.getElementById("#id")对象不存的时候,造成浏览器左下边的黄色感叹号。例如网页开始存在id为t1的元素,后来去掉了。js没有做相应的处理就会出现js错误;使用jQuery的$就可以避免这个问题
jQuery中的$()返回的是对象数组,因此要判断网页中是否存在某个某个元素不能使用
if($("#t1")){}
而要使用
if($("#t1").length>0){}或者if($("#t1")[0])
jQuery选择器使用举例:
$("li").addClass("normalStyle");
$(".alter").addClass("alterStyle");
$("h1,h2,h3").addClass("h");
$("#btn").addClass("button");
层次选择器:
$("div span") 选择<div >里面所有<span>元素
$("div > span")选择<DIV>元素下各元素名为<span>的元素,这个和上一个感觉没有区别
$("prev+span")选择紧靠在prev元素后的next元素 只有一个元素
$("prev ~ siblings")选择prev元素之后的所有sibling元素。
:这里主要是说了一个如何利用jQuery来选择元素。大致是说jQuery的选择器和CSS的选择器很像,可以按照css来选择。同时jQuery又比CSS选择器厉害一些。提供了> + ~等。
jQuery过滤选择器
基本过滤选择器
:first(选取第一个元素)
:last("选取最后一个元素)
:even(选取索引是偶数的所有元素)(0开始)
:odd 奇数选择器
:ep(index) 相等的index的元素 。优先类似于数组操作
:gt(index) big than 大于索引
:lt(index) litter than 小于索引
:header (选取所有的h1,h2,h3,h4,h5,h6)
:animated(选取当前正在执行动画的所有元素)
2:内容过滤器
:contains(text) 选择还有文本内容为text的所有元素
:empty()选取不包含子元素或者文本的空元素
:has(selector)选择含有选择器素偶匹配的元素的元素 (这是一个什么意思i)
:parent 选取含有子元素或者文本的元素
可见性过滤器
:hidden 选取所有不可见的元素 $("input :hidden")
:visiable 选取所有可见元素
属性过滤器;
[attribute]//选取拥有此属性的元素
[atribute = value] //选取属性的值为value的元素
[attribute !=value]
[attribute ^=value]//选择属性的值以value开始的元素
[attribute $=value]//选择属性的值以value结束的元素
[attribute *=value]//选择属性的值含有value的元素
[selector1][selector2][selectorN] //属性选择器中合并一个复合属性选择器,注意此为属性选择器的并集,如$("div[id] [class$='bar']")
子元素选取过滤器
:nth-child (index/even/odd/equation)//选取第index个子元素或者奇偶元素
:first-child //选取每个父元素的第一个元素(返回整个文档中每个元素的第一个子元素)
$("ul li:first-child")选中每个<ul>中的第一个元素
:last-child//选取每个父元素的最后一个元素
:only-child //如果某一个元素是其父元素中惟一的子元素,将会被匹配。
表单属性过滤器
:enable //选中所有可用元素 $("#form1:enabled")
:disabled //选取素偶不可用的元素
:checked //选取所有被选中的元素(checkbox radio)
:selected //选取所有被选中元素(下拉列表)
表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
总的来说,这一节主要讲了一个类容,就是怎样从众多的元素中找到你需要的那一个。同时这个也就解决了一个问题,我们可以利用属性过滤器来得到多个类的元素
使用jQuery操作DOM
查找节点;
$("ul li:eq(0)').text()获取 <ul>中第一个<li>节点内的文本内容
$("ul li:eq(0)").attr("href")获取第一个<a>的href属性。
创建节点
2、创建元素节点:1,创建一个新的元素,2将新元素插入到文档中(父元素之中)
$(function(){
var p = $("<p></p>");//不可使用$("<p>") 或者$("</p>").可使用$("<p/>")
$P.text("dddddd");
$("body").append($p);
});
2,创建文本节点
<p>$(function(){
var $P = $("<p>一段文字</p>");
$("body").append($p);
});
</p>
//只是一个i什么意思啊/好像还没有搞懂。
这一段没有意义。
插入节点:
append()//项每一个匹配的元素内部追加内容
appendTo()//将所匹配的元素追加到指定的元素中;$(a).appenTo(b) 将a追加到b中
加载内容的后面
prepend() 向每一个匹配的元素内容前置内容
如:$("p").prepend("<b>您好!</b>");
结果 :<p><b>你好</b>Walkingp</p>
加载内容的前面
prependTo()将所匹配的元素前置到指定的元素中。$("<b>您好</b>")。prependTo("p")
prependTo 和 prepend()功能上是一样的,只是调用的方向不一样而已。
after() 在每一个匹配的元素之后插入内容。如$("p")after("<b>你好</b>")
insertAfter()将所有匹配元素插入到指定元素的后面
befote()在所匹配的元素之前插入内容
insertBefore()将所匹配的元素插入到指定的元素的前面。
关于After和Before的介绍是不正确的 ,正确的资料以后在说。并且在实际应用中好像这个before和after使用概率比较少。
删除节点
remove()方法。 $("ul li:ep(1)").remove()。
empty()方法。 $("ul li:ep(1)").empty()。
复制节点
clone()方法:克隆匹配的DOM元素并且选中这些克隆的副本。
属性操作:
获取属性的值和设置属性
$(selector).attr(attribute);
$(selector).attr(attribute,value);
$(selector).removeAttr(attribute);
使用不带参数的函数表示获取值,多带一个参数的函数表示设置值
CSS的操作
获取样式及设置样式。
使用$(selector).attr(css-selector)可获取相应的css取值,
使用$(selector).attr(css-selector,value)可设置其值。
使用attr("class",value)方法比较繁琐且添加的效果是覆盖。而addClass是追加。
移除样式
$(selector).removeClass(css-class)
另外jQuery还提供了一个切换两个元素CSS类的函数toggleClass()使用方法
$(selector).toggleClass(selector2)
判断是否含有某一个样式。
$(selector).hasClass(css-class)
val()用来设置和获取元素的值,包括元素有:文本框,下拉列表还有单选框。使用val()返回元素的value值,使用val(value)设置元素值。
DOM方法操作节点
children() //取得匹配元素的子元素集合
next()//取得匹配元素后面紧邻的同辈元素
prev()//取得匹配元素前面紧邻的同辈元素
siblings()取得匹配元素前后所有的同辈元素集
colseset()取得最近的匹配元素
下面是jQuery和DOM Core的比较
children() childNodes
next() nextSibling
prev() previousSibling
first() firstChild
last() lastChild
parent() parentNode
jQuery绑定事件的方法:
bind("click",function(){
})
事件解除的方法
$(this).unbind();
事件冒泡与事件捕获
事件冒泡:一种很形象的说法;事件会按照DOM的层次结构像水泡一样不段的向上直到顶端。
事件捕获:与事件冒泡相反,从最顶端往下触发。
模拟操作
trigger(event)触发事件 可以模拟事件的触发。
Ajax
load函数。load语法如下:
load(url,[,data],[,calllback])
// url : string 类型,请求HTML页面的URL地址
// data:Object类型,发送到服务器的key/value数据
//callback,function类型,请求完成时的回调函数。