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 相关文章推荐
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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使用timthumb生成缩略图的方法
2016/01/22 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
python线程池threadpool实现篇
2018/04/27 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python实现学员管理系统
2019/02/26 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
毕业生的自我评价
2013/12/30 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
学生期末评语大全
2014/04/30 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
红白喜事主持词
2015/07/06 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
带你了解Java中的ForkJoin
2022/04/28 Java/Android