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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python的垃圾回收机制详解
2019/08/28 Python
Python流程控制 if else实现解析
2019/09/02 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
python数据类型强制转换实例详解
2020/06/22 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
班组长安全生产职责
2013/12/16 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
python在package下继续嵌套一个package
2022/04/14 Python
Android实现图片九宫格
2022/06/28 Java/Android