一:选择器
1.简介:jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS选择器和一些自定义的选择器。
之前看到的jQuery基础语法的$()就是选择器。允许对HTML元素组或单个元素进行操作。
比如下面的语句:
$(document).ready(function(){
$(button).click(function(){
$(this).hide();
});
})
就是先选择document整个HTML文件,然后选择按钮,之后选择当前元素进行隐藏。
2.下面进行一些常用的实例讲解:
(1)选择标签的id元素
在页面中选取唯一的id元素需要通过 #id 选择器
语法如下:
$("#id等于的值")
(2)选择标签的class元素
在页面中选取class元素需要通过.class选择器
语法如下:
$(".clss元素等于的值")
(3)其他实例
下面是一些实例和它们对应的含义:
含义 | 语法 | |
---|---|---|
选取所有元素 | $("*") | |
选取当前 HTML 元素 | $(this) | |
选取 class 为 intro 的 <p> 元素 | $("p.intro") | |
选取第一个 <p> 元素 | $("p:first") | |
|
$("ul li:first") | |
选取每个 <ul> 元素的第一个 <li> 元素 | $("ul li:first-child") | |
选取带有 href 属性的元素 | $("[href]") | |
选取所有 target 属性值等于 "_blank" 的 <a> 元素 | $("a[target='_blank']") | |
选取所有 target 属性值不等于 "_blank" 的 <a> 元素 | $("a[target!='_blank']") | |
选取所有 type="button" 的 <input> 元素 和 <button> 元素 | $(":button") | |
选取偶数位置的 <tr> 元素 | $("tr:even") | |
选取奇数位置的 <tr> 元素 | $("tr:odd") |
3.(1)注:通过 $(":button") jQuery 中表单选择器,可以选取所有 type="button" 的 <input> 元素 和 <button> 元素,如果去掉冒号,$("button")只能获取 <button> 元素。
(2)关于:和[ ]这两个符号的理解
: 为 jQuery 的过滤选择器,语法类似于 css 中的伪类选择器,可以理解为可以选择种类的意思,比如h:first和p:second可以理解为h种类的第一个和p种类的第二个,分为基本过滤(p:first 之类)、内容过滤(:empty)、子元素过滤(:first-child)。
[ ] 为属性过滤 [href] 选择器,可以理解为属性的意思,选择[ ]里边的属性。
二:独立文件使用jquery
我们可以吧jquery函数代码抽出来放到独立的js文件中去,并用src进行引用,这样比较便于维护。
效果如下:
二:事件方法(事件处理程序)
本作者有一个项目需要短时间内完成,下面的内容先具体要讲解一下要用到的内容,后面会介绍一下我的项目。
这里只涉及按钮事件。