change.js文件的内容
对象函数关键字：fn
jQuery.fn.change = function () {
    this.css({"background": "red"});//这里的this是当前jQuery对象函数，不是DOM
}

jQuery.fn.onchange = function (c1, c2) {
    //  this这里的this不是单个对象了而是一个数组了，会导致所有的li都发生改变而不是单个的
    //if(this.hasClass(c1)){
    //    this.removeClass(c1).addClass(c2);
    //}else{
    //    this.removeClass(c2).addClass(c1);
    //}
//解决方法：
//    this表示当前的jQuery对象
写法1：
    this.each(function () {
        //    this表示当前的Dom对象
        var $elem = $(this);
        if ($elem.hasClass(c1)) {
            $elem.removeClass(c1).addClass(c2);
        }else {
            $elem.removeClass(c2).addClass(c1);
        }
    });

}
写法2：
jQuery.fn.onchange = function (c1, c2) {
  var $obj = this.each(function () {
        //    this表示当前的Dom对象
        var $elem = $(this);
        if ($elem.hasClass(c1)) {
            $elem.removeClass(c1).addClass(c2);
        }else {
            $elem.removeClass(c2).addClass(c1);
        }
    });
return:$obj;
}
写法3：
jQuery.fn.onchange = function (c1, c2) {
return this.each(function(){
    var $elem = $(this);
    if ($elem.hasClass(c1)) {
        $elem.removeClass(c1).addClass(c2);
    } else {
        $elem.removeClass(c2).addClass(c1);
    }
});
}

实例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/change.js"></script>
    <script>
        $(document).ready(function(){
            $("#btnClick").click(function(){
                $(".demo").change();//对象函数调用
            });

            $("#onchange").click(function () {
               $("li").onchange("bold","italic");
            });

        });
    </script>
    <style>
        .demo{
            width: 100px;
            height:100px;
            border: 2px solid yellow;
        }
        li{
            list-style: none;
            margin-top: 20px;
            border: 1px solid #b3b3b3;
            padding: 5px;
            width: 150px;
        }
        .bold{
            font-weight: bold;
        }
        .italic{
            font-style: italic;
        }
        #onchange{
            width: 80px;
            height: 30px;
            border: 1px solid #00B83F;
            color: #fff;
            background-color: #00B83F;
        }

    </style>
</head>
<body>
<div class="demo"></div>
<input type="button" id="btnClick" value="点击改变背景颜色"/>

<hr><hr><hr><hr>
<ul class="box">
    <li class="bold">金刚葫芦娃</li>
    <li class="italic">这个杀手不太冷</li>
    <li class="bold">行尸走肉</li>
    <li class="italic">捉妖记</li>
    <li class="italic">红楼梦</li>
    <li class="bold">三国演义</li>

</ul>
<input type="button" value="点击切换" id="onchange"/>
</body>
</html>
注：首先给字段添加上需要的类，并定义好需要的样式，js只需要做一件事：就是点击按钮时切换相应的样式，添加或者删除类即可。
需要注意的是需挨个遍历，很有可能出现js把当前的jQuery对象当成数组而不是对象时就会出现问题

ajax对象方法的使用的更多相关文章

  1. Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法

    1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...

  2. Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法、编程步骤、缓存问题、乱码问题

    目录 1 什么是ajax 2 获取ajax对象 3 ajax对象的属性和方法 4 使用ajax的编程步骤 5 缓存问题 6 乱码问题 1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是 ...

  3. 创建ajax对象并兼容多个浏览器方法简单记录

    这篇文章主要介绍了如何创建ajax对象并兼容多个浏览器,需要的朋友可以参考下<script> function createAjax(){ var request=false; //win ...

  4. Ajax详解及其案例分析------如何获得Ajax对象，使用Ajax对象发送GET和POST请求，校验用户名，POST和GET请求时的乱码处理，实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

  5. 2-jQuery - AJAX load() 方法【进阶篇】

    第一篇的AJAX load() 方法过于简单,补充一下,完整的. 格式 $(selector).load(URL,data,callback); 源码 <!DOCTYPE html> &l ...

  6. Ajax请求（二）--JQuery的Ajax请求方法

    JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...

  7. Ajax的方法和使用代码

    //1.创建Ajax对象,已经封装好的函数: function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ re ...

  8. 两种ajax的方法

    两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...

  9. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

随机推荐

  1. Oracle根据【日期】组，其他条件根据PIVOT行转列。使每个日期条件关联的其他数据只有一行。

    select OPER_TIME, MICROPAY, REFUND from ( select trunc(oper_time) oper_time, class_name, sum(total_f ...

  2. k64 datasheet学习笔记3---Chip Configuration之Analog

    1.前言 本文主要讲述K64芯片配置,关于模拟部分的内容,主要包括:ADC, CMP, DAC, VREF 2.16bit SAR ADC 从上图可以看出ADC主要挂在外设总线0上,由于ADC的输入引 ...

  3. 设计模式C++学习笔记之十八（Visitor访问者模式）

      18.1.解释 概念:表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作. main(),客户 IVisitor,访问者接口 CBaseVis ...

  4. python类的使用

    下面是一个员工类的创建及类对象的创建实例: #!/usr/bin/python # -*- coding: UTF-8 -*-class Employee: empCount = 0 def __in ...

  5. python迭代器的说明

    data = [randint(0,20) for _ in xrange(30)]表示30个随机生成的0-20随机数其中for _ in xrange(30)表示循环30次. from random ...

  6. （常用）os模块

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname")  改变当前脚本工作目录:相当于shell下cdos.curdi ...

  7. linux ln 命令使用参数详解(ln -s 软链接)

    ln是linux中一个非常重要的命令,它的功能是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下都放一个必须相同的文件,我们只要在 ...

  8. CentOS 7安装Python3.5

    CentOS 7下安装Python3.5 •安装python3.5可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-deve ...

  9. [HTTP] 基本认证的工作流程

    HTTP的基本认证涉及两个字段,一个是请求字段 Authorization: Authorization: Basic xxx 一个是响应字段 WWW-Authenticate WWW-Authent ...

  10. Spring 5 WebFlux

    作者: 一字马胡 转载标志 [2017-11-26] 更新日志 日期 更新内容 备注 2017-11-26 新建文章 Spring 5 WebFlux demo Reactor Spring 5的一大 ...