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. SpringSecurity项目中如何在多个模块中配置认证信息

    ⒈在SpringSecurity项目中创建AuthorizeConfigProvider接口用于配置认证信息 package cn.coreqi.ssoserver.authorize; import ...

  2. Delphi 实现自动更新

    Delphi 通用程序自动更新升级:http://www.delphitop.com/html/wangluo/2968.html https://www.cnblogs.com/hnxxcxg/p/ ...

  3. vue后台项目记录

    1.当我们用axios进行接口访问时,必须同时使用Qs,否则后端接收不到所传的数据! npm 安装qs,然后引用 import Qs from 'qs' // 创建axios实例 const serv ...

  4. sed 随笔

    1)sed 功能说明 sed     全称    stream editor    基本功能    增删改查    过滤    取行 语法格式: sed  [options]  [sed-comman ...

  5. 遇到一个json解码失败的问题

    今日批量导入游戏, 从别人接口拉去的字符串json_decode总是失败, 但是把log里面记录的解码失败的字符串copy出来单独解析,却可以成功. 排除了是字符编码的问题后, 还是不行, 百思不得其 ...

  6. 统一门户与业务系统的sso整合技术方案（单点登录）

    一.单点登录(SSO,Single Sign On)整合目前计划接入统一门户的所有业务系统均为基于JavaEE技术的B/S架构系统.由于统一门户的单点登录技术选用的是JA-SIG组织开发的Cas Se ...

  7. <杂记>该换个背景图了

    ..当然我刚开始也是懵逼的,我有发现这里可以写css,但是还是缺个图片地址,想了想,这不是还有个相册功能吗. 那应该就是把自己要换的图片上传到相册吧. 右击图片,选择检查元素找到图片的src 如:ht ...

  8. Multisim 经典学习教程Step by Step

    Tracy Shields编著 ftp://ftp.ni.com/pub/branches/china/Practical%20teaching%20Ideas%20for%20Multisim%20 ...

  9. 切换目录查询目录 tcp

    服务器 import socket import os import json sk = socket.socket() sk.bind(('127.0.0.1',8080)) sk.listen() ...

  10. Ex3_2 最近点对

    原文链接http://blog.csdn.net/zyang008/article/details/6175587 分治法 1)算法描述:已知集合S中有n个点,分治法的思想就是将S进行拆分,分为2部分 ...