JQuery01

一：JQuery

1 JQuery知识

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

*：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不能处理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 多条件选择器/层次选择器

7 jquery的迭代

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

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 ：基本的过滤器

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

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

案例：

（相对定位）

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

10 属性过滤器

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>

JQuery01的更多相关文章

jQuery-01:on live bind delegate
摘自:https://www.cnblogs.com/moonreplace/archive/2012/10/09/2717136.html moonreplace这位大牛的当我们试图绑定一些事件到 ...
【jQuery01】添加添加div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery-01
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
Jquery中的 height(), innerHeight() outerHeight()区别
jQuery中的 height innerHeight outerHeight区别标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...
Jquery中parentsUntil函数调用最容易犯的三个错误
来自 :http://jquery01.diandian.com/post/2012-01-16/14500044 Jquery中parentsUntil函数调用最容易犯的三个错误 Jquery的pa ...
jQuery04
jQuery内容总结: 1.既然是一个js库,使用之前就要引入js库,是一个.js文件,版本是1.8.3: 2.写一个jQuery页面加载函数(注意与js页面加载函数的区别): $(function( ...

随机推荐

java 网络（socket）
本文梳理一个基础的java TCP消息通信,构造一个简单的Packet进行传输,代码如下: Packet public class Packet { private String attribute; ...
谈谈final的作用
前言一直想写写这个话题.代表公司也面试过一些求职者,每次面试我必问的两个问题之一就是“请你谈一谈对于final关键字的理解”.这是一个简单的小问题,但是不要小看它,通过对这个问题的回答以及一些简单的 ...
Task：取消异步计算限制操作 & 捕获任务中的异常
Why:ThreadPool没有内建机制标记当前线程在什么时候完成,也没有机制在操作完成时获得返回值,因而推出了Task,更精确的管理异步线程. How:通过构造方法的参数TaskCreationOp ...
设计模式之美：Extension Object（扩展对象）
索引意图结构参与者适用性效果相关模式实现实现方式(一):使用示例结构实现 Extension Object. 实现方式(二):使用泛型实现 IExtensibleObject<T ...
[ZigBee] 14、Zigbee无线通信前奏——BasicRF 简单无线点对点传输协议
本工程不带zigbee协议栈,作为过渡实验现象: 一个EB2530(终端A)定义为发射模块,另一个EB2530(终端B)定义为接收模块. 按EB2530(终端A)上的按键,无线控制另一个EB2530 ...
iOS——Core Animation 知识摘抄（二）
阴影主要是shadowOpacity .shadowColor.shadowOffset和shadowRadius四个属性 shadowPath属性我们已经知道图层阴影并不总是方的,而是从图层内容 ...
Lucene系列-分析器
分析器介绍搜索的基础是对文本信息进行分析,Lucene的分析工具在org.apache.lucene.analysis包中.分析器负责对文本进行分词.语言处理得到词条,建索引和搜索的时候都需要用到分 ...
IOS Animation-KeyPath值
IOS Animation-KeyPath值 keyPath值说明值类型 position 移动位置 CGPoint opacity 透明度 0-1 bounds 变大与位置 CGRect bou ...
青蛙的约会 java版
参考http://blog.csdn.net/polossk/article/details/9799735 package acm; public class FrogDate { public s ...
[C#反射]C#中的反射解析及使用.
1.对C#反射机制的理解2.概念理解后,必须找到方法去完成,给出管理的主要语法3.最终给出实用的例子,反射出来dll中的方法参考: C#反射,MSDN编程指南反射是一个程序集发现及运行的过程,通过 ...

JQuery01

JQuery01的更多相关文章

随机推荐

热门专题