jquery笔记整理

01-jquery简介 1)功能:     ·html元素选取     ·Html元素操作     ·Css操作     ·Html事件函数&nbsp...

01-jquery简介

1)功能:
     ·html元素选取
     ·Html元素操作
     ·Css操作
     ·Html事件函数
     ·JavaScript特效和动画
     ·DOM的遍历及修改
     ·AJAX
     ·Utilities
     ·插件
2)版本支持
     ·jquery2 及以上不支持IE6,7,8
     ·使用注释:
     ·<!--[if lt IE 9]>
     ·<script src="Script/jquery-1.9.0.js"></script>
     ·<![endif]-->
     ·<!--[if gte IE 9]><!-->
     ·<script src="Script/jquery-2.0.0.js"></script>
     ·<!--<![endif]-->
3)版本
     ·Production version:实际网站,压缩版
     ·Development Version:测试和开发,未压缩
4)引用:
     文件类型:xxx.js
     ·<script src="xxx.js"></script>
     ·CDN(内容分发网络)引用
     ·<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
     --CDN:
        
https://baike.baidu.com/item/CDN/420951?fr=aladdin
     常用CDN引用:
     1、谷歌
     <script src="
http://ajax.googleapis.com/ajax/1ibs/jquery/1.10.2/jquery.min.js">
     </script>
     2、微软
     <script src="
http://ajax.Microsoft.com/ajax/jquery/jquery/1.10.2/jquery.min.js">
     </script>
     使用百度、又拍云、新浪、谷敌或微软的jQuery,有一个很大的优势:
     许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。
     所有结果是,当他们访问您的站点时,会从缓存中加载jQuery,这样可以减少加载时间。
     同时,大多数CDN都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,
     这样也可以提高加载速度。

02-jquery语法

1)步骤:
$(selector).action();
     ·$:jquery
     ·查询:selector
     ·操作: action
2)选择器:Xpath(xml中的查询信息的语言)+CSS
     $(this).hide();
     $("p").hide();
     $("p.test").hide();
     $("#test").hide();
3)文档就绪事件:
//文档加载完执行方法
     $(document).ready(function(){
    
     });
     $(function(){
     });


03-jquery选择器

1)HTML
     1、元素
     2、id
     3、class
2)CSS
     $("p").css("background","red");
3)more
     $("*")        --选取所有元素
     $(this)        --选取当前htnl元素
     $("p.td")    --选取class为td的p元素
     $("p:first")--选取第一个p元素
     $("ul li:first")--选取第一个ul li元素   
     $("ul li:first-child")选取每个ul的第一个li元素
     $("[href]")    --选取带有href属性的元素
     $("a[target='_blank']")--选取所有target属性为"_blank"的a元素
     $("a[target!='_blank']")--选取所有target属性不为"_blank"的a元素
     $(":button")--选取所有type="button"的input元素和button元素
     $("tr:even")--选取偶数位置的tr元素
     $("tr:odd")--选取奇数位置的tr元素
4)独立文件内引用jquery函数


04-jquery事件

1)dom事件对应的Jquery事件
2)常见事件:
鼠标事件            键盘事件            表单事件            文档/窗口事件
click            keypress        submit            load
dblclick        keydown            change            resize
mouseenter        keyup            focus            scroll
mouseleave        blur                            unload

3)比较keypress、keydown与keyup
·keydown:    在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码;
·keypress:    在键盘上按下一个按键,并产生一个字符时发生,返回ASCII码。
             注意:shift、alt、ctrl等键按下并不会产生字符,所以监听无效,
             换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
·keyup:        用户松开某一个按键时触发,与keydown相对,返回键盘代码。


05-jquery效果-01隐藏显示及切换

1)隐藏和显示,切换
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
//$(selector)选中的元素为n,callback执行n次
//callback可以是函数名,也可以是匿名函数
//callback函数名后加括号,函数会立即执行,而不是完成显示隐藏后执行
可选参数speed为显示速度
取值:slow,fast,毫秒
可选参数callback是隐藏或显示或切换后执行的函数名称
例:$("p").hide(1000,function(){
     $(p).show();
     });


05-jquery效果-02淡入淡出

1)淡入淡出函数
     ·fadeIn()--淡入
     ·fadeOut()--淡出
     ·fadeToggle()--如果淡入,则淡出,反之。
     ·fadeTo()
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);--speed,opacity为必选参数


05-jquery效果-03滑动

1)滑动函数
slideDown()
slideUp()
slideToggle()
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);--在slideUp,slideDown之间切换
--没有注明都为可选参数


05-jquery效果-04动画

1)animate简介

--用于创建自定义动画
--语法:
$(selector).animate({params},speed,callback);
--params为必选参数,定义了形成动画的CSS属性
$(selector).animate({styles,speed,easing,callback);
--easing为内置函数
     取值:swing,liner
$(selector).animate(styles,options);
--options为规定动画的额外选项
可能的值:
·speed-设置动画的速度
·easing-规定要使用的easing 函数
·callback-规定动画完成之后要执行的函数·step-规定动画的每一步完成之后要执行的函数
·queue-布尔值。指示是否在效果队列中放置动画。如果为false,则动画将立即开始
·specialEasing-来自styles参数的一个或多个CSS属性的映射,以及它们的对应 easing函数
//默认情况下html都有一个静态的位置,设置位置时要相对于CSS设置,如设置子属性
//父级relative,子absolute
//params可以为多个属性,逗号隔开
--animate可以所有的css属性,必须使用Camel命名属性名,如paddingLeft,marginLeft
--如果要生成颜色动画,jquery提供了Color Animations插件
--只有数字值可创建动画(margin:30px),字符串无法创建动画(background:red)
2)animate()使用相对值
+=,-=   --创建相对动画,相对于元素的当前值改变
例:
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({
       left:'250px',
       height:'+=150px',
       width:'+=150px'
     });
   });
});
</script>
3)animate()使用预定义的值
show,hide,toggle
例:
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({
       height:'toggle'
     });
   });
});
</script>
4)animate()使用队列功能
例:
<script>
$(document).ready(function(){
   $("button").click(function(){
     var div=$("div");
     div.animate({height:'300px',opacity:'0.4'});
     div.animate({width:'300px',opacity:'0.8'});
     div.animate({height:'100px',opacity:'0.4'});
     div.animate({width:'100px',opacity:'0.8'});
   });
});
</script>


    

05-jquery效果-05停止动画

1)stop()
语法:
$(selector).stop(stopAll,goToEnd);
--可选参数stopAll规定是否清除动画队列,默认为false
--可选参数goToEnd规定是否立即完成当前动画,默认为false
--


05-jquery效果-06callback方法

1)
callback函数在当前动画完成后执行。
//JavaScript代码是逐条执行的通过传参执行函数可以避免动画
//效果冲突。
例:
有回调函数
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("p").hide("slow",function(){
       alert("段落现在被隐藏了");
     });
   });
});
</script>
无回调函数
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("p").hide(1000);
     alert("现在段落被隐藏了");
   });
});
</script>


05-jquery效果-07Chaining方法

1)chaining方法
--允许我们一条语句中执行多个jquery方法(相同元素上)
--jquery方法链接
--即将多个动作函数链接起来执行
例:
<script>
$(document).ready(function()
   {
   $("button").click(function(){
     $("#p1").css("color","red").slideUp(2000).slideDown(2000);
   });
});
</script>
书写格式:(厉害!!!)
//jquery会舍弃多余的空格,当成一句去执行
<script>
$(document).ready(function()
   {
   $("button").click(function(){
     $("#p1").css("color","red")
       .slideUp(2000)
       .slideDown(2000);
   });
});
</script>

  • 发表于 2019-03-20 13:20
  • 阅读 ( 205 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除