1. 第一个JQuery
$(document).ready()与onload的区别
<script type="text/javascript">
// 当文件加载完毕再执行
// 原生js写法
onload = function(){
alert('原生js');
}
// jquery 写法
$(document).ready(function(){
alert('jquery');
})
// 简写
$(function(){
alert('简写');
})
</script>
2. DOM对象和JQuery对象
js语言:
DOM 对象,只能使用原生js的方法及属性
DOM对象不能使用jQuery的属性及方法jQuery语言:
jQuery语法创建的对象,建议使用$开头
jQuery对象:是一个jQuery的结果集
jQuery创建出来的对象只能jQuery的属性及方法
jQuery对象就是对DOM对象的包装
jQuery对象只能使用jQuery对象的方法及属性
// 二者之间的相互转换
// jQuery对象转为DOM对象
var divJs1 = $div[0];
console.log(divJs1);
var divJs2 = $div.get(0);
console.log(divJs2);
// DOM对象转为jQuery对象
var $div2 = $(div1);
console.log($div2);
3.JQuery选择器
jQuery选择器的返回值为jQuery对象的结果集 本身是一组
jQuery对象
标签的选择器的结果不能直接使用,需要获取到里面的独立的对象在进行调用属性或方法可以使用2种方法获取对象;
1.get(index)或 [index] ===>返回DOM对象,只能调用DOM的属性
2.eq(index) ===返回jQuery对象 只能调用jQuery的属性和方法
选择器 | 语法格式 |
---|---|
1- id选择器 | $('#id') |
2 - 标签选择器 | $('标签名称') |
3 - class选择器 | $('.class') |
4 - 通配符选择器 获取到所有标签 | $('*') |
5 - 复合选择器 并集选择器 | $('选择器1, 选择器2'...) |
6 - 子代选择器 | |
6.1 能够获取到选择器1的所有的后代选择器2 | $('选择器1 选择器2') |
6.2 能够获取到选择器1的直属的子代选择器2 | $('选择器1 > 选择器2') |
7 - 同代选择器 | |
7.1 返回选择器1后面紧接(相邻)着的选择器2 | $('选择器1 + 选择器2') |
7.2 返回选择器1后面所有的选择器2 | $('选择器1~选择器2') |
8 - 过滤选择器 | |
8.1 visible 获取到显示(style="visibility: hidden" 也能获取) | $('input:visible') |
8.2 hidden; 获取隐藏的标签 | $('input:hidden') |
8.3 eq(index)选择器 获取第index个标签 | $('input:hidden:eq(0)') |
8.4 even 偶数 | $('tr:even') |
8.5 odd 奇数 | $('tr:odd') |
8.6 first:第一行 | $('tr:first') |
8.7 :parent :返回不为空的单元格,匹配含有子元素或者文本元素的 | $('td:parent') |
8.8 :empty : 返回空的单元格 | $('td:empty') |
8.9 :contains(str):返回包含内容为str的单元格 | $("td:contains('004')") |
8.10 :checked: 能够获取属性checked='checked'的标签 | $('input:checked') |
8.11 :selected 能够获取属性selected='selected'的标签 | $('option:selected') |
8.12 :disabled 获取不可用标签 | $('input:disabled') |
8.13 获取div下面的第一个p标签 | $('div p:first-child') |
8.14 获取div下面的最后一个标签 | $('div p:last-child') |
8.15 获取div下面的第index个p标签 | $('div p:nth-child(3)') |
8.16 获取div下只有一个p标签的p标签 | $('div p:only-child') |
9 - 属性选择器 | |
9.1 通过属性名称获取标签 | $('div[class]') |
9.2 属性class值为div1的 | $("div[class=div1]") |
9.3 所有包含str字符串的 | $("div[class*='str']") |
9.4 除了class = 'div3'的 | $('div[class!=div3]') |
9.5 以div开头的 | $("div[class^='div']") |
9.6 class$='ox' 以ox结尾的 | $("div[class$='ox']") |
9.7 以div3- 开头或值就是div3 | $("div[class丨='div3']") |
9.8 复合选择器 多个条件一起 | $("div[class][id]") |
9.9 ~= 必须包含该单词 而不是子字符串 | $("div[class~='tes']") |
10 - 交集选择器 class为name的div 注意与子代选择器的区别 子代选择器有个空格 | $('div.name') |
11 -特殊符号 | jQuery中 # . () [] 特殊字符 使用\ 转义 |
12 - 表单选择器 通过表单中的input类型获取标签 | $(':file') $(':password') 等 |
// 过滤选择器的小应用
<!--下拉框-->
<!--onchange:下拉框的事件-->
<select onchange="func()">
<option selected="selected">11</option>
<option>22</option>
<option>33</option>
</select>
<script>
// 当下拉框被触发时执行 !!!
function func () {
//console.log('123');
// 获取当前被选中的option
var $se = $('select option:selected');
console.log($se.get(0).innerText); // get(0) dom对象
}
</script>