学习了jquery真的发现jquery真的特别的强大,封装很多的方法和属性,很多的前端开发者可以节省很少的时间实现想要的效果,而且还可以学习它的源码有助于学习CSS,是个不错的选择。推荐一个网站学习jquery很简单很快 codeschool jquery学习 ,我觉得这个网站里面不管是jquery还是其他的东西都写的很简单,属于那种边练习边学习那种,免得在学的时候找不到东西来练习的,还不错。
在使用jquery之前必须引用jquery库文件,类似与javascript里面引用脚本文件,例如:
<script type="text/javascript" src="jquery.js"></script> //引入jquery文件
jquery能够对页面上面的元素进行两种操作:
(1)定位页面元素(jquery 选择器):jquery里面选定元素使用的是 $,可以通过id,class,name很简单的获取到相应的元素
$("p") //获取所有的p元素 $("#myid") //通过ID获取页面元素 $(".cl") //通过class获取页面元素
不仅如此,jquery还可以通过得到该元素的子元素,父元素,同胞元素。
$("span").parent(); //选择父元素 $("div").children(); //选择子元素 $("p").siblings("div"); //匹配相邻的div
(2)对选定的元素进行操作
$("#test").html(); //得到或者设置标签的内容(包含html) $("#test").text(); //得到或者设置标签的内容 $("#test").val(); //得到或者设置表单的值 $("#test").attr("href"); //得到或者设置标签属性的值 $("p").append("Some appended text."); //在p元素结尾追加内容 $("p").prepend("Some prepended text."); //在p元素开头添加 $("p").after("Some text after"); //在p元素后面添加 $("p").before("Some text before"); //在p元素前面添加
(3)添加事件:jquery可以监听事件,可以给页面里面的元素添加事件达到我们想要的效果,例如点击某个按钮,发生某种效果。
$("#myId").click(function() { alert("hello world"); }
jquery事件都是在页面全部元素加载完成以后才会触发,当页面元素加载完成以后会触发ready事件,而加载页面的事件,也就是说jquery里面的事件必须写在ready函数里面才会触发。例如:
$(document).ready(function(){ $(".btn1").click(function(){ //添加button点击事件 $("p").slideToggle(); }); });
基本上这样就可以简单的开始使用jquery了,深度的jquery在慢慢学习的过程就会接触到。