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>
jquery入门学习笔记的更多相关文章
- JQuery入门学习笔记(全)
jQuery 语法 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 元素 $("p.test").hide() - 隐 ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记(三)
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
- PyQt4入门学习笔记(一)
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
- Hadoop入门学习笔记---part2
在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...
- Hadoop入门学习笔记---part1
随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...
- Scala入门学习笔记三--数组使用
前言 本篇主要讲Scala的Array.BufferArray.List,更多教程请参考:Scala教程 本篇知识点概括 若长度固定则使用Array,若长度可能有 变化则使用ArrayBuffer 提 ...
- OpenCV入门学习笔记
OpenCV入门学习笔记 参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...
随机推荐
- Solr5.0配置中文分词包
Solr中默认的中文分词是用Lucene的一元分词包. 现在说明在Solr5.0中配置Lucene的SmartCN中文分词包. 1,进入Solr的安装目录,我这里是:/root/nutch/solr- ...
- 转自:C#中TextBox水印提示的简单实现
本文转自: 原作者: js2854 出处: http://js2854.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...
- 使用css让XML文件按照HTML的风格显示出来
attrib.css name { display:block; color:blue; font-size:20pt; font-weight:bold; } id,company,email,te ...
- 李洪强iOS经典面试题137-内存管理
内存管理 ARC处理原理 ARC是Objective-C编译器的特性,而不是运行时特性或者垃圾回收机制,ARC所做的只不过是在代码编译时为你自动在合适的位置插入release或autoreleas ...
- List集合对象根据字段排序
//把需要比较的对象实现Comparable接口实现compareTo方法 public class Address implements Comparable<Address> { St ...
- getPos,offsetTop
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- ArcGIS 使用点滴记录
(1)ArcGIS Shapefile数据text类型字段最长为254.若想更长,使用GeoDatabase (2)ArcGIS中出现一些奇奇怪怪的问题,找不到解决方法时,一般考虑是不是空间参考的问题 ...
- redis虚拟机模拟集群,节点,增加多端口命令
Redis启动多端口,运行多实例 使用redis在同一台机器上,启用多个端口,实现多个实例,完成集群的模拟实现. 启动多实例 redis默认启动端口为6379,我们可以使用 --port 来指定多个端 ...
- STL_关联容器 VS C++ hashmap
红黑树和哈希表区别: http://m.blog.csdn.net/article/details?id=52133283 关于STL中关联容器的几个问题: (1)为何map和set的插入删除效率比用 ...
- CMS .NET 程序框架 从2.0/3.5升级到4.0 版本后 需要调整的地方
问题一: document.forms1.action 不可使用 需要修改程 document.forms[0] .NET 程序框架 从2.0/3.5升级到4.0 版本后,document.forms ...