没有合适的资源?快使用搜索试试~ 我知道了~
Jquery基础知识的总结,帮助更好的学校Jquery
资源推荐
资源详情
资源评论
# 一,JQuery文件的导入:
# 使用的时候可不能忘记我们需要JQuery的内核包:jquery-1.XXX.XX.js
# 不要忘记在要是用的页面中导入该函数库,导入方法如下:
# <script type="text/javascript" src="[这里是JQuery.js文件的位置]"></script>
# <script type="text/javascript">
# //这个里面写JS代码和JQuery代码
# </script>
# 这里附上一句JQuery的宗旨:Write less but do more!
# 二,JQuery基本的使用:
# a)在使用之前我们要知道JQuery中开都都是以"{1}quot;开头的,这个和EL表达式有点像!
# b)JQuery中的各种函数的使用
# 1.$(document).ready(function(){
# //JQuery代码
# });
# 这个代码的缩写是:
# $(function(){
# //JQuery代码
# });
# 以上这两个函数的功能与JS中的document.onload();功能类似,但是又不完全相同!
# 不同点:JS中的onload是在整个网页内容全部加载完毕后才执行,而Jquery则是在DOM结构绘制完毕后即可执行
# 还有值得注意的是,JQuery中的事件名与JS中基本一致,但是要去掉JS事件名中开头的"on",
# JS JQuery
# onclick click
# onblur blur
# onmouseover mouseover
# onmouseout mouseout
# on.... ....
# 2.假如我们就以一个id为theBtn的按钮和一个样式为theStyle的元素来进行讲解吧!
# $(function(){
# //当那个按钮按下时就会执行一个函数
# 使用的时候可不能忘记我们需要JQuery的内核包:jquery-1.XXX.XX.js
# 不要忘记在要是用的页面中导入该函数库,导入方法如下:
# <script type="text/javascript" src="[这里是JQuery.js文件的位置]"></script>
# <script type="text/javascript">
# //这个里面写JS代码和JQuery代码
# </script>
# 这里附上一句JQuery的宗旨:Write less but do more!
# 二,JQuery基本的使用:
# a)在使用之前我们要知道JQuery中开都都是以"{1}quot;开头的,这个和EL表达式有点像!
# b)JQuery中的各种函数的使用
# 1.$(document).ready(function(){
# //JQuery代码
# });
# 这个代码的缩写是:
# $(function(){
# //JQuery代码
# });
# 以上这两个函数的功能与JS中的document.onload();功能类似,但是又不完全相同!
# 不同点:JS中的onload是在整个网页内容全部加载完毕后才执行,而Jquery则是在DOM结构绘制完毕后即可执行
# 还有值得注意的是,JQuery中的事件名与JS中基本一致,但是要去掉JS事件名中开头的"on",
# JS JQuery
# onclick click
# onblur blur
# onmouseover mouseover
# onmouseout mouseout
# on.... ....
# 2.假如我们就以一个id为theBtn的按钮和一个样式为theStyle的元素来进行讲解吧!
# $(function(){
# //当那个按钮按下时就会执行一个函数
# $("#theBtn").click(function(){
# //这里我们可以对这个DIV进行各种动画效果测试,详情见参考手册
# //--------------------------------------------------
# //表示立即隐藏
# $(".theStyle").hide();
# //在500毫秒之内隐藏
# $(".theStyle").hide(500);
# $(".theStyle").show([这里也可以有整形参数哦,功能同上]);
# //这里还有一个很不错的方法toggle(),就是判断状态并进行相反的状态,显示->不显示->显示->....
# $(".theStyle").toggle([毫秒数(可以要可以不要)]);
# //--------------------------------------------------
# //表示该元素在500毫秒之内会吧长度调整到500px
# $(".theStyle").animate({width:"500px"},500);
# //同时这个也支持方法链
# $(".theStyle").animate({width:"500px"},500).animate({height:"500px"},500).animate(...);
# //个人觉得为了代码的可读性和美观,可以写成这种:
# $(".theStyle")
# .animate({width:"500px"},500)
# .animate({height:"500px",500})
# .animate({paddingLeft:"50px"},500)
# .animate(...);
# ;
# //--------------------------------------------------
# //当然这里在列出常用的几种:
# $(".theStyle")
# //改变样式相当于JS中的XXX.style="";
# .css("border","solid 1px lightBlue")
# .css("color","red")
# .css(....)
# ;
# //这里我们可以对这个DIV进行各种动画效果测试,详情见参考手册
# //--------------------------------------------------
# //表示立即隐藏
# $(".theStyle").hide();
# //在500毫秒之内隐藏
# $(".theStyle").hide(500);
# $(".theStyle").show([这里也可以有整形参数哦,功能同上]);
# //这里还有一个很不错的方法toggle(),就是判断状态并进行相反的状态,显示->不显示->显示->....
# $(".theStyle").toggle([毫秒数(可以要可以不要)]);
# //--------------------------------------------------
# //表示该元素在500毫秒之内会吧长度调整到500px
# $(".theStyle").animate({width:"500px"},500);
# //同时这个也支持方法链
# $(".theStyle").animate({width:"500px"},500).animate({height:"500px"},500).animate(...);
# //个人觉得为了代码的可读性和美观,可以写成这种:
# $(".theStyle")
# .animate({width:"500px"},500)
# .animate({height:"500px",500})
# .animate({paddingLeft:"50px"},500)
# .animate(...);
# ;
# //--------------------------------------------------
# //当然这里在列出常用的几种:
# $(".theStyle")
# //改变样式相当于JS中的XXX.style="";
# .css("border","solid 1px lightBlue")
# .css("color","red")
# .css(....)
# ;
剩余5页未读,继续阅读
资源评论
WTCnche
- 粉丝: 1
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功