选择器

        $(this).hide()            隐藏当前的 HTML 元素。
        $("p").hide()            隐藏所有 <p> 元素。
        $(".test").hide()        隐藏所有 class="test" 的元素。
        $('#test').hide()        隐藏 id="test" 的元素。

事件
        $('').click(function(){})                单击事件
        $('').dblclick(function(){})            双击事件
        $('').mouseenter(function(){})            鼠标输入enter 确定事件
        $('').mouseleave(function(){})            鼠标离开事件
        $('').mousedown(function(){})            鼠标按下事件
        $('').mouseup(function(){})                鼠标抬起事件
        $('').hover(function(){})                鼠标滑过事件
        $('').focus()                            获得焦点事件
        $('').blur()                            失去焦点事件

显示、隐藏
        hide()
        show()
        toggle()
        hide()

淡入淡出
        fadeIn()
        fadeOut()                隐藏
        fadeToggle()
        fadeTo('slow',0.2)        设置透明度

滑动
    slideDown()                向下滑动的效果
    slideUp()                向上滑动效果
    slideToggle()

动画
    animate()

停止动画
    stop() 滑动
    stop() 动画  带参数

HTML 获取 和属性

    text()
    html()
    val()       获取并且设置内容
    attr()        设置一个或多个属性值  获取

添加元素 、内容

    append() 选取元素的末尾添加内容  插入多个内容
    prepend()  选取元素开头添加内容

    after()                    之后
    before()    在选取元素之前添加元素
    after()     插入多个元素
    function afterText()
    {
        var txt1="<b>I </b>";                    // 使用 HTML 创建元素
        var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
        var txt3=document.createElement("big");  // 使用 DOM 创建元素
        txt3.innerHTML="jQuery!";
        $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
    }

移除元素、内容
    remove() 移除选取的元素
    empty()     移除选取的所有子元素
    remove()    过滤元素并移除

获取 和 设置 css

    addClass() 不同元素添加class属性
    addClass() 添加多个类
    removeClass  移除指定类
    toggleClass ()  添加删除类

css() 方法
    css() 返回属性
    css() 设置css属性
    css() 设置多个css属性

尺寸
    width()
    height() 返回指定元素的高和宽
    innerWidth()
    innertHeight()    返回指定元素的 innert widht/height 包含内边距
    outerWidht()
    outerHeight()  返回指定元素的 outer-widht、height 包含内边距和边框
    width() height()  document 和window
            $(document).ready(function(){
              $("button").click(function(){
                var txt="";
                txt+="文档 width/height: " + $(document).width();
                txt+="x" + $(document).height() + "
            ";
                txt+="窗口 width/height: " + $(window).width();
                txt+="x" + $(window).height();
                alert(txt);
              });
            });

    widht()
    height() 设置指定元素 widht 和 height

祖先
    parent()  返回祖先元素
    parnents()    返回索引祖先元素
    parentssUntil() 返回 介于两者自检的祖先元素
    $(document).ready(function(){
      $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
    });

后代
    children() 返回子元素 可以加 过滤
    find()   可以加过滤

同胞siblings
    siblings()  返回兄弟元素
    next()        返回下一个兄弟元素
    nextAll()    返回除了自己之外的所有元素
    nextUntil()     返回 两者之间的兄弟元素
                $(document).ready(function(){
                    $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
                });

jQuery 实例的更多相关文章

  1. jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined

    jQuery实例--jQuery实现联动下拉列表查询框   在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...

  2. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  3. jQuery使用(十一):jQuery实例遍历与索引

    each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...

  4. 基础 jQuery 实例

    基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...

  5. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  6. JSON和JSONP (含jQuery实例)(share)

    来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两个问 ...

  7. jQuery实例属性和方法

    jQuery.fn = jQuery.prototype = {  //添加实例属性和方法   jquery : 版本   constructor : 修正指向问题   init() : 初始化和参数 ...

  8. JSONP 含jquery 实例

     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...

  9. 【前端】:jQuery实例

    前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...

  10. :jQuery实例【DEMO】

    前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面:   二. ...

随机推荐

  1. Ubuntu下的LNMP环境

    保证联网的情况下,直接参照http://lnmp.org/install.html进行安装,以下花括号内为原文引用: { 1.使用putty或类似的SSH工具登陆VPS或服务器: 登陆后运行:scre ...

  2. Python读取图片尺寸、图片格式

    Python读取图片尺寸.图片格式 需要用到PIL模块,使用pip安装Pillow.Pillow是从PIL fork过来的Python 图片库. from PIL import Image im = ...

  3. Webservice之axis

    根据wsdl的url,使用axis1.4生成客户端,并且对webservice进行调用   1.到www.apache.org上去下载axis-bin-1_4.zip,如要关联源代码就把axis-sr ...

  4. python 任务调度模块sched

    类似于crontab的功能,可以实现定时定点执行任务; 将已经生成的任务放入队列中,获取到了执行可以实现任务调度功能; 如果将需求复杂化,加上优先级策略,并能取消已经加入队列中的任务,就需要使用pyt ...

  5. ajax跨域名

    跨域环境模拟: 修改host文件 三种解决的方案 1:ifram(display:none) 2:jsonp(注意是只是适合的是get请求) 生成一个带有src的script标签, 3:cros(后台 ...

  6. 利用python操作redis-cluster

    In [8]: def redis_cluster(): ...: redis_nodes = [{'host':'192.168.100.60','port':7000}, ...: {'host' ...

  7. 学JS的心路历程-JS支持面向对象?(一)

    昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...

  8. Python算法(一)冒泡排序

    3 5 1 6 2 1)第一次:找到这些数中最大的一个,并把它放最后. 3.5找到大的数放到第二个位置 5.1找到大的数放到第三个位置 5.6找到大的数放到第四个位置 2.6找到大的数放大第五个位置 ...

  9. java工程师基础笔试题(一)

    一.选择和填空  (不定项哦!) 1,如下是一份文件名为Test2.java的源文件,请问,编译该文件之后会生成几份字节码文件 class Test{ class Inner{} static cla ...

  10. 动态代理 JDK动态代理 CGLIB代理

    代理模式:代理类和被代理类实现共同的接口(或继承),代理类中存有指向被代理类的索引,实际执行时通过调用代理类的方法.实际执行的是被代理类的方法. 而AOP,是通过动态代理实现的. 一.简单来说: JD ...