JQeury1 -CSDN博客

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>

JQuery2