jquery入门学习笔记

还是先来个例子:

<div id="div1" class="box">div</div>

<ul>
<li></li>
<li></li>
<li></li>
<li class="boxs"></li>
<li title="hello"></li>
</ul>

<script>
//JQ中选择元素
//$(‘#div1‘).css(‘background‘,‘red‘);id选择法,后面呢是改变CSS的样式;
//$(‘.box‘).css(‘background‘,‘red‘);class选择法
//$(‘div‘).css(‘background‘,‘red‘);类别选择法
$(‘li:eq(2)‘).css(‘background‘,‘red‘); //第三个li都变红,eq就是相当于下表,类似数组的下标,从0开始;
//$(‘li:odd‘).css(‘background‘,‘red‘);偶数行变红
$(‘li‘).filter(‘[title=hello]‘).css(‘background‘,‘red‘);//filter是过滤的意思,就是这个元素带title=hello的背景颜色为红色
$(‘li‘).filter(‘.box‘).css(‘background‘,‘red‘);
</script>

以上就是jquery选中元素的方法;

juery是js的库:

JS:window.onload=function(){}
JQ:$(function(){})
function $(){}

JS:innerHTML=123
JQ;html(123)
function html()

JS:onclick=function(){}
JQ:click(function(){})
function click(){}

常用的几种,其他的还没学;

取值赋值:

$(function(){
$("div").html("hello"); //赋值
alert($("div").html()); //取值
$("div").css("width","200px");//赋值 若是一组元素,则全部赋值
alert($("div").css("width"))//取值,若是一组元素,只取到第一组
});

其他常用的属性方法

attr:att是操作属性的,例如

<body>
<div title="123">div</div>
</body>
<script>
$(function(){
$(‘div‘).attr("title","124")
alert($(‘div‘).attr(‘title‘))
})</script>

filter  not  has:

<body>
<div class="box"> div1<span>span</span></div>
<div> div2</div>
</body>
<script>
$(function(){
//filter 过滤 针对元素本身
//not filter的反义词 针对元素
//has用于包含,看元素里面的东西是否包含要包含的条件
$(‘div‘).filter(‘.box‘).css(‘background‘,‘red‘)//选择带box的
//$(‘div‘).not(‘.box‘).css(‘backgrount‘,‘red‘)//选择不带box的
//$(‘div‘).has(‘span‘).css("background",‘red‘)//选择包含span标签的

})
</script>

next,prev,find

<script>
$(function(){
//next:指向下一个兄弟节点
//prev:指向上一个兄弟节点
//find:查找
//eq:相当于下标
$("div").next().css("background","red")
$("div").find(‘h2‘).eq(1).css("background","yellow")

})</script>
<body>
<div>div
<h3>h3</h3>
<h2>h2</h2>
<h2>h2</h2>
<h3>h3</h3>
</div>
<span>span</span>
<p>p</p>
</body>

index

<script>
$(function(){
//index:在当前元素的兄弟元素中的位置,从0开始
alert($("#h").index())

})
</script>
<body>
<div>
<h3>h3</h3>
<h2>h2</h2>
<h2>h2</h2>
<h2>h2</h2>
<h3 id="h">h3</h3>
<h3>h3</h3>
<h3>h3</h3>
</div>
</body>

时间: 2024-10-06 02:26:53

jquery入门学习笔记的相关文章

jQuery入门学习笔记(一)

最容易混淆的几个概念 jQuery对象不等于DOM对象 DOM是Document Object Model的缩写,中文是文档对象模型.它是HTML和XML的应用程序接口,DOM将整个页面映射为一个由层次节点组成的文件. [例1] <!DOCTYPE html> <html lang="en"> <head> <title>标准DOM示例</title> </head> <body> <h1>

android JNI入门-学习笔记

JNI入门-学习笔记 可执行文件 Windows - *.exe | linux - *.elf c函数库文件 Windows - *.dll | linux - *.so 批处理文件 Windows - *.bat | linux - *.sh 工具 NDK -- native developer kits Cygwin -- Linux系统模拟器 安装过程要点: --安装时可以联网安装也可以通过本地文件安装(如果有本地文件) --Select Packages:没必要全部安装,安装Devel

Hadoop入门学习笔记---part4

紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操作,前提是按照<Hadoop入门学习笔记---part2>中的已经在虚拟机中搭建好了Hadoop伪分布环境:并且确定现在linux操作系统中hadoop的几个进程已经完全启动了. 好了,废话不多说!实际的例子走起. 在myeclipse中新建一个java工程: 在项目工程中新建一个lib包用于存放

Hadoop入门学习笔记---part1

随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力,好好做.正是因为选题和hadoop有关,现在正式开始学习hadoop.将笔记整理于此,希望与志同道合的朋友共同交流. 作者:itRed 邮箱:[email protected] 个人博客链接:http://www.cnblogs.com/itred 好了,废话不多说.进入正题!开始hadoop的学习

汇编入门学习笔记 (六)—— si、di,双重循环

疯狂的暑假学习之  汇编入门学习笔记 (六)-- si.di,双重循环 参考: <汇编语言> 王爽 第7章 1. and和or指令,与[bx+idata] and和or,就不多说了. [bx+idata] 这样写是可以的,某些情况下,比较方便. [bx+idata] 也可以写成 idata[bx] 直接见例子: 把'ABcde' 跟 'fGHig' 都改成大写(ASCII中大写字母与小写字母二进制中,只有第五位不同,大写字母是0,小写字母是1) assume cs:code,ds:data d

jQuery插件学习笔记

最近在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能.通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率. 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名.但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习

汇编入门学习笔记 (八)—— 转移指令

疯狂的暑假学习之  汇编入门学习笔记 (八)--  转移指令 參考: <汇编语言> 王爽 第9章 能够改动ip或者同一时候改动cs和ip的指令统称为转移指令. 8086CPU转移行为分为: 段内转移:仅仅改动ip 段间转移:同一时候改动cs和ip 段内转移按ip改动的范围可分为: 短转移:ip改动范围 -128~127 近转移:ip改动范围 -32768~32767 转移指令分为: 无条件转移指令.如 jmp 条件转移指令 循环指令.如 loop 过程. 中断. 1. offset,nop指令

Hadoop入门学习笔记---part3

2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hadoop有了一个基础的了解.但是还是有一些理论性的东西需要重复理解,这样才能彻底的记住它们.个人认为重复是记忆之母.精简一下: NameNode:管理集群,并且记录DataNode文件信息: SecondaryNameNode:可以做冷备份,对一定范围内的数据作快照性备份: DataNode:存储数据:

汇编入门学习笔记 (三) —— 第一个程序

疯狂的暑假学习之  汇编入门学习笔记 (三)-- 第一个程序 参考:<汇编语言> 王爽  第四章 1.一个源程序从写到执行的过程 第一步:编写汇编源程序 第二步:对源程序进行编译连接 第三步:在操作系统中执行 2.源程序 代码: assume cs:first first segment start: mov ax,2 add ax,ax add ax,ax mov ax,4C00H int 21H first ends end start 代码解释: assume .segment.ends