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( ...

随机推荐

用批处理文件进行TCP/IP设置,方便在家与办公IP切换
在公司用公司分配的固定IP上网,回家后又要将本本设置为家里的固定IP上网,每次都要手动重复一个过程: 打开网络中心,选择本地连接,进入属性然后选择IPV4进行TCP/IP的设置,填入IP,子网掩码DN ...
python:how does subclass call baseclass's __init__()
First, use baseclass's name to call __init__() I wrote code like this: and we can use 'super' too.
自制操作系统（七）加快中断处理，和加入FIFO缓冲区
参考书籍<30天自制操作系统>.<自己动手写操作系统> 2016-05-26.2016-07-09 主要是加快中断处理,和加入FIFO缓冲区. 因为之前是将打印字符的代码放在了 ...
jmap
环境: 现有一个独立运行的系统S(有独立的jre,但是没jdk),现想通过jmap导出其内存堆栈信息.于是另外安装一个jdk.可是jdk的版本跟S系统的jre不能对应上.出了很多错误. 总是报错: C ...
Redis学习笔记~Redis主从服务器，读写分离
回到目录 Redis这个Nosql的存储系统一般会被部署到linux系统中,我们可以把它当成是一个数据服务器,对于并发理大时,我们会使用多台服务器充当Redis服务器,这时,各个Redis之间也是分布 ...
NodeJS实例系列~环境搭建，Hello world归来！
回到目录 1 安装Node.js服务端程序 https://github.com/Microsoft/nodejstools/wiki/Install-Node.js-and-get-started- ...
JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
Nodejs从有门道无门菜鸟起飞教程。
这是一篇菜鸟教程,这是一篇菜鸟教程,如果你是菜鸟到话. 简单来说Nodejs并不是一门新的语言,但是它可以让我们的JS运行在服务器端,在服务器端写JS代码并且输入输出,也就是说以后要是有人问你JS是不 ...
【WP 8.1开发】推送通知测试服务端程序
所谓推送通知,用老爷爷都能听懂的话说,就是: 1.我的服务器将通知内容发送到微软的通知服务器,再由通知服务器帮我转发消息. 2.那么,微软的推送服务器是如何知道我的服务器要发消息给哪台手机呢?手机客户 ...
CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

JQuery01

JQuery01的更多相关文章

随机推荐

热门专题