2.1 jq的入口函数的写法
写法1:
$(document).ready(function(){
// 这里面开始写相应的 jQuery 代码...
});
写法2:
$(function(){
// 这里面开始写相应的jQuery 代码...
});
我一般使用写法2,两种写法都是为了防止文档在完全加载或者就绪之前运行jQuery代码,比如说文档尚未完全加载之前就运行函数,操作就会失败;
举个栗子:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
也就是说,如果浏览器还没有加载完html页面的所有节点,就触发了jQuery代码中的一些操作,它是获取不到相应的节点的,也就不能对该节点进行其他操作的;
2.2 jQuery的语法
- jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
- 换言之,jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
- $(selector).action()
通过 jQuery,可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions);
- 美元符号定义 jQuery
一提到$,我脑子里立马就想到了jQuery,说白了$相当于jQuery封装的一个选择器;
- 选择符(selector)"查询"和"查找" HTML 元素;
- jQuery 的 action() 执行对元素的操作
2.3 jq的选择器
- 1、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。
- 2、它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
- 3、jQuery 中所有选择器都以美元符号开头:$()
元素选择器
- $("elementName")
- 例: $("span")----->获取页面所有的span元素;
ID选择器
- $("#idName")
- 例: $("#box")----->获取页面中id="box"的元素,id为唯一;
类选择器
- $(".className")
- 例: $(".topBar")----->获取页面中所有class="topBar"的元素;
更多实例:
语法 | 作用描述 |
---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$("p.intro") | 选取 class 为 intro 的 <p> 元素 |
$("p:first") | 选取第一个 <p> 元素 |
$("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
$("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
$("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
$(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
$("tr:even") | 选取偶数位置的 <tr> 元素 |
$("tr:odd") | 选取奇数位置的 <tr> 元素 |