关闭

jquery相关

41人阅读 评论(0) 收藏 举报
分类:

jquery选择器大全
$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 
$("div")           选择所有的div标签元素,返回div元素数组 
$(".myClass")      选择使用myClass类的css的所有元素 
$("*")             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass"
  
层叠选择器: 
$("form input")         选择所有的form元素中的input元素 
$("#main > *")          选择id值为main的所有的子元素 
$("label + input")     选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 
$("#prev ~ div")       同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 
  
基本过滤选择器: 
$("tr:first")               选择所有tr元素的第一个 
$("tr:last")                选择所有tr元素的最后一个 
$("input:not(:checked) + span")   
  
过滤掉:checked的选择器的所有的input元素 
  
$("tr:even")               选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) 
  
$("tr:odd")                选择所有的tr元素的第1,3,5... ...个元素 
$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素 
$("td:gt(4)")             选择td元素中序号大于4的所有td元素 
$("td:ll(4)")              选择td元素中序号小于4的所有的td元素 
$(":header"
$("div:animated"
内容过滤选择器: 
  
$("div:contains('John')") 选择所有div中含有John文本的元素 
$("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组 
$("div:has(p)")        选择所有含有p标签的div元素 
$("td:parent")          选择所有的以td为父节点的元素数组 
可视化过滤选择器: 
  
$("div:hidden")        选择所有的被hidden的div元素 
$("div:visible")        选择所有的可视化的div元素 
属性过滤选择器: 
  
$("div[id]")              选择所有含有id属性的div元素 
$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素 
  
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 
  
$("input[name^='news']")         选择所有的name属性以'news'开头的input元素 
$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 
$("input[name*='man']")          选择所有的name属性包含'news'的input元素 
  
$("input[id][name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 
  
子元素过滤选择器: 
  
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)"
  
$("div span:first-child")          返回所有的div元素的第一个子节点的数组 
$("div span:last-child")           返回所有的div元素的最后一个节点的数组 
$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组 
  
表单元素选择器: 
  
$(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button 
  
$(":text")                     选择所有的text input元素 
$(":password")           选择所有的password input元素 
$(":radio")                   选择所有的radio input元素 
$(":checkbox")            选择所有的checkbox input元素 
$(":submit")               选择所有的submit input元素 
$(":image")                 选择所有的image input元素 
$(":reset")                   选择所有的reset input元素 
$(":button")                选择所有的button input元素 
$(":file")                     选择所有的file input元素 
$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域 
  
表单元素过滤选择器: 
  
$(":enabled")             选择所有的可操作的表单元素 
$(":disabled")            选择所有的不可操作的表单元素 
$(":checked")            选择所有的被checked的表单元素 
$("select option:selected") 选择所有的select 的子元素中被selected的元素 
  
   
  
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text() 
  
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 
  
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val(); 
  
   
  
   
  
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 
  
1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点 
  
例子:找到表单中所有的 input 元素 
  
HTML 代码: 
  
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 
jQuery 代码: 
  
$("form input"
结果: 
  
[ <input name="name" />, <input name="newsletter" /> ] 
  
2. $("A>B") 查找A元素下面的直接子节点 
例子:匹配表单中所有的子级input元素。 
  
HTML 代码: 
  
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 
jQuery 代码: 
  
$("form > input"
结果: 
  
[ <input name="name" /> ] 
  
3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点 
例子:匹配所有跟在 label 后面的 input 元素 
  
HTML 代码: 
  
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 
jQuery 代码: 
  
$("label + input"
结果: 
  
[ <input name="name" />, <input name="newsletter" /> ] 
  
  
4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 
例子:找到所有与表单同辈的 input 元素 
  
HTML 代码: 
  
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 
jQuery 代码: 
  
$("form ~ input"
结果: 
  
[ <input name="none" /> ]
根据题主的提问,想必题主是想用js来控制表单的验证和提交吧。
验证必须在提交之前,验证要做的就是获取需要验证的表单元素的值。
如果使用jquery,可以使用$("#formid").serialize()格式化然后使用js转化为结构化数据,再进行判断,这样既方便又快捷。
示例代码如下:
var formSerializeData = $("#formid").serialize();var formDatas = formSerializeData.split("&");var validateData = {};for(var i=0; i< formDatas.length; i++) { var temp = formDatas[i].split("="); var key = temp[0]; var val = temp[1]; validateData[key] = val;}



js jquery 获取元素(父节点,子节点,兄弟节点)
一,js 获取元素(父节点,子节点,兄弟节点)
  var test = document.getElementById("test");
  var parent = test.parentNode; // 父节点
  var chils = test.childNodes; // 全部子节点
  var first = test.firstChild; // 第一个子节点
  var last = test.lastChile; // 最后一个子节点   var previous = test.previousSbiling; // 上一个兄弟节点  var next = test.nextSbiling; // 下一个兄弟节点

二,jquery 获取元素(父节点,子节点,兄弟节点)
$("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1").parents(".mui-content"); $("#test").children(); // 全部子节点 $("#test").children("#test1"); $("#test").contents(); // 返回#test里面的所有内容,包括节点和文本 $("#test").contents("#test1"); $("#test1").prev(); // 上一个兄弟节点 $("#test1").prevAll(); // 之前所有兄弟节点 $("#test1").next(); // 下一个兄弟节点 $("#test1").nextAll(); // 之后所有兄弟节点 $("#test1").siblings(); // 所有兄弟节点 $("#test1").siblings("#test2"); $("#test").find("#test1");

三,元素筛选 // 以下方法都返回一个新的jQuery对象,他们包含筛选到的元素 $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first(); // 选取ul li中匹配的第一个元素 $("ul li").last(); // 选取ul li中匹配的最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素 $("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素

0
0
查看评论

jQuery插件的编写相关技术 设计总结和最佳实践

1、声明插件名称: 添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数的名称就是你的插件名称: jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here }; ...
  • javagtcpp
  • javagtcpp
  • 2013-10-23 14:40
  • 690

Jquery相关技术点收集

toggle,toggleClass,自定义toggleXXXX toggle:元素隐藏/显示 toggleClass:增加/去除一个css Class toggleXXXX: 例: <html> <head> <title> New Document &l...
  • smnzg
  • smnzg
  • 2016-09-28 17:08
  • 135

常用的JS/jQuery技术和技巧

获取指定id的某个属性的值: 例如获取id=myForm的表单的action属性的值 document.getElementById("myForm").action 也可以设置它的值: document.getElementById("...
  • zollty
  • zollty
  • 2016-12-30 15:57
  • 384

jQuery常用相关插件

插件(Plugin)又称扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序。 jQuery的易扩展性,吸引了来自全球的开发者来共同编写jQuery插件,目前已经有超过几百种插件因公在全球不同类型的项目上,使用这些经过无数人检验和完善的优秀插件,可以帮助用户开发出稳定的应用系统...
  • limm33
  • limm33
  • 2016-03-16 22:24
  • 406

Jquery,Ajax等前端技术总结一

装糊涂的前提是已明白。 技术和生活一样,每一步我们都要知道自己在做什么,否则,你连装糊涂的权利都没有了,走马观花而已。 关于项目中引用的Jquery插件 一:Jquery核心库文件(此文件不包含不必要的空白字符,没有注释,并且所有的局部变量名称的长度是一个字符。在B...
  • haiyangzhibing
  • haiyangzhibing
  • 2014-01-21 11:28
  • 2366

js和jquery中有关透明度操作的问题

在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果。下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点:    1 透明度样式设置       透明度在IE浏览器和其他相关浏览器中的设置方法不太相同...
  • movelion
  • movelion
  • 2014-01-04 17:15
  • 1169

JQuery 相关

第一天 jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性。 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。 方法 描述 addClass() 向匹配的元素添加指定的类名。 attr() 设置或返回匹配元素的...
  • flowerspring
  • flowerspring
  • 2016-05-25 15:03
  • 160

jQuery 相关

jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性: HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities jQuery 语法 jQuery 语法是为 HTML ...
  • whjay520
  • whjay520
  • 2016-08-12 15:24
  • 253

Jquery使用(4) :BOM和操作DOM,综合实例

1.JS部分             function OpenWin() {          ...
  • yoyoshaoye
  • yoyoshaoye
  • 2012-02-17 22:33
  • 2261

jquery基础例子

1.jquery标签页.html tab标签页 * { padding: 0; margin: 0; } ul { list-style-type: ...
  • u012953466
  • u012953466
  • 2016-03-17 23:11
  • 641
    个人资料
    • 访问:132次
    • 积分:9
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档