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);


 

Tongue Out上面说的东西只是在告诉我们首先不要将DOM和JQuery混淆了。第二DOM和JQuery对象是可以转换的。第三JQuery对象得到的结果都是用数组来存放的。

 

 

jQuery 选择器

jQuery选择器和CSS选择器十分类似。

css选择器的种类:

  1. 标签选择器:p{css rules}
  2. id选择器 :#ID{css rules}
  3. 类选择器:.Class{css rules}
  4. 群组选择器:h1,h2,h3{css rules}
  5. 后代选择器:div p {css rules}
  6. 通配选择器:* {css rules}
  7. 伪类选择器:a:link ,a:visited{css rules}
  8. 多类选择器
  9. 属性选择器
  10. 部分属性选择器
  11. 相邻兄弟选择器
  12. 子选择器

jQuery中基本选择器包括 *,class,element.id以及群组方式selector1,selector2………

Undecided 使用$可以避免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元素。

 

Foot in Mouth:这里主要是说了一个如何利用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);

Frown使用不带参数的函数表示获取值,多带一个参数的函数表示设置值

 

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类型,请求完成时的回调函数。

 

 



收藏
0个人 收藏

关注Joomla中国微信公众号,随时获得最新的Joomla新闻资讯!