jQuery基础教程笔记适合js新手第1/2页

1, ：eq()和nth-child() 
看下面代码：
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("#selected-plays > li:eq(1)").addClass("a");
//等价于  $("#selected-plays > li:nth-child(2)").addClass("a");

//注意：js数组是从 0 开始的，所以eq（1）是取第二个元素。
//而css选择器:nth-child（）是从 1 开始的， 所以要选择第二个元素， 得使用 :nth-child(2)  ，而不是:nth-child(1)。
     })
 </SCRIPT>

2，:odd 和  :even   
:odd      : 奇数行    
:even     : 偶数行
新手经常会说，好像跟我们做的相反？
其实与 :eq() 选择器一样， 下标都是从 0开始的，
也就是  表格的第一行 编号是 0  （偶数）；
第二行 编号是 1   （奇数）；以此类推。。。

3, $("tr:odd").addClass()
可以写成  $("tr").filter(":odd").addClass()

4，$('td:contains("cssrain")')          //取得 包含 字符串 cssrain 的所有td

5，jquery 转 dom ：
$("td").get(0).tagName 或 $("td")[0].tagName

6，load():
jquery中的load（）有2层意思，
第一层 意思 可以等价于 dom中 window.onload
第二层 意思 可以load（url ）。

7：ready简写：
1;
$(document).ready(function(){   
   //do something
})
2;
$().ready(function(){   
   //do something
})
3;
$(function(){   
   //do something
})

8，事件冒泡：
正常的来说：点击B  会触发a的click。
如果我们不想触发A，可以用stopPropagation() 阻止冒泡.
具体例子：
<div id="a">aaaaaaa
<div id="b">bbbbbbbb</div>
aaaaaa</div>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').click(function(){
alert("A")
})
$('#b').click(function(e){
alert("B")
e.stopPropagation();//阻止冒泡， 从来不输出 “A" 。 可以去掉 ，试试对比效果。
})
})
</SCRIPT>

9, hide()show()会记住上一次的dipslay状态
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').toggle(function(){
$('#a').hide();//display : none ，记住display 为 inline
$('#b').hide();//display : none ，记住display 为 block
},function(){
$('#a').show(); //display : inline
$('#b').show(); //display : block
})
})
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />

10, hide()  show()加时间参数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').toggle(function(){
$('#a').hide(500);//display : none
$('#b').hide(500);//display : none
},function(){
$('#a').show(500); //display : inline
$('#b').show(500); //display : block
})
})
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />

11，效果：
show(), hide()会同时修改多个样式属性  : 高度，宽度和不透明度。
fadeIn() fadeOut() : 不透明度
fadeTo()   : 不透明度
slideDown() , slideUp()  :高度

如果都不能满意，只能用animate（）了
animate()提供了更为强大的，复杂的效果。

12，animate() : 
之前 .show('slow');  // slow代表的是0.6秒内同时改变高度，宽度和透明度 。 如果用时间表示是 600 ；===  .show(600);
那么我们再来看看 animate()

animate({heigth : 'slow' ,width : 'slow' } , 'slow' )  
这里之所以可以 height : 'slow'   其实就跟 .show('slow')  类似，当然他前面规定了height  。。

13,做动画之前 先确定位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').css("position","absolute");//如果把这句去掉，动画就没了。
/*
在使用.animate之前，请先把位置确定，不管你是用的 absolute 还是relative
总之要设置其中的一种，因为所有的块级元素默认是static。
其实是跟css有关。
*/
$('#test').click(function(){
$('#a').animate({ left : '300' } , 'slow' )
})
})
</SCRIPT>
<DIV id="a" >a</div>
<input type="button" id="test" value="test" />

14，width()和css('width')
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
var t1  =  $('#a').width();
var t2  =  $('#a').css('width');
alert( t1 ); //200 ， 不带单位
alert( t2 ); //200px ， 带单位
alert( parseInt(t2) ) //200 ， 不带单位
})
})
</SCRIPT>
<DIV id="a" style="width:200px">a</div>
<input type="button" id="test" value="test" />

15：animate()做动画效果时，动画执行的顺序。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.animate({ top : "300px" } , "slow" );
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:10px;height:10px;">a</div>
<input type="button" id="test" value="test" />
//发生上面是按照顺序来执行的。先改变left，然后再改变top

对比:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" ,  top : "300px"} , "slow" )
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:10px;height:10px;">a</div>
<input type="button" id="test" value="test" />
//发生上面是一起执行的，也就是 left和top 一起改变。

区别知道了吧。

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • jQuery 改变CSS样式基础代码

    其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: 复制代码 代码如下: $("#61dh a").css('color','#123456'); //这里选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法.示

  • 基于Jquery的淡入淡出的特效基础练习

    基于Jquery的淡入淡出的特效基础练习

    今天练习了个Jquery淡入淡出的特性代码如下: 复制代码 代码如下: <!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>

  • jQuery中的正则表达式分析 正则基础

    quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]+)$)/ (?:-)表示是一个非捕获型 [^<]表示是以"<"起始,包含0个或多个'<'括号 (<[\w\W]+>)表示是一个捕获型,以'<>'起始,中间包含一个或多个字符 $表示字符的结尾 (#([\w\-]+))表示是一个捕获型,以'#'号和字符串.数字._以及-组成 rnotwhite = /\S/ \S表示是空白字符

  • jQuery插件开发基础简单介绍

    1.开发jQuery 插件的基本格式 复制代码 代码如下: (function ($) { $.extend($.fn, { }) })(jQuery) 2.开发全局函数的基本格式 复制代码 代码如下: (function ($) { $.extend($, { }) })(jQuery) 开发示例: 复制代码 代码如下: (function ($) { $.extend($, { subtract: function (a, b) { return a-b; } , add: function

  • jQuery学习笔记之基础中的基础

    1.jQuery的简介 就像上节所将到的Ajax框架一样,简单的说,jQuery是一个优秀的javascript框架,它能够让用户方便的处理html,events(冒泡)事件,动画效果,ajax交互等,它极大程度的改变了开发者使用javascript的习惯.jQuery自2006年最初创建,已经吸引了众多的javascript高手加入其团队,随着事件推移,jQuery新版本一个一个发布,它越来越受到关注. 如今,jQuery发展到集各种javascript/css/dom和ajax功能于一体的强

  • jQuery基础学习技巧总结第1/4页

    一.简介 1.1.概述          随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度. jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 

  • jquery基础教程之数组使用详解

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象.回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出each循环可使回调函数返回false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代码 代码如下: var _mozi=

  • jQuery基础教程笔记适合js新手第1/2页

    1, :eq()和nth-child()  看下面代码: <SCRIPT LANGUAGE="JavaScript"> $(function(){ $("#selected-plays > li:eq(1)").addClass("a"); //等价于  $("#selected-plays > li:nth-child(2)").addClass("a"); //注意:js数组是从

  • Jquery 基础学习笔记

    1.属性: 为所有匹配的元素设置一个计算的属性值 //为所有的input添加属性class="btn" //$("input").attr("class","btn"); 2.CSS:为每个匹配的元素添加指定的类名 //对所有的提交按钮添加样式 $("input:submit").addClass("btn"); 3.值:获得第一个匹配元素的当前值 //取的某一按钮的值 //alert(

  • Jquery 基础学习笔记之文档处理

    主要包括以下几部分:(1)内部插入(2)外部插入(3)包裹(4)替换(5)删除(6)赋值.那我们就开始详细地看一下. 1.内部插入:向一些元素的内部插入内容 (1)append(content) :向每个匹配的元素内部追加内容,追加到元素内部的末尾,比如 描述: 向所有段落中追加一些HTML标记. HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").append("<b>Hello

  • Jquery ajax基础教程

    jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数据 这里的请求通常都是网页的某些操作,如点击等. 而其加载数据的类型归类为以下四种:a.加载HTML文件:b.加载JSON文件:c.加载Javascript文件:d.加载XML文件. 其对应的四种加载方法分别是:load.getJSON.getScript.get. a.加载HTML文件 把编写好的

  • JS基础教程——正则表达式示例(推荐)

    正则表达式的() [] {}有不同的意思. () 是为了提取匹配的字符串.表达式中有几个()就有几个相应的匹配字符串. (\s*)表示连续空格的字符串. []是定义匹配的字符范围.比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字.[\s*]表示空格或者*号. {}一般用来表示匹配的长度,比如 \s{3} 表示匹配三个空格,\s[1,3]表示匹配一到三个空格. (0-9) 匹配 '0-9′ 本身. [0-9]* 匹配数字(注意后面有 *,可以为空)[0-9]+ 匹配数字(注意后

  • Node.js 基础教程之全局对象

    Node.js 基础教程之全局对象 在浏览器 JavaScript 中,通常 window 是全局对象. Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 global 对象的属性. global 最根本的作用是作为全局变量的宿主. 注意: 永远使用 var 定义变量以避免引入全局变量,因为全局变量会污染 命名空间,提高代码的耦合风险. __filename 脚本绝对路径 表示当前正在执行的脚本的文件名.它将输出文件所在位置的绝对路径,且和命令行参数

  • Python pygame新手入门基础教程

    Python pygame新手入门基础教程

    目录 pygame简介 pygame实现窗口 设置屏幕背景色 添加文字 绘制多边形 绘制直线 绘制圆形 绘制椭圆 绘制矩形 总结 pygame简介 pygame可以实现python游戏的一个基础包. pygame实现窗口 初始化pygame,init()类似于java类的初始化方法,用于pygame初始化. pygame.init() 设置屏幕,(500,400)设置屏幕初始大小为500 * 400的大小, 0和32 是比较高级的用法.这样我们便设置了一个500*400的屏幕. surface

  • JavaScript基础教程——入门必看篇

    JavaScript基础教程——入门必看篇

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

  • Bootstrap学习笔记之js组件（4）

    Bootstrap学习笔记之js组件（4）

    这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少.不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持.一方面,自身技术有限,写的东西都比较基础,另一方面,写的东西,都是根据自己的理解,把复杂的东西用最简单的语言表达出来.所以,写的有不对的地方,麻烦各位给予指正哈.  一.js文件引用 注意点:jquery必须在在其它js文件之前引入,因为其它插件都是依赖于jquery. <!--<script src="js/jquery

随机推荐