1.jQuery中文文档网址
http://jquery.cuishifeng.cn/
2.jQuery选择器($符号相当于jquery)
(1)id选择器 $('#id')
(2)class选择器 $(".classname")
(3)标签选择器 $('tagname')
(4)组合选择器
<div id="i1"></div> <a></a> <div> <span class="c2"></span> </div> <script> var tag=$("a,.c2,#i10") //获取所有a标签、所有类名为'c2'的标签、id为'i1'的标签 </script>(5)层级选择器
$('#i1 a'); //获取id='i1'标签下的子子孙孙标签中所有的<a>标签 $('#i1>a'); //只获取id='i1'标签下的子标签中所有的<a>标签(6)基本筛选器
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li:first'); //获取所有<li>标签中的第一个<li>标签 $('li:last'); //获取所有<li>标签中的最后一个<li>标签 $('li:eq(3)'); //获取所有<li>标签中的索引为3的<li>标签(从0开始数) </script>(7)属性选择器
<div class="text"></div> <input type="text" /> <input type="text" /> <input type="button" /> <script> $('[type]'); //获取所有拥有type属性的标签 $('input[type="button"]'); //获取所有<input>标签中type属性值为'button'的标签 </script>(8)表单选择器
$(':text'); //获取所有文本类标签 $(':chexbox'); //获取所有复选框
3.对于复选框的jQuery操作
$('#tb:checkbox').prop('checked'); //获取id="tb"标签范围内所有复选框是否被勾选的情况 $('#tb:checkbox').prop('checked',true); //将对应的复选框全部设置为被勾选
4.jQuery循环方式
$('#tb:checkbox').each(function(k){ //k表示当前索引,该匿名函数中也可以不设置参数 $('this') //获取当前循环中的元素 })
4.三元运算符
var v = x>y?3:4; //若x>y,则v=3;否则v=4
5.筛选器
<div> <a>asdf</a> <a>asafd</a> <a>ghkj</a> <a id="i1"> <span>hahahah</span> </a> <a id="i2">hbb</a> <a>ftf</a> </div> <script> $('#i1').next(); //获取id='i1'的标签的下一个标签 $('#i1').nextAll(); //获取id='i1'的标签下面的所有兄弟标签 $('#i1').nextUntil('#i2'); //获取id='i1'的标签下面的所有兄弟标签直到id='i2'的标签处 $('#i1').prev(); //获取id='i1'的标签的上一个兄弟标签 $('#i1').prevAll(); //获取id='i1'的标签的上面所有的兄弟标签 $('#i1').prevUntil('#i2') //获取id='i1'的标签的上面的所有兄弟标签直到id='i2'的标签处 $('#i1').parent(); //获取id='i1'的标签的父标签 $('#i1').parents(); //获取id='i1'的标签的所有父祖辈标签 $('#i1').parentsUntil('#i3'); //获取id='i1'的标签的所有父祖辈标签直到id='i3'的标签处 $('#i1').children(); //获取id='i1'的标签的所有子标签 $('#i1').siblings(); //获取id='i1'的标签的所有兄弟标签 $("#i1").find('span'); //获取id='i1'的标签范围下的所有<span>标签 $('li:eq(1)'); //获取所有<li>标签中的索引为1的<li>标签 $('li').eq(1); //获取所有<li>标签中的索引为1的<li>标签 $('li').first(); //获取所有<li>标签中的第一个<li>标签 $('li').last(); //获取所有<li>标签中的最后一个<li>标签 $('#i1').hasClass('haha'); //判断id='i1'的标签类的值是否为'haha'。若为,则返回true;否则返回false。 </script>
6.文本操作(JS的内容,非jQuery)
$('#i1').text() //获取id='i1'的标签的文本内容 $('#i1').text('<a>1</a>') //对相应标签的文本内容进行重置,注意此处设置的‘<a>’与‘</a>’只被当做文本内容进行处理 $('#i1').html() //虽然它获取的仅是id='i1'的标签的文本内容,但它可以对整个标签进行重置 $('#i1').html('<div>1</div>') //对相应标签进行整个标签的重置,此处的‘<div>’与‘</div>’被当做标签处理 $('#i4').val() //获取id='i4'的标签的value值 $('#i4').val('666') //将id='i4'的标签的value值重置为'666' $('#i1').index() //获取id='i1'的标签相对于兄弟标签的索引值
7.样式操作
$('#i1').addClass('wwww'); //对id='i1'的标签添加'wwww'的类名 $('#i1').removeClass('wwww'); //移除id='i1'的标签中'wwww'的类名 $('#i1').toggleClass('wwww'); //若id='i1'的标签中的类名不存在'wwww',则添加该类名;若存在,则移除该类名
<script> $('#i1').click(function(){ // if($('.c1').hasClass('hide')){ // $('.c1').removeClass('hide'); // }else{ // $('.c1').addClass('hide'); // } $('.c1').toggleClass('hide'); //这一条语句相当于被注释掉的整个if结构的作用 }) </script>
8.属性操作(多用于设置自定义属性)
$('#i1').attr('id'); //获取id='i1'的标签的id属性 $('#i1').attr('id','reset'); //将id='i1'的标签的id值重置为'reset' $('#i1').removeAttr('id'); //移除id='i1'的标签的id属性
9. 文档处理
$('#i1').append('<span>hahha</span>'); //在id='i1'的标签的文本内容末尾追加HTML标记(也可以追加文本内容) $('#i1').prepend('<span>hhah</span>') //在id='i1'的标签的文本内容前面追加HTML标记(也可以追加文本内容) $('#i1').after(content) //在相应标签后面追加内容,其内容可以是HTML标记、DOM对象、jQuery对象 $('#i1').before(content) //用法和after相反 $('#i1').remove(); //移除整个标签 $('#i1').empty(); //对相应标签的文本内容进行清空 var c = $('#i1').clone(); //对相应标签进行复制,并将复制品传递给变量c;
10.位置获取
$(window).scrollTop(); //获取当前页面窗口滚动轮的位置(单位:px) $('div').scrollTop(); //获取<div>标签所属窗口滚动轮的位置(亦可进行滚动轮的位置设置) $(window).scrollTop(256); //将当前页面窗口滚动轮的位置设置在256px scrollLeft([val]); //与scrollTop用法类似,只是scrollTop是针对纵轴滚动条,而scrollLeft是针对横轴滚动条的 $("i1").offset().left; //获取相应标签在页面中的横轴坐标 $('i1').offset().right; //获取相应标签在页面中的纵轴坐标 $('i1').position().left; //获取相应标签相对于父标签偏移的横轴位置 $('i1').position().right; //获取相对于父标签偏移的纵轴位置 $('i1').height(); //获取相应标签的高度(含边框)(单位:px) $('i1').height(20px); //将相应标签的高度重置为20px $('i1').innerHeight(); //获取相应标签的内部高度(不含边框) $('i1').outerHeight(); //参数默认为false,此时相当于height() $('i1').outerHeight(true); //将参数设为true时,获取的高度包括外边距
11.绑定方式
(1)DOM的绑定方式参见JavaScript笔记(10);
(2)jQuery绑定方式
$('.c1').click(function(){ //绑定点击事件 //函数体 }); $('.c1').bind('click',function(){ //对相应标签绑定一个事件 //函数体 }); $('.c1').unbind('click',function(){ //对相应标签解绑一个事件 //函数体 }); $('.c1').delegate('a','click',function(){ //对相应的<a>标签绑定一个事件 //函数体 }); $('.c1').undelegate('a','click',function(){ //删除相应的<a>标签绑定的一个事件 //函数体 }); $('.c1').on('click'.function(){ //对相应标签绑定一个事件 //函数体 }) $('.c1').off('click',function(){ //删除相应标签的一个事件 //函数体 })
12.自执行函数,页面加载完后自动执行
$(function(){ //自执行函数,页面加载完后自动执行, //函数体,此处可以内嵌函数 }) //用自执行函数来封装局部变量,避免与其他JS文件冲突 (function(arg){ var status = 1; // 封装变量 arg.extend(...); //由于实参为jQuery,则该句等价于jQuery.extend(...) })(jQuery) //作为实参被传入函数体中
13.jQuery的扩展方法
<script> $.extend({ //第一种扩展方式 'chong':function(){ return 'hengheng'; } }); var v = $.chong(); //可以直接调用扩展函数 alert(v) $.fn.extend({ //第二种扩展方式 'dan':function(){ return 'haha'; } }) var v =$('#i1').dan(); //必须以标签为对象使用函数,这也就是两种扩展方式不同的地方。 alert(v); </script>
14.jQuery对象与JS对象之间的转换
jQuery对象[0] =====> DOM对象 DOM对象 =====> $(DOM对象)