最近换了工作,在这家公司里,使用了大量的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超链接跳转

      $(function () {
      $("button > a").click(function () {
          console.log("gg");
       return false;
      })
      })

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

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

    ```js



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



    function cancelTrade (id) {

    console.log(id);

    return false;

    }

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

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

event.type获取事件类型

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

模拟用户操作

  $(function () {
        $('.two').click(function () {
            $('.two').append($('.one'))

        })
        $('.two').trigger("click")
    })

动画

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

表单

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

parent和parents的区别

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

eq和nth-child的区别

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

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

    <script type="text/javascript">
        $(function(){
            var $id_a  = $('#id.a');//jQuery对象
            var $id_b  = $('#id#b');//jQuery对象
            var $id_c =  $('#id[1]');   //jQuery对象
            alert( $id_a.html() );//这样会获取不到,输出null
            alert( $id_b.html() );//这样会获取不到,输出null
            alert( $id_c.html() );//这样会获取不到,输出null
    
            var $id_right_a  = $('#id\\.a');//jQuery对象,对特殊字符,我们转义一下
            var $id_right_b  = $('#id\\#b');//jQuery对象,对特殊字符,我们转义一下
            var $id_right_c  = $('#id\\[1\\]');             //对特殊字符,我们转义一下
            alert( $id_right_a.html() );//正确输出"aa"
            alert( $id_right_b.html() );//正确输出"bb"
            alert( $id_right_c.html() );//正确输出"cc"
        })
    </script>
    <div id="id.a">aa</div>
    <div id="id#b">bb</div>
    <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. JS-SDK微信支付开发攻略

    一.吐槽篇 一个字——坑!两个字——很坑!三个字——非常坑!首先,微信支付接口作为微信开发接口的一部分,竟然有一本书那么厚的官方文档,共36页,更重要的是,这36页还不能把开发的流程说清楚,描述过于分 ...

  2. 桂电在线-转变成bootstrap版3(记录学习bootstrap)

    继续上文 正文菜单 html: <!-- 菜单块 --> <div class="on-light" id="menus"> <s ...

  3. debug(fmt,args...)调试

    1.定义宏(debug.h) #ifndef __DEBUG__H #define __DEBUG__H #include <stdio.h> #ifdef DEBUG #define d ...

  4. PI数据库的使用-PI System Management Tools

    1.PI连接管理器 2.标记搜索 3.当前值

  5. 初识EL表达式

    1.EL最初出现在JSTL,后来引入JSP 2.核心作用:减少JSp中Java代码数量,同时方便修改 3.算术.逻辑.关系符号都是两种,防止出现歧义,比如:/和div,%和mod,>=和ge,相 ...

  6. 深入了解一下PYTHON中关于SOCKETSERVER的模块-A

    有了这块知识,应该对各类WEB框架有更好的理解吧..FLASK,DJANGO,WEBPY.... #!/usr/bin/env python from BaseHTTPServer import HT ...

  7. vim文本编辑器的总结

    说起文本编辑器,在下就不得不说vim这个老古董了,说老吧,但也是老当益壮,至今还是有不少拥护者.的确,vim很实用,在下就先列出vi的优点吧. 1.如果精通了vim,就可以省去鼠标了. 2.vim是跨 ...

  8. 嵌入式C语言头文件的建立与使用

    如何正确编写 C 语言头文件和与之相关联的 c 源程序文件,这首先就要了解它们的各自功能. 要理解 C 文件与头文件(即.h)有什么不同之处,首先需要弄明白编译器的工作过程. 一般说来编译器会做以下几 ...

  9. 【POJ】2001 Shortest Prefixes

    字典树. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 26 typed ...

  10. Learning WCF Chapter 3 Bindings One-Way and Duplex Communication

    One-Way and Duplex Communication A message exchange pattern describes the way messages are sent betw ...