jQuery基础

jQuery是什么?

jQuery是一个优秀的JS框架,他能够是用户更方便的处理HTML文档、动画效果和Ajax交互等。他的出现极大程度的改变可开发者使用js的习惯,掀起了一场新的网页革命。

jQuery的主要功能?

1)访问页面框架的局部。

2)修改页面的表现。

3)更改页面的内容。

4)响应事件。

5)为页面添加动画。

6)与服务器异步交互。

7)简化常用的技术操作。

下载jQuery  http://jQuery.com/提供最新的jQery框架下载。

通用语法:   $(selector)或jQuery(selector)其中selector符合CSS3标准;

选择元素:

 id选择器: $("#showDiv")相当于js中的document.getElementById("#showDiv"),可以看到jQery简洁很多;

类别选择器:$(".SomeClass") 选择css类别为someclass的所有节点元素,在js中实现相同的选择,需要用for循环遍历整个DOM;

$("P:odd") 选择所有奇数行的<P>标记。几乎所有的标记都可以使用“:odd”或者":even"来实现奇偶的选择;

$("td:nth-child(1)")所有表格行的第一个单元格,就是第一行。

$("li>a")子选择器,返回<li>标记的所有子元素<a>,不包括孙标记

$("a[href$=pdf]")选择所有的超链接,并且这些超链接的href属性是以'pdf'结尾的。

创建DOM元素

<script language = "javascript">

$(function(){             //ready()函数

  var newP = $("<p>hello</p>")   //创建DOM元素

  newP.insertAfater("#myTarget")    //insertAfter()方法

})

</script>

.....

<p id = "myTarget">插入到这行数字之后</p>

<p>也就是插入到这行文字之前,但是这行没有id,也可能不存在</p>

使用选择器

1、使用选择器

$("a[title]") 选择设置了title属性的标记$("a[title]").addClass("myClass")增加myClass样式风格

$("a[href=10-9.html]").addClass("myClass")href的属性值等于"10-9.html"的超链接添加myClass样式风格

$("a[href^=http://]").addClass("myClass")href的属性值以http://开头超链接添加myClass样式风格

 $("a[href$=html]").addClass("myClass")href的属性值以html结尾超链接添加myClass样式风格

2、包含选择器

$(li:has(a))包含了所有超链接的所有<li>标记

$("ul li ul li:has(a)").addClass("myClass")选中的二级项目列表所有包含了超链接的<li>标记

3、位置选择器

$("p:first-child")选择第一个<p>标记通过:first-child来选择

$("p:nth-child(odd|even)").addClass("myClass")选择奇偶行进行添加myClss样式

$("p:eq(4)").addClass("myClass")选择说有<p>列表中的第五个

4、过滤选择器

5、反向过滤

$(":input:not(:checkbox):not(:radio)").addClass("myClass")表示所有<input>、<select>、<textarea>或<button>中而非checkbox和非radio的元素,这里注意input与:input的区别

管理选择结果

1、获取元素的个数

$("img").size()

2、提取元素

$("img[title]")[1] 等同于 $("img[title]").get[1]

3、添加、删除、过滤元素

添加:$("img[alt]").add("img[title]") 等同于 $("img[alt],img[title]")

删除:$("li[title]".not("[title*=issac]"))表示选中所有设置了title属性的<li>标记,但不包括title值中任何匹配字符串"issac"的那些

过滤:$("li").filter("[title*=isaac]")表示在<li>标记的列表中删选出的那些属性title值任何字符串"isaac"的标记

4、查询过滤新元素集合

$("p").find("span")搜索<span>标记,获取一个新的元素集合,他完全等同于$("span",$("p"))

先写到这,本文章全是列出Jqery一部分属性,具体的各种属性,我们可在网上搜到,在这就不陈述!

原文地址:https://www.cnblogs.com/gaoshuai/p/1765829.html