最近换了工作,在这家公司里,使用了大量的jQuery,闲来无事看看锋利的jQuery,发现好多边边角角的选择器,却能省去一大堆逻辑上的的代码,废话不多说直接上代码。

#### jquery 对象与dom对象之间的转换

  • var cr = $cr.get(0) || var cr = $cr[0]
  • var $cr = $(cr)

    ### 判断jQuery对象存不存在
  • 看其length是否为0
  • 转化成dom对象观察

    ### 选择器

    ```js
  1. $("div[title^=te]")
  2. $("div[title$=est]")
  3. $("div[title*=es]")
  4. $("div[id][title*=es]") 组合选择器
  5. $("div:visible")可见元素
  6. $("div:hidden") 不可见元素

    ```

注意带空格表示后代 不带空格表示同级

  • return false 可以组织a超链接跳转

    1. $(function () {
    2. $("button > a").click(function () {
    3. console.log("gg");
    4. return false;
    5. })
    6. })

    也可在a标签中herf="javascript:;"

    有一种情况例外 : 在行内注册事件

    ```js



    <a href="#delete" onclick=cancelTrade("2222")>按钮



    function cancelTrade (id) {

    console.log(id);

    return false;

    }

#### 选择器还可以这样用

  1. $('ul li').filter(":contains('佳能'),:contains("xmm"),:contains("jjjj")")
  2. .addClass("promoted");
  1. $('ul li:gt(5):not(:last)')
  2. 获取索引值大于5的品牌集合对象 除最后一项

event.type获取事件类型

  1. $('a').click(function(event){
  2. alert(event.type);
  3. return false;
  4. })

模拟用户操作

  1. $(function () {
  2. $('.two').click(function () {
  3. $('.two').append($('.one'))
  4. })
  5. $('.two').trigger("click")
  6. })

动画

  1. if(!$(element).is(":animated")){
  2. // 判断是否有动画 如果没有····
  3. }

表单

  1. $("input")只选择input标签.如:<input id="" type="" name="" />
  2. $(":input")是伪类选择,不单单是input,还包括textareaselect.如<input />,<textarea></textarea>,<select></select>

parent和parents的区别

jQuery中的parent()函数和parents()函数的区别是:[*]parent()函数是只往父级找一层;[*]parents()函数是往父级找多层,一直找到body标签。

eq和nth-child的区别

  • eq为jquery的选择器 从0开始,只匹配所有的该元素的第几个元素
  • nth-child()为css的选择器,匹配该元素父元素下的子元素的第一个,从一开始。

    #### 碰到特殊字符要转义

    1. <script type="text/javascript">
    2. $(function(){
    3. var $id_a = $('#id.a');//jQuery对象
    4. var $id_b = $('#id#b');//jQuery对象
    5. var $id_c = $('#id[1]'); //jQuery对象
    6. alert( $id_a.html() );//这样会获取不到,输出null
    7. alert( $id_b.html() );//这样会获取不到,输出null
    8. alert( $id_c.html() );//这样会获取不到,输出null
    9. var $id_right_a = $('#id\\.a');//jQuery对象,对特殊字符,我们转义一下
    10. var $id_right_b = $('#id\\#b');//jQuery对象,对特殊字符,我们转义一下
    11. var $id_right_c = $('#id\\[1\\]'); //对特殊字符,我们转义一下
    12. alert( $id_right_a.html() );//正确输出"aa"
    13. alert( $id_right_b.html() );//正确输出"bb"
    14. alert( $id_right_c.html() );//正确输出"cc"
    15. })
    16. </script>
    1. <div id="id.a">aa</div>
    2. <div id="id#b">bb</div>
    3. <div id="id[1]">cc</div>

jquery 的小角落的更多相关文章

  1. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  2. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  3. jQuery拼图小游戏

    jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...

  4. Kendo UI for jQuery自定义小部件第一弹!不得不看的入门指南

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  5. 26个jQuery使用小技巧(25)

     下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元 ...

  6. 用jquery实现小火箭到页面顶部的效果

    恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下 需要引入jquery 代码和布局都很简单 <!DOCTYPE ...

  7. Web UI开发推荐!Kendo UI for jQuery自定义小部件——使用MVVM

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  8. Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  9. Jquery使用小技巧

    1. 禁止右键使用 view plaincopy to clipboardprint? 1.       $(document).ready(function(){ 2.           $(do ...

随机推荐

  1. html5 拖拽的简要介绍

    1,首先,你要告诉计算机那个元素可以拖动,或者是一张图,或者是一个盒子,在标签里面加上 draggable="true"  2,然后,监听该元素被拖动的函数 ondragstart ...

  2. html5新增操作类名方式 classList

    如果一个元素有多个类名,要如何删除呢,jqeury提供了removeClass()这个api,如果不用插件,自己封装,可以这样 function removeClass(elm,removeClass ...

  3. Android中WebView的JavaScript代码和本地代码交互的三种方式

    一.Android中WebView的漏洞分析最近在开发过程中遇到一个问题,就是WebView使用的时候,还是需要解决之前系统(4.2之前)导致的一个漏洞,虽然现在这个系统版本用户很少了,但是也不能忽视 ...

  4. css3实现无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 消息队列msmq

    http://q.cnblogs.com/q/26895/ 远程队列必须现在运程服务器上创建. 在 Windows Server 2008 上安装 IIS 服务和 MSMQ 功能后,系统会在 IIS  ...

  6. BZOI 1507 [NOI2003] Editor

    Background After trying to solve problem EDIT1(Editor) and being ****ed by Brainf**k, Blue Mary deci ...

  7. java中如何实现全局变量

    有时一个项目中会多处涉及到路径,当你把这个项目移植到别的电脑上时就要一一修改这些路径,过程十分繁琐,所以一个全局变量在这时是必不可少的. 遗憾的是java等oo语言并没有全局变量,这怎么办呢?下面介绍 ...

  8. Keil 代码折叠功能的使用

    使用keil时将某段{......}内的代码折叠起来的方法:

  9. 14.8.9 Clustered and Secondary Indexes

    14.8.9 Clustered and Secondary Indexes 每个InnoDB 表有一个特殊的索引称为 clustered index 用于存储数据. 通常, clustered in ...

  10. SQL*Net more data to client

    The server process is sending more data/messages to the client. The previous operation to the client ...