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 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
VUE实现吸底按钮
2021/03/04 Vue.js
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python计算导数并绘图的实例
2020/02/29 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
在keras中实现查看其训练loss值
2020/06/16 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
体育系毕业生求职自荐信
2014/04/16 职场文书
质量保证书
2015/01/17 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
导游词之西安骊山
2019/12/20 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL