jquery初步总结

1、$(document).ready()方法和window.onload差分法

为页元件的正确操作，我们需要把操作元件JS编写的代码$(document).ready()（Jquery）或window.onload（普通JS）中。$(document).ready()(这样的写法实际上是/把dom对象document转换成了jQuery对象，然后注冊ready()事件)一般我们能够简化为

$(function(){

........jquery代码...........

});

以下介绍一些它们的差别：

运行时机

window.onload方法是在网页中的全部的元素（包含元素的全部关联文件）都全然载入到浏览器之后才运行。而通过jQuery中的$(document).ready()方法仅仅要在DOM全然就绪时，就能够调用了。比方一张图片仅仅要<img>标签完毕，不用等这个图片载入完毕，就能够设置图片的宽高的属性或样式等。
$(document).ready()方法能够多次使用而注冊不同的事件处理程序，而window.onload一次仅仅能保存对一个函数的引用。多次绑定函数仅仅会覆盖前面的函数。

2、$.map函数（obj, fn）和$.each（obj, fn）函数。

obj (Object): 要反复迭代的对象或数组
fn (Function): 要在每一个对象中运行的函数

$.each（obj, fn(key,value)）用于遍历键值对集合。假设是普通数组。则键为下标index

var dict = { 'person1': '人类1', 'person2': '人类2' };

                var result = $.each(dict, function (k,v) {

                        alert(k+"==="+v);//结果是分别弹出person1===人类1。person2====人类2

                });

$.map函数（obj, fn(value,index)）

var arrInt = [1, 3, 5, 7, 9]; 

var result = $.map(arrInt, function (val, index) { 

//通过实际观察，发现。传递的函数有两个參数。当中第一个參数表示遍历的数组中的元素的值，第二个表示元素的索引 

return val * 2; 

}); 

alert(result); //结果是2,6,10,14,18

3、Dom和Jquery对象转换

dom对象转为jquery对象，var div=document.getElementById();var jqdom=$(div),这样就能够用jquery的一些成员，如text

jquery对象转为dom对象:var domobj=jqdom[0];这样又能够用dom的一些成员了，如innnerText

4、选择器：

标签选择器：$('p')；

ID选择器：$('#p1');

类选择器:$('.a')

组合选择器：$('#btn,#p1,span')

标签+类选择器：$('p.a')。

层次选择器:$('div p');

$('div >p')div下直接子元素；

$('div ~ p')在div后。搜索全部p兄弟，等于$('div').nextAll('p')。

$('div +p')div后仅仅找紧挨着的第一个p元素兄弟，等于$('div').next('p')。

5、隐式迭代：$('p').text('');无需循环便可设置全部p标签文字

6、链式编程：

用链式编程时。须要注意next(),nextAll返回的已经不是原来的元素。也能够用end（）恢复前一次的状态。如$(this).prevAll().css('').end().siblings();

text()、html()、val()这些方法用来设置值的时候能够链式编程，可是获取内容的时候不能链式编程，由于获取值的时候。返回值内容变了。

【并非不论什么时候都能链式编程，当返回值不是原来的对象时，就不能链式编程了。】

$('p').text('我们都是p!').css('border', '5px solid yellow').click(function () {

                    alert($(this).text());

                });

7、设置与获取

设置css：$(this).css({'width':'100px','border':'1px'});获取css中某个属性var width=$(this).css('width')

设置attr：$(this).attr('width','100px')，获取attr某个属性：var width=$(this).attr('width')

设置text：$(this).text('text1'),获取text,var txt=$(this).text()

设置val:$(this).val('text1'),获取text,var val=$(this).val()

8、过滤器:

$('p:first')第一个p元素，等于$('p').first()

$('p':last)最后一个p元素，等于$('p').last();

$('p:eq(2)')依据索引

$('p:even')选取全部偶数个p

$('odd)选取全部奇数个p

$('p:gt(index)')大于索引

$('p:lt(index)')小于索引

$('header')选取全部h1-h6元素

$('input:not(.myclass)')选取样式名不是myclass

过滤器练习：

过滤器练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="scripts/jquery-1.8.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#table1 tr:first').css('font-size', '30px');

            $('#table1 tr:last').css('color', 'red');

            $('#table1 tr:gt(0):lt(3)').css('fontSize', '28px');

            $('#table1 tr:odd').css('backgroundColor', 'red');

        });

    </script>

</head>

<body>

    <table id="table1" border="1">

        <tr>

            <td>

                姓名

            </td>

            <td>

                成绩

            </td>

        </tr>

        <tr>

            <td>

                tom

            </td>

            <td>

                100

            </td>

        </tr>

        <tr>

            <td>

                jim

            </td>

            <td>

                99

            </td>

        </tr>

        <tr>

            <td>

                john

            </td>

            <td>

                98

            </td>

        </tr>

        <tr>

            <td>

                jason

            </td>

            <td>

                97

            </td>

        </tr>

        <tr>

            <td>

                aaa

            </td>

            <td>

                97

            </td>

        </tr>

        <tr>

            <td>

                平均分

            </td>

            <td>

                98

            </td>

        </tr>

    </table>

</body>

</html>

9、Jquery效果：

animate()	对被选元素应用“自己定义”的动画
clearQueue()	对被选元素移除全部排队的函数（仍未执行的）
fadeIn()	逐渐改变被选元素的不透明度。从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上执行动画
toggle()	对被选元素进行隐藏和显示的切换

Jquery效果简单易用，能够在w3cschool中查看效果演示

Jquery效果练习：仿QQ好友选项卡

仿QQ好友选项卡

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        *

        {

            padding: 0;

            margin: 0;

        }

        div

        {

            width: 200px;

            height: 500px;

            border: 1px solid blue;

        }

        ul

        {

            list-style-type: none;

        }

        ul li

        {

            text-align: center;

        }

        h3

        {

            background-color: Orange;

            cursor: pointer;

            margin-bottom: 2px;

        }

    </style>

    <script src="jquery-1.8.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //设置好友名称的背景色

            $('h3 ~ ul > li').css({ 'backgroundColor': 'blue', 'margin-bottom': '2px' });

            //为“好友组标题”注冊单击事件

            $('ul li h3').click(function () {

                $('#snd').attr('src', '1.WAV');

                $(this).next('ul').slideToggle(500);

            });

        });

    </script>

</head>

<body>

    <bgsound id="snd" loop="0" src="">

    <div>

        <ul>

            <li>

                <h3>

                    我的好友</h3>

                <ul>

                    <li>毛毛</li>

                    <li>狗狗</li>

                    <li>蛋蛋</li>

                </ul>

            </li>

            <li>

                <h3>

                    我的同学</h3>

                <ul>

                    <li>张三</li>

                    <li>李四</li>

                    <li>王五</li>

                </ul>

            </li>

            <li>

                <h3>

                    男朋友</h3>

                <ul>

                    <li>高富帅</li>

                    <li>搞搞搞</li>

                    <li>付福福</li>

                </ul>

            </li>

            <li>

                <h3>

                    备胎</h3>

                <ul>

                    <li>lyj</li>

                    <li>zzz</li>

                    <li>fff</li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

jquery初步总结的更多相关文章

第二十篇 jQuery 初步学习2
jQuery 初步学习2 前言: 老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...
第十九篇 jQuery初步学习
jQuery 初步学习 jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通 ...
jQuery初步
1.jQuery开发步骤 jQuery是第三方开源组织基于js写的一款跨主流浏览器的实用库. (1)引用第三方js库文件,<script type="text/javascript&q ...
jquery 初步学习
首先 jQuery是一个轻量级的 JS框架,核心文件才几十KB 1. jquery 对象 var $variable=jquery对象 var variable = DOM对象 $variable[0 ...
day10—jQuery初步实践，关于菜单
转行学开发,代码100天——2018-03-26 今天是本人写开发记录方面博客的第10天了,不知不觉已经涉及到jQuery框架的学习了. 第一次熬夜写前端代码还是两年前,不过中途放弃了,学的东西也日渐 ...
jQuery笔记总结
来源于:http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先,来了解一 ...
【repost】jQuery笔记总结
第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念基于Js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素 J ...
jQuery实现select三级联动
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
jQuery实现点击式选项卡
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

随机推荐

新浪微博。。openapi 分享图画+ 写作
新浪微博困难啊 .. . .. .郁闷死了. .在此记录它 1.使用界面:https://api.weibo.com/2/statuses/upload_url_text.json 能够申请,.高级权 ...
Gitblit配置
Gitblit的安装配置及访问-windows (2013-09-11 11:52:31) 转载▼ 分类: android基础 Git 是现在很流行的分布式版本控制工具,github更是人人皆知. ...
ffplay for mfc 代码备忘录
在上传一个开源播放器项目ffplay for mfc.它会ffmpeg工程ffplay媒体播放器(ffplay.c)移植到VC环境,而使用MFC做一套接口.它可以完成一个播放器播放的基本流程的视频:解 ...
J2SE习题(2)
第四.五周练习题 1.a. Define a class called BlogEntry that could be used to store an entry for a Weblog. Th ...
uva 10671 - Grid Speed(dp)
题目链接:uva 10671 - Grid Speed 题目大意:给出N,表示在一个N*N的网格中,每段路长L,如今给出h,v的限制速度,以及起始位置sx,sy,终止位置ex,ey,时间范围st,et ...
怎么确定你的CPU是否支持64位虚拟化
http://www.grc.com/securable.htm 第一个64位表示你的电脑最多支持多少位的系统,32或者64. 第二个表示你的硬件是否支持DEP?Yes,支持.No,不支持.OFF,表 ...
修改系统环境变量 cmd命令
详细大家对cmd的使用都有了一些简单的了解,但是困扰大家的主要的问题就是: cmd命令修改环境变量有两种方式:1. 短期内有效,在关闭dos窗口后就自动失效 2.长期有效,关闭dos窗口后还有效下面 ...
键盘控制div上下左右移动 (转)
<html> <head> <title></title> <link rel="stylesheet" type=" ...
linux进程通信之共享内存
共享内存同意两个或多个进程共享一给定的存储区,由于数据不须要来回复制,所以是最快的一种进程间通信机制.共享内存能够通过mmap()映射普通文件(特殊情况下还能够採用匿名映射)机制实现,也能够通过系统V ...
Windows 8实例教程系列 - 数据绑定基础实例
原文:Windows 8实例教程系列 - 数据绑定基础实例数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Stor ...

jquery初步总结

jquery初步总结的更多相关文章

随机推荐

热门专题