学习jquery的一些笔记

display:block 显示

display:none 不显示

addClass 添加Class

removeClass 去除Class

toggleClass 来回变换Class，一般配合click事件使用，如

<html>

<head>

<styletype="text/css">

.divDefault{width:260px;font-size:10pt; padding:5px}

.divClick{width:260px;border:solid 1px #666; font-size:10pt; background-

color:#free;padding:5px}

</style>

</head>

<body>

<scriptlanguage="javascript" type="text/javascript" src=xxx位置的juery.js></src>

<scripttype="text/javascript">

$(function(){

$(".divDefault").click(function(){

$(this).toggleClass("divClick").html("点击后的样式");

})

</script>

<divclass="divDefault">点击前的样式</div>

</body>

<html>

$(this) 当前元素

$().next 下一个元素

html控制输入框高度和宽度：

placeholder可以将文字在输入框里显示一定的文字，在光标移至输入框内时自动隐藏。

同理，也可用value="这里输入文字"的方法在输入框中显示一定的文字，但是要自行调用javascript在

光标进入时将其隐藏。

$(document).ready(function(){ })

该方法的作用是在页面的内容加载完成后再调用jquery中的方法。可以避免有时候jquery函数读取不到

相应数据的情况。

window.οnlοad=function(){}这是匿名函数的写法，相当于window的onload事件调用了一个方法，但是这个方法是匿名的（因为没有其他地方会调用，所以没必要给一个名字）

如果要以常规的写法，就是定义一个函数比如aaa();

function aaa(){ xxxxx; }

再用window.onload = aaa();

这样也是同样的效果。

jQuery选择器:nth-child(even) 与:even的区别

首先看一下:nth-child和:even的说明

:nth-child(n) 第n个子节点，n从1开始

:even 页面范围内偶数的匹配元素

那么:nth-child(even)的意思就是从第1开始的偶数元素，:even的意思是指从第0开始的偶数元素

在实际中一个常见的例子就是，当给表格的偶数行设置变色时，可以跳过表头行，而从第1行开始设置

让我们看一个实际的例子，把表格的偶数行的背景色设置为红色，看一下两种写法的不同结果

用:nth-child(even)

代码：$('tabletr:nth-child(even)').css('background-color','red');

效果如下图：

1表头	表头
2
3
4
5

用:even

代码：$('tabletr:even').css('background-color','red');

效果如下图：

0表头	表头
1
2
3
4

$(“# id”).html 显示特定id的文本内容

$().hide() 隐藏特定内容

:lt 选择器选取带有小于指定 index 值的元素。

index 值从 0 开始。

经常与其他元素/选择器一起使用，来选择指定的组中特定序号之前的元素（如上面的例子）。

$(":animated")

<html>

<head>

$(document).ready(function(){

functionaniDiv(){

$("#box").animate({width:300},"slow");

$("#box").animate({width:100},"slow",aniDiv);

}

aniDiv();

$(".btn1").click(function(){

$(":animated").css("background-color","blue");

});

</script>

<style>

div

{

background:#98bf21;

height:40px;

width:100px;

position:relative;

margin-bottom:5px;

}

</style>

</head>

<body>

<button class="btn1">Mark animatedelement</button>

</body>

</html>

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

:contains(text) 获取包含给定文本的元素

:empty 获取所有不包含子元素或者文本的空元素

:has(selector) 获取含有选择器所匹配的元素的元素

:parent 获取含有子元素或者文本的元素

可见性过滤选择器语法

:hidden 获取所有不可见元素，或者type为hidden的元素

:visible 获取所有的可见元素

属性过滤选择器

[attribute] 获取包含给定属性的元素

[attribute=value] 获取等于给定的属性是某个特定值的元素

[attribute!=value] 获取不等于给定的属性是某个特定值的元素

[attribute^=value] 获取给定的属性是以某些值开始的元素

[attribute$=value] 获取给定的属性是以某些值结尾的元素

[attribute*=value] 获取给定的属性是以包含某些值的元素

[selector1][selector2][selectorN] 获取满足多个条件的复合属性的元素

示例为《权威指南》的2-10.html

.show(time) time为毫秒通常使用的值是1000到3000左右。

attr 获取元素属性

attr(name)

注意，text()无法获取样式，只能获取文本内容。

学习jquery的一些笔记相关推荐

学习jQuery顺便学习下CSS选择器：奇偶匹配nth-child(even)
原文转自:http://www.cnblogs.com/Elgin/archive/2010/05/24/1742563.html 首先解释一下两个单词,一个是odd,一个是even,这两个单词表示的 ...
[转载]从零开始学习jQuery (一) 开天辟地入门篇
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuer ...
Yann Lecun纽约大学《深度学习》2020课程笔记中文版，干货满满！
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! [导读]Yann Lecun在纽约大学开设的2020春季<深度学习>课 ...
学习jQuery的on事件
开发asp.net mvc程序,多少是离不开jQuery客户程序.今天Insus.NET学习jQuery的一个on事件驱动. 先在网页视图放一个图片铵钮,用户可以使用mouse对这图片时行over,o ...
学习jQuery之旅--使用炫酷的jQuery插件
前两篇文章中,介绍了jQuery中强大的Selectors (选择器)以及开发中比较常用的方法的使用.今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件. 做网站的 ...
从零开始学习jQuery (五) 事件与事件对象【转】
一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言本篇文章是至今为止本系列内容最多的一篇, 足以可见其 ...
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
从零开始学习jQuery (十) jQueryUI常用功能实战
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
从零开始学习jQuery (九) jQuery工具函数
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...

学习jquery的一些笔记

学习jquery的一些笔记相关推荐

最新文章

热门文章