jQuery基础

下载，使用

http://jquery.com/download/
<script src="../js/jquery-3.2.1.min.js"></script>

选择器

• id选择器 $('#id');
• 元素选择器 $('p');
• 类选择器 $('.class');
• 通配符选择器 $('*');
• 复合选择器 $('#id1, #id2');
• 后代选择器 $('form input');
• 伪类选择器 $('li:...');
• :first 第一个
• :last 最后一个
• :checked 已选择
• :not(:checked) 未选择
• :odd 奇数
• :even 偶数
• :eq(3) 索引 = 3
• :gt(2) 索引 > 2
• :lt(4) 索引 < 4
• :contains('aa') 包含文字 aa
• :empty 没有子元素或内容
• :parent 含有子元素或内容
• :has(p) 有子元素 p
• :hidden 隐藏的
• :visible 可见的
• 子元素选择器
• :nth-child(odd) 奇数
• :nth-child(even) 偶数
• :nth-child(3n-1) 第3n-1个(n为正整数)
• :first-child 第一个子元素
• :last-child 最后一个子元素
• :only-child 唯一子元素
• 属性选择器 div[...]
• [id] 有id属性
• [id=div2] id为div2
• [id!=div2] id不为div2
• [id^=div] id以div开头
• [id$=div] id以div结尾
• [id*=div] id包含div
• [id][id!=div2] 有id属性且id不为div2
• 表单选择器
• :input 返回所有表单元素(input, textarea, select, button)
• :button
• :text
• :checkbox
• :radio
• :image
• :password
• :reset
• :submit

属性操作

• $('#img').attr('src'); 获取src属性值
• $('#img').attr('src', '../img/img.jpg'); 修改src属性值为’../img/img.jpg’
• $('#img').attr({src: '../img/img.jpg', alt:'img'}); 设置多个属性值
• $('#img').attr('title', function(index,prev){return $(this).src;}); 设置计算属性值index:索引,prev:之前的值
• $('#img').removeAttr('src'); 移除src属性值
• $('#img').addClass('myclass'); 添加类属性
• $('#img').removeClass('myclass'); 移除类属性
• $('#img').toggleClass('myclass'); 开关类属性
• $('#img').addClass(function(index,prev){}); 添加计算类属性
• $('div').html(); 获取第一个匹配元素的内容
• $('div').html('hello'); 修改所有匹配元素的内容
• $('div').html(function(index,val){}); 计算修改所有匹配元素的内容
• $('div').text(); 获取所有匹配元素的组合文本
• $('div').text('hello'); 修改所有匹配元素的文本
• $('div').text(function(index,val){}); 计算修改所有匹配元素的文本
• $('input').val(); 获取匹配元素的值
• $('input').val('123'); 设置匹配元素的值

解决多库冲突

jQuery.noConflict(); 取消对$的绑定