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

随机推荐

使用https的HSTS需要注意的一个问题
HSTS(HTTP Strict Transport Security) 简单来说就是由浏览器进行http向https的重定向.如果不使用HSTS,当用户在浏览器中输入网址时没有加https,浏览器会 ...
MySql学习（MariaDb）
资料 http://www.cnblogs.com/lyhabc/p/3691555.html http://www.cnblogs.com/lyhabc/p/3691555.html MariaDb ...
PowerShell笔记
教程: http://www.pstips.net/powershell-online-tutorials/ http://www.3fwork.com/a113/ 1. 查看成员 $MyInvoca ...
Java多线程系列--“JUC锁”05之非公平锁
概要前面两章分析了"公平锁的获取和释放机制",这一章开始对“非公平锁”的获取锁/释放锁的过程进行分析.内容包括:参考代码获取非公平锁(基于JDK1.7.0_40)释放非公平锁(基 ...
jQuery读取和设定KindEditor的值
在使用Kindeditor的时候,想要利用Ajax传值,但是通过editor封装的方法是行不通的,原因在于编辑器我们是放在另一个jsp页面,通过iframe来加载的,同时这个iframe的 ...
[ZigBee] 2、 ZigBee开发环境搭建
本节介绍ZigBee基本开发环境搭建,附件中有本节介绍的软件下载地址~ 链接:http://pan.baidu.com/s/1bLdqxg 1.IAR Embedded Workbench 的安装 S ...
使用ViwePager显示图片时如何防止内存泄露。
内存泄露的检测. 1. 在Android Studio中运行你的应用,然后切换到输出窗口的Android tab. 2. 尽情的玩耍你的应用,最好各个功能都用到,如果是Viewpager,则多滑动一些 ...
用CSS实现居中的方式
直接放链接吧,最近大量时间放在看书上了,不想玩游戏,不想看电影,只想看书,早日做出自己的网站卖广告. CSS居中
基于Oracle的SQL优化（社区万众期待数据库优化扛鼎巨著）
基于Oracle的SQL优化(社区万众期待数据库优化扛鼎巨著) 崔华编 ISBN 978-7-121-21758-6 2014年1月出版定价:128.00元 856页 16开编辑推荐本土O ...
fir.im Weekly - 一切从知识重构开始
一年之计在于春,大自然开始了新元素的重构.你的知识库是否也该重构更新呢? 本期 fir.im Weekly 包含最新的Android.iOS 开发工具.源码和好玩的UI 动画分享,希望对你有用. Sw ...

JQuery01

JQuery01的更多相关文章

随机推荐

热门专题