简介:我相信做前端的大部分人都是用过这个框架,严格意义上还不能说是框架,只能说是常用函数库的一个封装。
jQuery的优势:
强大的选择器(利用CSS的优势) 出色的DOM操作 可靠的事件处理机制 完善的ajax 出色的浏览器兼容 链式操作 (一大特点) 丰富的插件并支持扩展 完善的文档 开源
如何使用呢,可以下载它的压缩包或者引入网上的CDN。总的来说还是很方便的。
我们闲话少说,直接开始我们的讲解:
1. jQuery选择器:
选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器, jQuery的行为规则都必须在获取到元素后才能生效。
jQuery选择器分为:
基本选择器; 层级选择器; 常用伪类选择器: 可以看作是一种特殊的类选择符;
- Query基本选择器:
包括ID选择器,标签选择器,类选择器,通配选择器和组选择器5种
1. ID选择器: (“#id”)根据给定的ID匹配一个元素。
如果选择器中包含特殊字符,可以用两个反斜杠转义。
2.标签选择器:(“element”) 根据给定的元素名匹配所有元素
3. 类选择器:
5. 组选择器:
//表示的是id为main 的元素下的所有的input
$('#main input').css('background','red');
2. 子选择器:$(“parent > child”) 在给定的父元素下匹配所有子元素
//改变id为main的元素下的所有的input子元素的背景为黑色;
$('#main > input').css('background','black');
3. 相邻选择器:$(“div + next”)匹配所有紧接在div元素后的next元素。等同于next()方法
``` 找寻同级后面的元素 //查找id为main的 同级的 下一个input元素 $('#main + input').css('background','pink'); //next() jq 的方法 查找同级的下一个元素 $('#main').next('input').css('background','red'); $('#main').next().css('background','red'); //查找id为mian的同级的后面的所有的input $('#main ~ input').css('background','royalblue'); //nextAll() $('#main').nextAll('input').css('background','royalblue'); //查找id为mian的同级的后面的所有的元素 $('#main').nextAll().css('background','royalblue'); ``` 4. d.兄弟选择器:$(“div ~ siblings”)匹配div元素之后的所有兄弟节点。等同于nextAll()方法. ``` 同级前面的元素 //prev() 查找同级的前面一个元素 $('#main').prev('input').css('background','red'); //prevAll() 同级的前面所有的元素 $('#main').prevAll('input').css('background','red'); $('#main').prevAll().css('background','red'); //siblings()查找所有的兄弟节点;不包括它自己,可用来做排除节点 $('#main').siblings('input').css('background','green'); $('#main').siblings().css('background','green'); ```
- 常用伪类选择器:
选择器 | 说明 ---|--- :first | 匹配找到的第1个元素 :last | 匹配找到的最后一个元素 :eq(index) | 匹配一个给定索引值的元素 :even | 匹配所有索引值为偶数的元素 :odd | 匹配所有索引值为奇数的元素 :gt(index) | 匹配所有大于给定索引值的元素 :lt(index) |匹配所有小于给定索引值的元素 :not | 去除所有与给定选择器匹配的元素 :gt(index) | row 2 col 2
//:first : 所有ul下的所有li中的第一个li(只有一个) $("ul li:first ").css("background-color", "orange"); //:first-child : 每个ul下的第一个li $("ul li:first-child").css("background-color", "orange"); //:last-child : 每个ul下的最后一个li $("ul li:last-child").css("background-color", "yellow"); //:nth-child(n) : 第n个子节点 $("ul li:nth-child(2)").css("background-color", "green"); //偶数 nth-child(even) $("ul li:nth-child(even)").css("background-color", "green"); //奇数 nth-child(odd) $("ul li:nth-child(odd)").css("background-color", "yellow"); //公式 隔3个改变一下颜色 $("ul li:nth-child(4n+1)").css("background-color", "pink");常用属性选择器:
//返回 含有id属性的div $(“div[id]”); //返回name属性等于newsletter $("input[name='newsletter']"); //返回name属性不等于newsletter $("input[name!='newsletter']"); //[id^=p]: 匹配id以p开头的元素 $(“input[id^=p] ”); //[id$=p] : 匹配id以p结束的元素 $(“input[id$=2]”); //返回name属性包含man的标签 $(“input[name*=‘man’]”); //找到所有含有 id 属性,并且它的 name 属性是包含 man 的$("input[id][name*='man']") val()方法: $(“input[id$=2]”).val(); //获取该节点的value值 $(“input[id$=2]”).val(“修改value值”); //给该节点的value赋值(修改value值)常用表单选择器:
:input //匹配所有 input, textarea, select 和 button 元素 :text //匹配所有的单行文本框 :password //匹配所有密码框 :radio //匹配所有单选按钮 :checkbox //匹配所有复选按钮 :submit //匹配所有提交按钮 :reset //匹配所有重置按钮 :button //匹配所有按钮 :hidden //匹配所有不可见元素,或者type为hidden的元素 :visible //匹配所有可见元素,或者type为visible的元素 div:parent //匹配div的父节点元素 p:empty //匹配所有空的p元素 div:contains(x) //匹配文本包含x内容的div元素 查找所有的属性值为radio和checked的节点 console.log($(':radio:checked')); 不能查找下一个文本节点,只能查找下一个标签节点的内容 console.log($(':radio:checked').next().text() ) 得到input后边跟的text文本节点的内容 console.log($(':radio:checked')[0].nextSibling.nodeValue) //通过判断jq对象的长度 来确定匹配成功的对象的个数 if($('div').length>0){ console.log('不为空'); }else{ console.log('为空'); }基本筛选器和过滤方法:
内容修改 html([val|fn]) //用于获取(设置)元素HTML内容 text([val|fn]) //用于获取(设置)元素文本内容 val([val|fn|arr]) //用于获取(设置)表单元素的值
attr(name|pro|key,val|fn) //设置或返回被选元素的属性值 removeAttr(name) prop(n|p|k,v|f) //设置或返回被选元素的属性值(布尔属性) removeProp(name) console.log($('img').attr('src')); //img/1.jpg console.log($('img').prop('src')); //http://127.0.0.1:8020/JQ/november15/img/1.jpg console.log($('img').attr('title')); //img[x] attr 和 prop的区别
console.log($(':checkbox').attr('checked') ); //undefined console.log($(':checkbox').prop('checked')); //false $(':checkbox').prop('checked','checked'); //设置checked属性为checked console.log($(':checkbox').prop('checked')); //true $('img').eq(0).attr('attrd','ddd');//设置的属性检查的时候可以看到 $('img').eq(0).prop('propd','ddd');//设置的属性检查的时候看不到
addClass(class|fn) //为每个匹配的元素添加指定的类名。 removeClass([class|fn]) toggleClass(class|fn[,sw]) //如果存在(不存在)就删除(添加)一个类。 //toggleClass() 切换样式 判断是否存在样式 如果有就删除 没有就添加 $('button').first().click(function(){ $('#box').toggleClass('box2'); }); 判断class是否存在的方法: hasClass() console.log($('#box').hasClass('box2') )//false 返回值为false或者true show() 和 hide() $('div:hidden').show(1000); //显示隐藏的jq对象,参数为动画完成时间,可不写,同时改变宽高 $('div:visible').hide(2000);//隐藏jq对象 toggle():切换显示和隐藏 hide隐藏 show 显示,同时改变宽高 $('button').last().click(function(){ $('#box').toggle(1000); })
css(name|pro|[,val|fn]) //获取(设置)匹配元素的样式属性 width([val|fn])/height([val|fn]) innerWidth()/innerHeight() 不包括边框 outerWidth(o) /outerHeight (o) options ? 包含外边距 height()用法与width()一样 console.log($('#box').width() ) //width console.log($('#box').innerWidth()); //width +padding console.log($('#box').outerWidth()) //width +padding +border console.log($('#box').outerWidth(true)) //width +_padding +border +maring offset([coordinates]) //获取/设置匹配元素相对浏览器窗口的偏移(包含滚动条滚动的距离), 返回{left:xx,top:xx},。 设置:$(selector).offset({top:value,left:value}); offset () 相对于浏览器窗口的偏移量 console.log( $('#box').offset() ); position() //获取匹配元素相对父元素(设置了定位)的偏移,如果无设置定位的父元素,则相对于根元素的偏移。(相对于offsetParent元素的偏移量) position () 相对于定位父级的偏移量 console.log($('#box2').position().left,$('#box2').position().top); scrollTop () $('body,html').scrollTop(500) //设置滚动距离,body兼容chrome,html兼容firefox console.log( $('#box').scrollTop() ); //scrollTop获取当前的滚动
选择的样式 | 代表的含义 |
---|---|
$(“li:first”); | 第一个元素 |
$(“li:last”); | 最后一个元素 |
$(“ul:eq(1) “) | 第二个UL |
$(“li:even”) | 偶数行 从0开始 |
$(“li:odd”) | 奇数行 从1开始 |
$(“tr:gt(0)”) | 比0大的 |
$(“tr:lt(2)”) | 比2小的 |
$(“tr:hidden”) | 隐藏的元素 |
$(“:visible “) | 匹配所有的可见元素 |
$(“li:not(.subnav) “) | 去除所有与给定选择器匹配的元素 |
$(“div:contains(‘John’)”) | 包含 |
$(“li:last”); | 最后一个元素 |
$(“li:last”); | 最后一个元素 |
eq(index|-index),获取第N个元素 filter(expr|obj|ele|fn),筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式 filter() $('li').filter('.li,:first').css({ "width":100, "height":100, "background":"red" }); //参数可以是一个回调函数,回调函数返回真和假,返回真的时候 遍历到的元素就会出现在匹配的结果里面,返回假 遍历的元素就不会出现在匹配结果里面 $('li').filter(function(index){ //index 是遍历到的li 序号 console.log(index); return index%2==0 }).css({ "width":100, "height":100, "background":"red" }); slice(start, [end]),选取一个匹配的子集 slice(a,b) 截取下标在[a,b)的元素 $('li').slice(1,4).css('background','red'); //前闭后开[1,4) $('li').slice(-3).css('background','red'); //从倒数第一个到倒数第三个$('li').slice(-3,-1).css('background','red'); //从倒数第二个到倒数第三个 map(fn),将一组元素转换成其他数组(不论是否是元素数组) 可以用jq的map()方法替代for循环遍历 temp = $(':checkbox:checked').map(function(){ //此处的this相当于$(':checkbox:checked')[i],是一个js对象,$(this)这样可以把this转化为jq对象 return this.nextSibling.nodeValue; }).get().join(' '); //temp的值为:旅游 睡觉 //map 是一个jq的方法 遍历jq对象的数组部分 ,参数是一个回调函数 回调每执行一次都会有一个返回值 var te = $(':checkbox:checked').map(function(){ //此处的this相当于$(':checkbox:checked')[i],是一个js对象 return this.nextSibling.nodeValue; }); console.log(te); //["旅游? ", "睡觉? ", prevObject: jQuery.fn.init[2], context: document] console.log(te.get()); //["旅游? ", "睡觉? "] console.log(te.get().join(' ')); //旅游 睡觉 has(expr|ele),保留包含特定后代的元素,去掉那些不含有指定后代的元素。 not(expr|ele|fn),删除与指定表达式匹配的元素; not() 排除匹配结果,不能是文本内容 $('li').not('.li,#idli').css('background','red'); hasClass(class),检查当前的元素是否含有某个特定的类,如果有,则返回true。 is(expr|obj|ele|fn), 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合,或者表达式无效,都返回'false'。 is() 判断是否是该元素 console.log($('#idli').parent().is('ul') );
parent([expr]) 只筛选出最近的一个父节点; parent()父节点 $('#idli').parent().css("background","black") parents() 筛选出各层父节点 console.log($('#parents').parents()); closest(expr|obj|ele) //从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素 //closest() 查找最近匹配成功的父节点 $('#closest li').closest('div').css('background','red'); offsetParent() 方法返回最近的父级定位元素。 定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。 筛选子节点 //children() 筛选出所有子节点 $('#children').children().css('color','red'); //find() 查找某个子节点,必须有参数 $('#children').find('span').css('color','gold'); //nextUntil() 直到匹配结果 结束 匹配范围是[#start,#end) $('#start').nextUntil('#end').css('background','green');
元素创建 : $('
blur([[data],fn]) //失去焦点时触发 change([[data],fn]) //值改变时触发 click([[data],fn]) //点击时触发 dblclick([[data],fn]) //双击事件 focus([[data],fn]) //获得焦点 focusin() focusout() //在div内部获取到了焦点时触发(只有div内部有input时才能使用) $('#box').focusin(function(){ console.log('内部获取到了焦点'); }).focusout(function(){ console.log('内部失去了焦点'); }); //键盘事件 绑定键盘事件的对象是window //keydown() 键盘被按下 $(window).keydown(function(e){ //e 表示键盘 console.log('按键的值'+e.keyCode); }); keypress() $(window).keypress(function(e){ var charCode = e.charCode; //e.charCode是按下字母对应的ASCII码 var ch = String.fromCharCode(charCode); console.log(ch); }); 鼠标事件 mousedown([[data],fn]) mouseup([[data],fn]) mouseenter([[data],fn]) //事件不会冒泡 mouseleave([[data],fn]) ) //事件不会冒泡 mouseover([[data],fn]) mouseout([[data],fn]) mousemove([[data],fn]) resize([[data],fn]) 窗口大小改变时触发,对象是window scroll([[data],fn]); scroll() $('#box').scroll(function(){ console.log( $('#box').scrollTop() ); })
2.事件绑定:
on(eve,[sel],[data],fn) 命名空间, 自定义事件(对事件加以细分),一次性绑定多个事件,事件之间以空格隔开; on绑定的事件也可以写成对象 $('div').on({ 'mouseenter': function() { $('div').show(); }, 'mouseleave': function() { $('div').hide(); } }); //上下拉显示 slide $('button').eq(0).click(function(){ //$('#box').hide(2000); //slideUp 向上隐藏 $('#box').slideUp(2000,function(){ //动画结束后的回调 console.log("动画结束"); }); }); $('button').eq(1).click(function(){ //$('#box').show(2000); //slideDown 下拉显示 $('#box').slideDown(2000); }); $('button').eq(2).click(function(){ //$('#box').toggle(2000); //切换上下拉 slideToggle $('#box').slideToggle(2000); }); //animate 组合使用 形成以个动画序列 $('#box').animate({ "width":"+=200px", "height":"+=200px", "left":"+=200px", "top":"+=200px" },1000); //stop() $('button').eq(1).click(function(){ //首先要知道停止动画的对象,这里的对象就是动画的对象 //如果不加参数 默认是停止当前动画 剩下的动画会顺序执行 // $('#box').stop(); $('#box').stop(true); }) //finish() 立即完成 $('button').eq(2).click(function(){ $('#box').finish(); }); e.pageX 、 e.pageY 、 e.target 、 e.type $(".cart-list").click(function(e){ console.log(e.pageX); //鼠标相对于浏览器的左边距 console.log(e.pageY); //鼠标相对于浏览器的上边距 console.log(e.target); //事件发生的源头,也就是触发事件的对象 console.log(e.type); //事件的种类 比如click、mouseover... var $node =$(e.target) //也可以转换成jq对象 //判断元素的节点类型是否是span nodeName的值是大写的 if(e.target.nodeName=="SPAN"){ e.target.parent().remove(); }; //trim 删除字符串前后的空白字符,字符串中间的空白字符不能删除; bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。所有bind的事件on都有,现在主流用on,少用bind; //map 通过jquery调用 var newArr = [11,22,33,44,55,66,77]; var newnewArr = $.map(newArr, function(ele,index) { console.log(ele); //遍历到的数组的元素的值 console.log(index) //遍历的数组的元素的序号 return num*num }); // each与map的区别 each没有返回值 each 更快 each:传入的参数是什么类型,返回的就是什么类型 map :返回值始终为数组 //each $(window).scroll(function() { $('.louti').each(function(index, ele) { if($(window).scrollTop() >= $('.louti').eq(index).offset().top) { $('ul li').eq(index).find('span').addClass('active'); $('ul li').eq(index).siblings().find('span').removeClass('active'); } }) }) //$('body,html').animate({'scrollTop':0}); //each 用jquery调用 $.each(newArr,function(idnex ,ele){ console.log(this); console.log(idnex); console.log(ele); }); $('a').click(function(e){ //e eve 执行事件的控件 //阻止冒泡 e.stopPropagation(); //阻止默认行为 e.preventDefault(); //return false 即阻止默认行为 也会阻止冒泡 return false; }); trigger() 方法触发被选元素的指定事件类型
$.get(url,[data],[fn],[type]); $.post(url,[data],[fn],[type]); url:待载入页面的URL地址 data:待发送 Key/value 参数。 callback:载入成功时回调函数。 type:返回内容格式,json, jsonp, text, html, xml, script; ajax全局设置: .ajaxError(callback) //AJAX 请求发生错误时执行函数 .ajaxStart(callback) //AJAX 请求开始时执行函数 .ajaxSuccess(callback) //AJAX 请求成功时执行函数
设置全局 AJAX 默认选项,options为$.ajax方法中的参数。
API地址: 1)/ajax/ajaxtest 返回一个字符串 2)/ajax/getCity 获取城市列表,返回json字符串(数组) 3)/ajax/checkname 验证用户名是否被注册,返回"true"(未注册)/"false"(已注册) 参数:regname 已经注册的名字:['张三','李四','王尼玛','奥巴马'] 4)/ajax/weibo 微博信息,返回 5)/ajax/football 足球解说信息,返回 6)多人聊天室 获取:/ajax/chat?type=query 发送:/ajax/chat?type=send // 通过jsonp取实现跨域请求 $.ajax({ dataType:'jsonp', type:"get", url:"http://localhost:3000/ajax/getJSONP", // ajax/getJSONP 这个是后端给到的一个接口 success:function(res){ console.log(res) // update(res) }, error:function(){ console.log(arguments); } //从josn文件获得商品列表 $.get("goodlist.json",function(res){ console.log(res) $.each(res,function(index,obj){ $('ul').append("
Jq入口: $(function(){}); jQuery(function(){}); $(document).ready(function(){ }); jQuery(document).ready(function(){ }); 美化input选择框: input[type="checkbox"] { position: relative; width: 10px; height: 10px; border: 1px solid #006aaf; border-radius: 2px; vertical-align: middle; background: white; } input{font-size: 100%;-webkit-appearance: none;outline: none;} input[type="checkbox"]:checked:after { content: ''; position: absolute; left: 1px; top: 1px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } input[type="checkbox"]:checked { background-color: #006aaf; }