每天学习点jquery

一、jquery选择器

1、根据给定的ID匹配一个元素(如果选择器中包含特殊字符,可以用两个斜杠转义)id选择器

   举例:html代码 <div id="notMe"><p>id="notMe"</p></div>

          <div id="myDiv">id="myDiv"</div>

          jquery代码 $("#myDiv");

     结果 [ <div id="myDiv">id="myDiv"</div> ]

查找含有特殊字符的元素

      html代码 <span id="foo:bar"></>

            <span id="foo[bar]"></span>

           <span id="foo.bar"></span>

      jquery代码 #foo\\:bar

#foo\\[bar\\]

                  #foo\\.bar

2、根据给定的元素名匹配所有的元素(element选择器)

    举例:HTML代码 <div>DIV1</div>

            <div>DIV2</div>

                       <span>SPAN</span>

       jquery代码 $("div");

       结果:[ <div>DIV1</div>, <div>DIV2</div> ]

3、根据给定的类匹配元素(.class选择器)

        举例:HTML代码 <div calss="noteMe">div class="noteMe"</div>

            <div class="myClass">div class="myCLass"</div>

                           <span class="myClss">span class="myClass"</span>

       jquery代码:$(".myClass");

               结果:[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

4、匹配所有元素(*选择器)

     举例:Html代码:<div>DIV</div>

             <span>SPAN</span>

              <p>P</P> 

           jquery代码:$("*") 

5、selector1,selector2,selectorN(将每一个选择器匹配到的元素合并后一起返回)

     举例:HTML代码:<div>div</div>

              <p class="myClass">p class="myClass"</p>

                         <span>span</span>

              <p class=""notMyclass">p class="notMyclass"</p>   

          jquery代码:$("div,span,p.myClass");

           结果:[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

6、在给定的所有祖先元素匹配所有的后代元素

    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" /> ]

7、在给定的所有父元素下匹配所有的子元素

      举例: 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" /> ]

8、匹配所有紧跟在prev元素后的next元素

        举例: 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" /> ]

9、匹配 prev 元素之后的所有 siblings 元素

                举例:HTML代码:找到所有与表单同辈的 input 元素

          <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" />

9、:first 获取第一个元素

       举例: HTML代码:<ul>

                <li>list item 1</li>

                <li>list item 2</li>

                <li>list item 3</li>

                <li>list item 4</li>

                <li>list item 5</li>

                </ul>

          jquery代码:$(‘li:first‘);

          结果:<li>list item 1</li>

10、:last()获取最后的元素

    举例:HTML代码:<ul>

              <li>list item 1</li>

              <li>list item 2</li>

              <li>list item 3</li>

              <li>list item 4</li>

              <li>list item 5</li>

              </ul>

      jquery代码:$(‘li:last‘)

         结果:[ <li>list item 1</li> ]

        

每天学习点jquery

时间: 2024-10-16 08:27:55

每天学习点jquery的相关文章

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops

Jquery基础总结

jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. <ul> <li id=&quo

初识jQuery

jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:

zepto与jquery冲突的解决

问题出现的背景: 在light7框架下搭建的触屏版项目中,要拓展一个投票系统,其中投票系统有一个比较完善的上传组件,但是此组件是依赖zepto的,而原来的项目是依赖jQuery的,所以就会遇到冲突的问题: 解决方法1: jquery有一个方法叫noConflict() ,可以把jquery的$改掉. var jq=$.noConflict(); 这个时候用jq来代替jquery的$吧. 解决方法2: zepto的符号改掉 window.zp=window.Zepto = Zepto 在zepto

jQuery父级以及同级元素查找的实例

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(

jQuery EasyUI---DataGrid

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../jquery-1.4.2.min.js" ty

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

jQuery $.ajax传递数组的traditional参数传递必须true

出自:http://blog.csdn.net/ojackhao/article/details/24580437 起初我认为traditional:true,可有可无,但是后来不用traditional的时候,发现后台无法获取selectUsers的值,那么可以肯定的是traditional默认值是false.当提交的参数是数组( {selectUsers:[value,value,value]} ),如果是false的话,则提交时会是"selectUsers[]=value&sele