Jquery

使用步骤:

1.  去下载jquery.js文件
2.  在html中 通过script标签的src属性引入jquery.js文件
3.  就可以在后续的代码中, 调用jquery中封装的函数了.小技巧:    绝大多数人的浏览器, 都打开过百度 , 百度使用了jquery含义: 很多人的浏览器中, 其实已经缓存了一份jquery文件了. 我们引入百度的jquery文件会更快响应.

onload *

格式:

$(function(){//当网页加载
});

Jquery 对象

简介:

Jquery对象是Jquery提供的用于封装dom对象的容器.
可以简单的理解为: jquery对象就是dom对象的集合.

DOM对象与 Jquery对象的转换

格式:

 -   DOM对象 转换为 Jquery对象:  var $Jquery对象 = $(dom对象);-   Jquery对象 转换为 DOM对象var dom对象 = $jquery对象.get(下标);

选择器 ***

我们可以通过CSS的选择器 , 来完成Jquery对象的查找.

格式:

   var jquery对象 = $("选择器");

基本选择器 *****

ID选择器

var $obj = $("#id值");

- 类选择器

var $obj = $(".class值");

- 元素名称选择器

var $obj = $("元素名称");

案例:

  <script type="text/javascript">$(function(){var $img = $("img");$img.hide(3000);});</script></head><body><img src="data:images/1.jpg"><img src="data:images/2.jpg"><img src="data:images/3.jpg">

筛选选择器

基本筛选选择器

**格式:**-   $("选择器:first")  :   筛选匹配的第一个元素-   $("选择器:last")       :   筛选匹配的最后一个元素-   $("选择器:eq(下标)") :   筛选匹配的 指定下标 元素-   $("选择器:gt(下标)") :   筛选大于 指定下标 元素-   $("选择器:lt(下标)") :   筛选小于 指定下标 元素-   $("选择器:even");  :   筛选匹配的 偶数下标元素-   $("选择器:odd");       :   筛选匹配的 奇数下标元素

案例:

 <script type="text/javascript">$(function(){$("div:first").css({"font-size":"10px"});$("div:last").css({"font-size":"10px"});$("div:eq(3)").css({"color":"#0f0"});$("div:gt(3)").css({"color":"#f00"});$("div:lt(3)").css({"color":"#00f"});$("div:even").hide(1000);$("div:odd").css({"border":"3px solid #999"});});</script></head><body><div> 日照香炉生紫烟 </div><div> 锄禾日当午 </div><div> 床前明月光 </div><div> 去年今日此门中 </div><div> 我是DJ喜洋洋 , 青青草原我最狂 </div><div> 唧唧复唧唧 , 木兰开飞机 ~  </div><div> 过了星期三, 就是星期天.. </div><div> 集体性活动 </div><div> 研究性学习 </div><div> 大学生活真好 </div><div> 危险性动作 , 切勿模仿 </div>

高级筛选选择器了解

高级筛选选择器 - 排除了解****
格式:

   var $obj = $("选择器1:not(选择器2)");

作用:

   从选择器1的结果中, 排除掉选择器2的结果

案例:

 <script type="text/javascript">$(function(){$("div:not(.c1)").hide(1000);});</script></head><body><div> 日照香炉生紫烟 </div><div> 锄禾日当午 </div><div class="c1"> 床前明月光 </div><div> 去年今日此门中 </div><div  class="c1"> 我是DJ喜洋洋 , 青青草原我最狂 </div><div class="c1"> 唧唧复唧唧 , 木兰开飞机 ~  </div><div class="c1"> 过了星期三, 就是星期天.. </div><div class="c1"> 集体性活动 </div><div> 研究性学习 </div><div> 大学生活真好 </div><div> 危险性动作 , 切勿模仿 </div>

高级筛选选择器 - 内容了解

筛选元素内容是否包含
格式:

 var $obj = $("选择器:contains('包含的文本')");

    例如:筛选所有包含日的文字var $obj = $("div:contains('日')");

- 筛选元素内容是否为空

  格式:var $obj = $("选择器:empty");

案例:

  <script type="text/javascript">$(function(){//var $obj = $("div:contains('日')");//$obj.css({"box-shadow":"3px 3px 3px 3px #999"});//$("div:contains('日')").css({"box-shadow":"3px 3px 3px 3px #999"});$("div:empty").css({"border-bottom":"2px solid #666"});});
</script>

高级筛选选择器 - 可见性了解

筛选可见的元素:格式:var $obj = $("选择器:visible");筛选不可见的元素:格式:var $obj = $("选择器:hidden");什么是 不可见的元素1.  宽度或高度为02.  display:none3.  input标签 type=hidden

案例:

<script type="text/javascript">function x1(){change();}function x2(){change();var val = $("input").get(0).value;$("span").get(0).innerHTML = val;}function change(){var $div1 = $("div:visible");var $div2 = $("div:hidden");$div1.hide();$div2.show();}</script>
</head>
<body><div ondblclick="x1()"><span class="nickname nn">短小经干小泽马</span></div><div style="display:none"><!-- onblur:当输入框的输入状态消失 --><input onblur="x2()" class="nickname" value="短小经干小泽马"></div>
</body>

常用函数: 显示隐藏函数

显示: show(毫秒);
隐藏: hide(毫秒);
常用函数: css函数

格式:$obj.css({"":"","":""});

案例:

更改#div1元素的文字大小24px 文字颜色#0f0 , 文字居中text-align:center;

   var $div1 = $("#div1");$div1.css({"font-size":"24px","color":"#0f0","text-align":"center"});

表单筛选选择器掌握

格式:

 var $obj = $("选择器:type属性值");

作用:

用于筛选表单中的input标签 ,根据type属性值来筛选

例如:

  获取所有的单选框:$("input:radio")获取class值为input_text的 所有文本输入框:$(".input_text:text");

案例:

 <script type="text/javascript">$(function(){$("input:text").css({"font-size":"18px"});$("input:password").css({"font-size":"18px","color":"#0f0"});});</script></head><body><input type="text" placeholder="请输入帐号"><input type="password" placeholder="请输入密码">

修改与获取元素的属性值

  回顾JS的操作:dom对象.属性名 = "属性值";- 在Jquery中, 通过一个函数, 来操作属性 : attr函数

格式:

 设置属性:   设置一个属性的值:       $obj.attr("属性名","属性值");设置一组属性的值:       $obj.attr({"属性名1":"属性值1","属性名2":"属性值2"...});获取属性:   var 属性值 = $obj.attr("属性名");

案例:

 <script type="text/javascript">//  图片地址的数组var images = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];// 用于记录当前展示的图片的下标var index = 0;// 当点击上一张时 , i为-1 , 当点击下一张时 i为 1function x1(i){index+=i;if(index == -1){//左 越界 , 设置为 最大下标index = images.length-1;}else if(index == images.length){//右 越界 , 设置为 最小下标index= 0;}//找到img元素, 设置它的src属性值为 images[index]$("img").attr("src",images[index]);}</script></head><body><div><img src="data:images/1.jpg"><div><button onclick="x1(-1)">上一张</button><button onclick="x1(1)">下一张</button></div><div><div class="item" onmouseover="index=0;x1(0)">1</div><div class="item" onmouseover="index=1;x1(0)">2</div><div class="item" onmouseover="index=2;x1(0)">3</div><div class="item" onmouseover="index=3;x1(0)">4</div><div class="item" onmouseover="index=4;x1(0)">5</div></div></div></body>

特殊属性: 标签内容

回顾JS:   dom对象.innerHTML 来操作元素的标签内容.在Jquery中,  通过两个函数来控制标签内容:1.  html函数 :设置内容:   $obj.html("标签内容");获取内容:   var 标签内容 = $obj.html();2.  text函数 :设置内容:   $obj.text("标签内容");获取内容:   var 标签内容 = $obj.text();

html与text的区别: ***

html函数操作标签内容时, 可以得到标签部分 .
text函数操作标签内容时, 会忽略标签部分

例如:

<div id="div1"><span>从前</span><div>有座山</div></div>

   html获取 #div1的标签内容 :         <span>从前</span><div>有座山</div>text获取 #div1的标签内容 :     从前有座山

特殊属性: class值

    添加一个class$obj.addClass("值");
-   移除一个class$obj.removeClass("值");
-   替换一个class (存在则删除, 不存在则添加)$obj.toggleClass("值");

案例:

    样式:<style type="text/css">.a{background-color: #333;color:#999;padding:20px;}.b{background-color: #eee;color:#090;padding:20px;}#btn{position: fixed;right:-40px;top:100px;transition:2s;cursor: pointer;}#btn:hover{right:10px;}</style><script type="text/javascript">function change(){var title = $("#btn").attr("title");if(title=="关灯"){//1.    换图 b.png$("#btn").attr("src","images/b.png");//2.    换提示的title 开灯$("#btn").attr("title","开灯");//3.    切换 div的class a$("#div1").removeClass("b");$("#div1").addClass("a");}else{//1.    换图 a.png$("#btn").attr("src","images/a.png");//2.    换提示的title 关灯$("#btn").attr("title","关灯");//3.    切换 div的class b$("#div1").removeClass("a");$("#div1").addClass("b");}}
</script>
<body><img onclick="change()" id="btn" title="关灯" src="data:images/a.png"><div id="div1" class="b">此处忽略了一本小说</div>

特殊属性: value值

回顾JS:dom对象.valueJquery中:因为jquery在用户操作网页之前 就已经创建了所有元素的Jquery对象,  导致我们在使用jquery的attr函数获取value属性值时,  一直得到的都是用户操作之前的.jquery为我们提供了一个新的操作value属性值的函数:-   获取属性值var val = $obj.val();-   设置属性值$obj.val("值");

样式函数 *

格式1.

$obj.css(对象);

格式2.

   $obj.css("样式的键","样式的值");

案例:

  $("div").css("color","#f0c");

宽高函数了解

设置宽度:   $obj.width(数字);
设置高度:   $obj.height(数字);获取宽度:   $obj.width();
获取高度:   $obj.height();

案例:

 function x1(){var width = $("img").width();$("img").width(width*1.1);}
</script>
</head>
<body><img src="data:images2/4.jpg" onclick="x1()">

显示与隐藏函数 *

基本显示隐藏函数:

    -   显示: $obj.show();-   隐藏: $obj.hide();-   切换: $obj.toggle();

左上折叠淡入淡出函数

    -   显示: $obj.show(毫秒);-   隐藏: $obj.hide(毫秒);-   切换: $obj.toggle(毫秒);

上下折叠显示隐藏函数

**注意: 如果应用到图片上, 需要 指定固定的宽度.**-   显示: $obj.slideDown(毫秒);-   隐藏: $obj.slideUp(毫秒);-   切换: $obj.slideToggle(毫秒);

淡入淡出显示隐藏函数

 -   淡入: $obj.fadeIn(毫秒);-   淡出: $obj.fadeOut(毫秒);

动画函数

格式:

  $obj.animate(style,time,[function(){}]);

参数1.    动画执行的 目标样式. 是一个对象, 使用JSON描述即可
参数2.    元素从当前样式 到 目标样式 所需的毫秒时间
参数3.    函数, 当动画执行完毕 执行.

案例:

 <style type="text/css">#x{position: absolute;top:150px;left:-330px;font-size:32px;}span{display: inline-block;transition:transform 1s;}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(function(){$("#x").animate({"left":"500px"},1000,x1);});//要旋转的字var index1 = 0;//1 2//要还原的字var index2 = 7;//0 1function x1(){//alert("动画执行完毕了");//span:eq(0)$("span:eq("+index1+")").css("transform","rotate(720deg)");$("span:eq("+index2+")").css("transform","rotate(0deg)");$("span:eq("+index1+")").animate({"font-size":"80px"},1000);$("span:eq("+index2+")").animate({"font-size":"32px"},1000,x1);index2 = index1;index1++;if(index1 == 8){index1 = 0;}}</script></head><body><div id="x"><span>国</span><span>安</span><span>老</span><span>师</span><span>挺</span><span>会</span><span>玩</span><span>~</span></div>

函数进行传递时:

传递函数名称  :  传递的是function类型的对象, 也就是函数本身/传递函数()  :   传递的是 函数的执行结果 也就是返回值.

Jquery 事件

Jquery事件可以很好的 使HTML标签与逻辑代码进行分离. 更便于我们后期的扩展与维护工作.
事件的绑定与解绑

格式:

    -   绑定事件-   $obj.bind("事件类型",执行的函数);-   解绑事件-   $obj.unbind("事件类型");-   模拟触发事件-   $obj.trigger("事件类型");

案例:
倒计时案例

   <script type="text/javascript">function x1(){$("button").css({"color":"#aaa"});$("button").unbind("click");//启动周期性定时器var s = 10;var i = setInterval(function(){$("button").html(s+"s");//倒计时完毕了if(s==0){//1.    将周期性定时器关闭clearInterval(i);//2.    将按钮的文字 与 颜色恢复$("button").css("color","#000");$("button").html("获取验证码");//3.    绑定点击事件$("button").bind("click",x1);}s--;},1000);}// <input placeholder="请输入手机号码"><button>获取验证码</button>$(function(){$("button").bind("click",x1);});</script></head><body><input placeholder="请输入手机号码"><button>获取验证码</button></body>模拟京东商品数量增加:for(i=1;i<100;i++){$(".btn-add").trigger("click");
}

事件函数 *

格式:

   $obj.事件类型(function(){});

例如给按钮#but1 添加点击事件:$("#but1").click(function(){});

案例:

   <script type="text/javascript">$(function(){$("#btn1").click(function(){alert("按钮被点击");});$("input").blur(function(){var text = $("input").val();alert(text);});});</script></head><body><button id="btn1">示例按钮</button><input></body>

组合事件函数 *

作用: 用于鼠标移入移出的事件处理 ;

-   hover(移入func,移出func)参数1.    鼠标移入时触发的函数参数2.    鼠标移出时触发的函数

**文档函数 ***

1.  创建新元素格式: var $obj = $("html元素字符串");例如:创建一个按钮:var $btn = $("<button>按钮</button>");
2.  添加元素-   向某元素的内部, 追加子元素格式: $obj.append(新元素);-   向某元素的内部, 前置子元素格式: $obj.prepend(新元素);-   向某元素的后面, 添加兄弟元素格式: $obj.after(新元素);-   向某元素的前面, 添加兄弟元素格式: $obj.before(新元素);
3.  删除元素格式:$要删除的元素 .remove();      4.  清空元素格式:$要清空的元素.empty();5.  克隆元素
文档查找函数 ***
根据一个已存在的Jquery对象, 查找相关的Jquery对象.-   查找子元素$obj.children("选择器");-   查找后代元素$obj.find("选择器");-   得到下一个兄弟元素$obj.next();-   得到上一个兄弟元素$obj.prev();-   得到父元素$obj.parent();-   查找祖先元素$obj.parents("选择器");

插件开发

二维码生成熟悉
步骤:

1.  引入jquery.js<script src="js/jquery.js"></script>
2.  引入插件的utf中文支持.js<script src="js/utf.js"></script>
3.  引入jquery.qrcode.js<script src="js/jquery.qrcode.js"></script>
4.  在网页中, 编写一个div标签 , 这个div标签就是用于展示二维码的 ,建议给div添加id属性值<div id="code"></div>
5.  在JS代码块中, 通过jquery, 查找到上述div的jquery对象var $code = $("#code");
6.  调用jquery对象.qrcode函数 , 传递参数$code.qrcode({src:"二维码中间图标的地址",width:数字,//填入数值即可, 不要加长度单位, 默认就是pxheight:数字,//填入数值即可, 不要加长度单位, 默认就是pxtext:"二维码的内容",background:"#RRGGBB",//背景颜色,默认白色foreground:"#RRGGBB",//前景颜色,默认黑色render:"table"//二维码的绘制模式 , 支持1.table,2.canvas});

layer弹出层插件熟悉

步骤:

    1.  引入jquery2.  引入layer/layer.js

1. msg函数 , 弹出提示窗:

 案例:<script>function x1(){//普通提示窗//layer.msg("发送完成");//抖动提示窗layer.msg("发送失败",function(){//弹出窗体消失时 执行});}</script></head><body><button onclick="x1()">点击发送短信</button>

2. 信息窗

 格式:layer.alert("弹出窗的内容",{icon:0-16});

案例:

function x1(number){layer.alert("登录成功",{icon:number});}

3. 加载层

   弹出的格式:var index = layer.load(0-2);参数是: 图标关闭的格式:layer.close(index);

4. 带有文字提示的加载层

 弹出的格式:var index = layer.msg("提示的文字",{icon:16,shade:0.01});关闭的格式:layer.close(index);

5. tips层

      格式:layer.tips("提示内容","选择器",{tipsMore:true,tips:1/2/3/4});参数: 1.  tipsMore:true // 允许同时存在多个tips层2.  tips:1/2/3/4    //取值为数字1-4 , 分别表示弹出的方向: 上右下左
弹出层的关闭
layer.closeAll():

Jquery的简单使用相关推荐

php jquery 全选删除,jQuery+php简单实现全选删除的方法
jQuery+php简单实现全选删除的方法发布于 2017-08-06 10:13:21 | 66 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertex ...
jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...
手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
JQuery ZTree简单使用
JQuery ZTree简单使用 @(JavaScript)[jQuery, ztree, 入门] JQuery ZTree简单使用基本概述案例使用标准json数据构造ztree 使用简单jso ...
jquery练习——简单的图片结果展示效果
今天看到google图片搜索结果页面,感觉简洁实用,于是用jquery粗略的模仿了一下再次感觉到jquery的强大和易用,基本思路初步实现了,再整合ajax和json,应该可以做一个简单的应用了 : ...
翻牌抽奖 php,PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: 1 2 3 ...
php 页面异步刷新,php+jQuery+Ajax简单实现页面异步刷新
php+jQuery+Ajax简单实现页面异步刷新这里有新鲜出炉的 jQuery 示例,程序狗速度看过来! jQuery javascript 框架 jQuery 是一个兼容多浏览器的 javasc ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
html5 jq点赞功能,jQuery实现简单的点赞效果
本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model ...

Jquery的简单使用

Jquery

onload *

Jquery 对象

DOM对象与 Jquery对象的转换

选择器 ***

基本选择器 *****

筛选选择器

高级筛选选择器了解

高级筛选选择器 - 内容了解

常用函数: 显示隐藏函数

表单筛选选择器掌握

修改与获取元素的属性值

特殊属性: 标签内容

html与text的区别: ***

特殊属性: class值

特殊属性: value值

样式函数 *

宽高函数了解

显示与隐藏函数 *

动画函数

Jquery 事件

事件函数 *

组合事件函数 *

插件开发

layer弹出层插件熟悉

Jquery的简单使用相关推荐

最新文章

热门文章

Jquery的简单使用

Jquery

onload *

Jquery 对象

DOM对象 与 Jquery对象的转换

选择器 ***

基本选择器 *****

筛选 选择器

高级筛选选择器 了解

高级筛选选择器 - 内容 了解

常用函数: 显示隐藏函数

表单筛选选择器 掌握

修改与获取元素的属性值

特殊属性: 标签内容

html与text的区别: ***

特殊属性: class值

特殊属性: value值

样式函数 *

宽高函数 了解

显示与隐藏函数 *

动画函数

Jquery 事件

事件函数 *

组合事件函数 *

插件开发

layer弹出层插件 熟悉

Jquery的简单使用相关推荐

最新文章

热门文章

DOM对象与 Jquery对象的转换

筛选选择器

高级筛选选择器了解

高级筛选选择器 - 内容了解

表单筛选选择器掌握

宽高函数了解

layer弹出层插件熟悉