JQuery学习总结【一】


Posted in Javascript onDecember 01, 2016

JQuery学习总结【一】

一:JQuery

1 JQuery知识

*:就是让我们学会调用JQ插件,其实内部就是对JS的封装。

*:jquery里面有三个文件,

JQuery学习总结【一】

第2个和第3个其实里面的内容是一样的,只是第三个对其进行了压缩,使浏览器对其的访问时间变短。

我们在使用的时候将Jquery-1.4.2.js和jquery.1.4.2-vsdoc,js放在一起,其实vsdoc.js是对于前面的解释说明,它是让我们在编写代码的时候可以点操作出来。

*:练习《点击按钮弹出对话框的内容》 《点击网页里面的文字使文字一行一行消失》(“$”这个其实是个函数)

<head> 
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript"> 
 $(function() { 

 $("#btn").click(function () { alert($("#un").val()); });//点击弹出内容 

 $("div").click(function() { $(this).hide("slow"); });//文字消失 

 }); 
</script> 
</head> 
<body> 
<input type="text"id="un"/> 
<input type="button" id="btn"/> 
<div>文字内容</div> 
</body>

2 JQuery里面的Ready 《在网页刚开始就弹出内容》

$(dounction).ready(function(){alert(“加载完毕”);})

其实还可以这样子写

$(function(){alert(“加载完毕”);});

<解析:”$”这个函数将匿名函数function()注册为Ready执行。>

3 jquery内置函数

  .map(array,fn)对数组中array中的每一个元素调用fn函数进行处理,fn函数将处理返回,最后得到一个新的数组。.map(array,fn)对数组中array中的每一个元素调用fn函数进行处理,fn函数将处理返回,最后得到一个新的数组。map不能处理Dictionary风格的数组。要用下面的$.each来处理。

  $.each(array.fn)对数组arr每个元素调用fn函数进行处理,没有返回值。

var arr=[3,5,7]; 
Var arr2=$map.(arr,function(item){return item*2}) 函数式编程。 
Var arr={“tom”;”檀木”,”xiaozhang”;”小张”} 
$.each(arr,function(key,value){alert(key+”=”+value);});

4 JQuery对象,Dom对象

<dom就是浏览器的一些标记,比如层,按钮,标签等,数组是jq的对象。>

Jquery对象就是通过jquery包装Dom对象后产生。而且jquery对象只能调用jquery对象封装的方法。不能调用Dom对象的方法。

$(function(){$(“#id”).css(“background”,”red”)});

上面的代码是复制,就是将背景色设置为红色,若.css中的属性为一个则为得到值,2个即为设置值。

5 jquery选择器

*id选择器

$(“#div”).html();

*TabName选择器<标签选择器>

$(“div”).click(function(){alert(“你好我是p”);});

这里就是将网页中所有的div标签都选择了,都向其添加了click事件。

* css选择器

  同时选择多个样式,就是给制定样式的添加。

$(“div”).click(function(){alert(“这是信息”)});

6 多条件选择器/层次选择器

JQuery学习总结【一】

7 jquery的迭代

  就是里面的错误程序不会给提示出错,我们自己要添加if/elae语句进行判断。

JQuery学习总结【一】

8 jquery的节点遍历

就是运用next(),nextall()方法来进行遍历的。就好像在数组那里的遍历是一样的。  这里只是得到它的下一个元素的值。

Siblings():获取所有元素的同辈元素(兄弟节点)。

*:jquery的链式编程

$("div").click(function(){
$(this).css("background","red").siblings("div").css("background","white")
});

就是很容易的通过点操作符来操作。

//这里是链式操作,减少了使用if/else等操作。改变了编程风格。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 $(function() {
 $("#tables td").html("<img src='images/1.jpg'/>")
 .mouseover(function () {
 $("#tables td") .html("<img src='images/1.jpg'/>");
 $(this).nextAll().html("<img src='images/2.jpg'/");
 });
 });
 </script>
</head>
<body>
 <table id="tables">
 <tr><td></td><td></td><td></td><td></td></tr>
 </table>
</body>
</html>

9 :基本的过滤器

JQuery学习总结【一】

这里可以将其写在一起,比如选择器和过滤器,这样子就会很强大。

不仅可以使用选择器进行绝对定位,还可以进行相对定位,只要在$()指定第二个参数,第二个参数为相对的元素。

案例:

JQuery学习总结【一】

(相对定位)

JQuery学习总结【一】

   :这里的元素就是在定位#tables tr 下的td的定位

10 属性过滤器

JQuery学习总结【一】

Eg:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <script src="js/jquery-1.4.2.js"></script>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <title></title>
 <script type="text/javascript">
 $(function() {
 $("input[value=显示选中的内容]").click(function() {
 alert($("input:checked").val());
 });
 });
 </script>
</head>
<body>
 <input type="checkbox" value="上海"/>上海<br/>
 <input type="checkbox" value="宝鸡"/>宝鸡<br/>
 <input type="checkbox" value="深圳"/>深圳<br/>
 <input type="checkbox" value="西安"/>西安<br/>
 <input type="checkbox" value="北京"/>北京<br/>
 <input type="submit" value="显示选中的内容"/>
</body>
</html>

11 元素的each <通过一些过滤器和选择器来遍历each一些元素。>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <script src="js/jquery-1.4.2.js"></script>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <title></title>
 <script type="text/javascript">
 $(function() {
 $("input[name=names]").click(function() {
 var arr = new Array();
 $("input[name=names]:checked").each(function (key, value) {
 arr[key] = $(value).val();
 });
 $("#msgNames").text("共选中"+arr.length+"项:"+arr.join(","));
 });
 });
 </script>
</head>
<body>
 <input type="checkbox" name="names" value="张辉"/>张辉
 <input type="checkbox" name="names" value="妈妈"/>妈妈
 <input type="checkbox" name="names" value="妈妈"/>妈妈
 <input type="checkbox" name="names" value="妈妈"/>妈妈
 <p id="msgNames"></p>
</body>

JQuery学习总结【一】

以上就是本文的全部内容,希望对大家有所帮助,下篇文章继续介绍JQuery基本知识--JQuery学习总结【二】,有兴趣的朋友可以看下。谢谢对三水点靠木的支持!

Javascript 相关文章推荐
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 #Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 #Javascript
有趣的bootstrap走动进度条
Dec 01 #Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 #Javascript
第一次接触神奇的前端框架vue.js
Dec 01 #Javascript
bootstrapValidator自定验证方法写法
Dec 01 #Javascript
jQuery生成假加载动画效果
Dec 01 #Javascript
You might like
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
浅析vue深复制
2018/01/29 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python如何统计序列中元素
2020/07/31 Python
Windows下安装Scrapy
2018/10/17 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
法律进学校实施方案
2014/03/15 职场文书
投资建议书模板
2014/05/12 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
整改报告怎么写
2014/11/06 职场文书
企业员工辞职信范文
2015/05/12 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers