JQuery基础学习(一) 小咪咪 2022-01-22 03:51 263阅读 0赞 # jQuery介绍 # **jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。 jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。** ## jQuery引用 ## <script type="text/javascript" src="js/jquery-1.12.2.js"></script> jQuery的网站和版本下载[JQuery官网][JQuery] [jQuery下载][jQuery] ## jQuery加载 ## **将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。** <script type="text/javascript"> $(document).ready(function(){ ...... }); </script> 此方法可以简写为 `$(function(){ });` # JQuery选择器 # **JQuery选择器主要用来选择某个元素来对其进行某种操作,和css中的选择器类似。css设置元素的样式,jQuery设置元素的行为** 下面是几种选择器的 `$('#myId') //选择id为myId的网页元素 $('.myClass') // 选择class为myClass的元素 $('li') //选择所有的li元素 $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素 $('input[name=first]') // 选择name属性等于first的input元素` 对选择集进行过滤—— $('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').eq(5); //选择第6个div元素 选择集进行转移—— $('div').prev(); //选择div元素前面紧挨的同辈元素 $('div').prevAll(); //选择div元素之前所有的同辈元素 $('div').next(); //选择div元素后面紧挨的同辈元素 $('div').nextAll(); //选择div元素后面所有的同辈元素 $('div').parent(); //选择div的父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 $('div').find('.myClass'); //选择div内的class等于myClass的元素 jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。 ## JQuery样式 ## // 获取div的样式 $("div").css("width"); $("div").css("color"); //设置div的样式 $("div").css("width","30px"); $("div").css("height","30px"); $("div").css({fontSize:"30px",color:"red"}); 选择器获取多个元素获取的属性是第一个元素的信息 **操作样式类名** $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2 $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式 $("#div1").removeClass("divClass divClass2") //移除多个样式 $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式 # 绑定click事件 # $('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this) }) # 获取元素的索引值 # var $li = $('.list li').eq(1); alert($li.index()); // 弹出1 ...... <ul class="list"> <li>1</li> <li>2</li> <li>4</li> <li>5</li> <li>6</li> </ul> [JQuery]: http://jquery.com/ [jQuery]: https://code.jquery.com/
还没有评论,来说两句吧...