JQuery入门

jQuery

jQuery是目前使用最广泛的javascript函数库 <script type="text/javascript" src="js/jquery-1.12.2.js"></script> jquery文档加载完再执行，将获取元素的语句写到页面头部，会因元素还没加载而出错 # readyf方法解决 <script type="text/javascript"> $(document).ready(function){ ..... } </script> # 简写 <script type="text/javascript"> $(function){ ..... }); </script> #JQ可以有多个入口函数 #JS原生一个页面只能有一个入口函数，如果有多个，只执行最后一个

jquery选择器

用法思想一：选择某个网页元素，然后对它进行某种操作作用：可以快速地选择元素，用length属性判断是否选择成功（大于0选择到元素） $("#myId") //选择id为myId的网页元素 $(".myClass") //选择class为myClass的元素 $("#ul1 li sapn") //选择id为ul1元素下的所有li下的span元素 $("input[name=first]") //选择name属性等于first的input元素 #自定义属性 data-xx="aa" # 对选集进行过滤 $("div").has("p"); //选择包含p元素的div元素(选中父级，p查找条件) $("div").not(".myClass"); //选择class不等于myClass的div元素 $("div").eq(5); //选择第6个div元素 # 选择集转移 $("#box").prev(); //选择id是box的元素前面紧挨的同辈元素 $("#box").prevAll(); //选择id是box的元素之前所有的同辈元素 $("#box").next(); //选择id是box的元素后面紧挨的同辈元素 $("#box").nextAll(); //选择id是box的元素后面所有的同辈元素 $("#box").parent(); //选择id是box的元素的父元素 $("#box").children(); //选择id是box的元素的所有子元素 $("#box").siblings(); //选择id是box的元素的同级元素（排它） $("#box").find("myClass"); //选择id是box的元素内的class等于myClass的元素(选中子集，box是查找条件) $(this).index(); //获取点击的索引

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样式 # 操作属性 # 1.html()取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); # 2.test()获取文本值 $('#div1').html(); // 设置html内容 $('#div1').html('<span>添加文字</span>'); # 3.trim() 给文本内容去掉两边的空格 $.trim($('#div1').html()) # 4.porp()取出或设置某个属性的值 // 取出图片的地址 var $src = $('#img1').prop('src'); // 设置图片的地址和alt属性 $('#img1').prop({src: "test.jpg", alt: "Test Image" }); # 5.attr()获取属性值 $('#img1').attr("src"); 特别注意：选择器获取的多个元素，获取信息获取的是第一个的

绑定click事件

#绑定click事件 $('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this) }) #获取元素索引值 使用index()方法

jquery动画

通过animate方法设置元素某属性值上的动画（一个或多个属性值）,动画执行完后会执行一个函数 /* animate参数：(不支持变色动画) 参数一：动画过程(css键值对)，要改变的样式属性值，写成字典的形式 参数二：动画持续的时间，单位为毫秒，一般不写单位 参数三：动画曲线(不常用)，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动 参数四：动画回调函数(function(){})，动画完成后要执行的命令 */ $('#div1').animate({ width:300, height:300 },1000,'swing',function(){ alert('done!'); });