操作元素的样式
主要包括以下几种方式:
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" }); //以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class
 
显示/隐藏元素
jQuery("#TagName").hide();
jQuery("#TagName").show();
jQuery(".TagName").css("display","none");
jQuery(".TagName").css("display","");
 
取得第一个匹配元素的属性值(如果元素没有相应属性,则返回 undefined )
jQuery("#tagName").attr("class") 或 jQuery("#tagname").attr("className");
jQuery("#checkName").attr("checked",true); // 选中checkBox
jQuery("SELECT#TagName").attr("disabled", "disabled"); // 将某个元素设置失效
 
val()与text()的区别
text()方法是取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
获取span,div ,p之类才用text()或html()方法。
例如:
<div>wahaha</div>
jQuery("div").text(); // 将得到文本"wahaha"
单行文本<input type="text" ...>不能用text()方法获得值,必须用val()方法。
val()方法是获得第一个匹配元素的当前值。
例:
<input type="text" value="a" />
<input type="text" value=" b"/>
<input type ="text" value= "cc"/>
<select>
<option>aaa</option>
<option selected="selected">bbb</option>
<option>ccc</option>
</select>
jQuery("input").val();   
jQuery("select").val();
将得到:第一个匹配元素的值“wahaha" 和"bbb"
 
 
获取一组checbox/radio被选中项的值
<input name="ckTagName" type="checkbox" checked="true" value="nn"/>
jQuery("input[@name=ckTagName][@checked]").val()
 
获取一组checkbox被选中项的个数
jQuery(":checkbox[name='checkItems']:checked").length;
或通过class获取
jQuery(".pItem:checkbox:checked").length;
 
设置radio单选组的第二个选项为当前选中值
jQuery("input[@name=items]").get(1).checked = true;
 
获取select被选中项的文本
jQuery("select[@name=selcTagName] option[@selected]").text();
获取Select被选中项的Value值
jQuery("select[@name=selcTagName] option[@selected]").val();
 
设置Select下拉框选项的第二个元素为默认值
jQuery("#selectItems")[0].selectedIndex = 1;
 
索引 eq()、get()、Index()
eq(pos)
说明:减少匹配对象 到一个单独得dom元素
参数:pos (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">
jQuery</a>jQuery代码及功能:
function jq(){
   alert($("p").eq(1).html())
}
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
 
get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
   alert($("p").get(1).innerHTML);
}
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
 
index(obj)
说明:返回对象索引
参数:obj (Object): 要查找的对象
例子:
未执行jQuery前:
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
   alert($("div").index(document.getElementById('test1')));
   alert($("div").index(document.getElementById('test2')));
}
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
 
size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前:
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
   alert($("img").length);
}
运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
 
JQuery选择器
(1)层级:
选择一[空格]选择二 表示选一内合符条件二的所有元素
选择一[>]选择二 表示选一内合符条件二的第一个元素
选择一[+]选择二 表示紧接选一符条件二的元素 next
选择一[~]选择二 表示选一后符条件二的所有元素 siblings
 
(2)运算符
:animated           动画元素
:eq(index)          索引位置,如:$("div:eq(1)"
:even               偶数元素
dd                奇数元素
:first              第一个
:gt(index)          大于索引的所有元素
:lt(index)          小于索引的所有元素
:header             H1、H2... 这些标题元素
:last               最后一个
:not(Selector)      排除

:contains(string)   选择的对象内容里包含
:empty              选择的对象内容为空
:has(Selector)      含有
:parent             与empty相反
:first-child
:last-child
:nth-child(index)   第几个
nly-child         唯一的子元素

表单
:text :checkbox :radio :image :file :submit :reset :password :button

表单状态
:checked :disabled :enabled :selected

可见性
:hidden :visible

属性及其运算符
[属性名称]        匹配包含给定属性的元素
[att=value]       等同上面
[att*=value]      模糊匹配
[att!=value]      不能是这个值
[att$=value]      结尾是这个值
[att^=value]      开头是这个值
[att1][att2][att3]...   匹配多个属性条件中的一个

jQuery的一些备忘的更多相关文章

  1. Lazy Load, 延迟加载图片的 jQuery 插件【备忘】

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...

  2. jquery远程班备忘

    基础第一课: 1. $(obj)获取的是一个集合,因此length最小是1, jquery,如果元素不存在,也不会报错,可通过$(obj).length<1就可以查看该元素是否存在. 2. at ...

  3. JQuery中常用方法备忘

    本文转载自博客园,原文地址 http://www.cnblogs.com/xzf158/archive/2008/10/14/logan.html 1.Window.onload 的JQuery方法 ...

  4. JQuery Mobile难点备忘

    1 固定header: data-position="fixed",如果仅仅是加了这个属性,当页面出现滚动条的时候点击页面内容,header还是会隐藏显示全屏,如果不需要这样,加入 ...

  5. jquery 常用的备忘

    1.table 取  tr 的 id值 <table class="table table-striped table-hover table-bordered" id=&q ...

  6. Javascript备忘模式

    使用备忘模式,利用了函数的自定义属性,先看一个例子 var test = function (){} test.myAttr = "attr"; 这样,就给test加上了一个自定义 ...

  7. AngularJS之备忘与诀窍

    译自:<angularjs> 备忘与诀窍 目前为止,之前的章节已经覆盖了Angular所有功能结构中的大多数,包括指令,服务,控制器,资源以及其它内容.但是我们知道有时候仅仅阅读是不够的. ...

  8. leaflet 学习备忘

    leaflet 开源js地图工具.非常好用. leaflet参考:http://leafletjs.com/ 特性: 完全开源,可以基于不同的第三方瓦片生成地图. 基于原始GPS,无需转换 可创建离线 ...

  9. GIS部分理论知识备忘随笔

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.高斯克吕格投影带换算 某坐标的经度为112度,其投影的6度带和3度带 ...

随机推荐

  1. 集训Day10

    果然颓的不像话 bzoj3680 gty又虐了一场比赛,被虐的蒟蒻们决定吊打gty.gty见大势不好机智的分出了n个分身,但还是被人多势众的蒟蒻抓住了.蒟蒻们将n个gty吊在n根绳子上,每根绳子穿过天 ...

  2. JSP 使用<%@include%>报Duplicate local variable path 错误 解决方法

    错误提示:Multiple annotations found at this line:- Duplicate local variable path- Duplicate local variab ...

  3. bzoj 4319: Suffix reconstruction 后缀数组+构造

    题目大意 给定后缀数组sa,要求构造出满足sa数组的字符串.或输出无解\(n\leq 5*10^5\) 题解 我们按照字典序来考虑每个后缀 对于\(Suffix(sa[i])\)和\(Suffix(s ...

  4. vs2012解决scanf,printf编译出错的问题

    转自http://www.th7.cn/Program/c/201303/127343.shtml 在VS 2012 中编译 C 语言项目,如果使用了 scanf 函数,编译时便会提示如下错误: er ...

  5. this在方法赋值过程中无法保持(隐式丢失)

    在看<高级程序设计>(我的红宝书) P.183页时遇到下面一个问题 var name = "77"; var obj = { name: "88", ...

  6. layout属性

    RelativeLayout 第一类:属性值为true可false android:layout_centerHrizontal        水平居中 android:layout_centerVe ...

  7. mysql 中sql语句的执行顺序

    今天突然想起来,之前面试一个很牛逼的公司(soho)的时候,一个美眉面试官,面试的时候问到了很多之前都没有意识到的问题,回想起来那美眉看着年纪不大,技术那是真666啊.好了说一下人家问的这个有关mys ...

  8. PCL类的设计结构

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=243 类和应用程序接口 对于PCL的大多数类而言,调用接口(所有public ...

  9. Ajax的调试错误信息的输出

    error: function(xhr, status, error) { console.log(xhr); console.log(status); console.log(error); }

  10. win10怎样彻底关闭windows Defender

    首先,我们在电脑中需要进入注册表编辑器进行修改,win10电脑进入windows Defender可以有两种方式,第一种是通过电脑自带的小娜进入,第二种则是常规的win加r.   不管使用哪种方式,首 ...