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. 微信支付-H5网页支付开通流程

    简介  H5 支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付.主要用于触屏版的手机浏览器请求微信支付的场景.可以方便的从外 ...

  2. mysql5.7 版本中 timestamp 不能为零日期 以及sql_mode合理设置

    ---恢复内容开始--- 摘要: mysql5.7版本相比较之前的版本有很多的特性的增加以及默认配置的改变,在使用中难免会遇到与之前的使用习惯或者项目需求不符的情况.就需要调整相应的变量的值,比如sq ...

  3. 用Vue实现状态列表的操作涵盖所有的知识点

    用Vue实现状态列表的操作涵盖所有的知识点

  4. 设计模式C++学习笔记之十一（Bridge桥梁模式）

      桥梁模式,将抽象部分与它的实现部分分离,使它们都可以独立地变化.实现分离的办法就是增加一个类, 11.1.解释 main(),客户 IProduct,产品接口 CHouse,房子 CIPod,ip ...

  5. 洛谷：P3281 [SCOI2013]数数 （优秀的解法）

    刷了这么久的数位 dp ,照样被这题虐,还从早上虐到晚上,对自己无语...(机房里又是只有我一个人,寂寞.) 题目:洛谷P3281 [SCOI2013]数数 题目描述 Fish 是一条生活在海里的鱼, ...

  6. 从MySQL中导入数据到MongoDB中

    从sql中导出需要的数据为csv格式的数据 select field1,field2,...,fieldn from TABLE into outfile '/test.csv' fields ter ...

  7. appium常用方法

    1.输入中文 在capabilities中增加两项设置: capabilities.setCapability("unicodeKeyboard", "True" ...

  8. reportNG定制化之失败截图及日志

    先从github上拉下 reportNg的源代码 reportng  拉下源码后我们使用IDEA进行导入 1.reportng.properties 增加部分类表项 这里我们直接在末尾添加 log=L ...

  9. Day7--------------IP地址配置

    ifconfig 查看网卡 ifconfig eth0 查看网卡eth0 配置网络地址: 临时配置: ifconfig eth0 192.168.10.100 netmask 255.255.255. ...

  10. 17)django-模板的继承与导入

    情况1:通常写页面都有个模板用来框定头部LOGO页面,左侧导航菜单,只有右部的内容不同.如果不使用模板就大量重复工作. 特别如果头部或者左侧导航需要修改或者添加,所有页面都需要修改.django 通过 ...