操作元素的样式
主要包括以下几种方式:
$("#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. 使用google浏览器模拟手机终端的方法

    谷歌Chrome浏览器,可以很方便地用来当移动终端模拟器.在Windows的[开始]-->[运行]中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页,前提:将先前开启的谷 ...

  2. jdk、tomcat如何配置环境变量

    一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. 2.安装Tomc ...

  3. 七 vue学习 async/await

    1:  javaScript async/await: 调用async函数的时候,是异步的,函数后面的代码继续执行.! async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解 ...

  4. grep的用法(CentOS7)及有关正则表达式的使用

    环境准备:alias grep="grep --color" 1.grep以整行为单位进行处理,行中有的匹配显示出来 Last中取出符合root的行:grep  '查找字符串' l ...

  5. selenium上传文件,怎么操作

    #通过os.path.abspath()方法,打开图片的绝对路径,然后,定位上传按钮,然后,send_keys()方法中,添加这个文件路径就可以了

  6. CodeForces 1131G. Most Dangerous Shark

    题目简述:从左到右依次有$n \leq 10^7$个Domino骨牌,高度为$h_i$,手动推倒他的花费为$c_i$.每个骨牌之间的距离为$1$.一个骨牌可以被向左或者向右推倒.当第$i$个骨牌被推倒 ...

  7. CF-845B

    B. Luba And The Ticket time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  8. 一步步实现 Prism + MEF(二)--- 绑定命令

    Prism程序集为我们提供了DelegateCommand命令,使用该命令可实现窗口直接绑定.第一步:在ViewModel中定义一个DelegateCommand属性. public Delegate ...

  9. js函数定义参数个数和实际传入参数的对比

    因为js是一种弱类型的编程语言,对数据类型的要求没有其他编程语言的要求严格,所以在定义函数的时候不需要像java和C#一样对其传入参数的类型进行定义.那么传入参数的个数有没有影响呢?今天小猪就做了个实 ...

  10. 牛客多校5 A-gpa(01分数规划)

    gpa 链接:https://www.nowcoder.com/acm/contest/143/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言 ...