下载,使用
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(); 取消对$的绑定
3030





