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. mysql 案例 ~ mysql常见日志错误

    一 简介: mysql note级别日志汇总二错误系列  1 Aborted connection    1 [Note] Aborted connection 61 to db: 'unconnec ...

  2. java多线程面试题小结

    http://www.importnew.com/12773.html http://www.cnblogs.com/fingerboy/p/5352880.html https://blog.csd ...

  3. 使用grep排除空行和注释行

    grep的排除选项为 -v排除空行的命令是:grep -v '^$' filename排除以#注释的命令是:grep -v '^#' filename 结合起来就是,既排除空行又排除注释行的命令gre ...

  4. Python 面向对象【2】

    组合 [适合没干系的横向类,比如池塘,乌龟,鱼]  把类的实例化放到新类里面     属性名和方法名相同,属性会覆盖掉方法   绑定 方法需要实例才能被调用!! 这种限制即绑定 用self接受绑定   ...

  5. js变量的解构赋值

    今天在学习时看到几段代码,让我感叹JS的灵活,特此一记: let stateObj = {a:1,b:3}; let newObj = {b:13,c:4} ; stateObj = {...stat ...

  6. 用ethtool 命令解决Linux 网卡丢包【转】

    转自:https://blog.csdn.net/chengxuyuanyonghu/article/details/73739516 生产中有一台Linux设备并发比较大,droped包比较多,尤其 ...

  7. Linux内存带宽的一些测试笔记【转】

    转自:https://blog.csdn.net/subfate/article/details/40343497 版权声明:本文为迟思堂主人李迟原创文章,版权所有.可随便任意使用(包括学习研究商用) ...

  8. 题解-AtCoder-agc003F Fraction of Fractal（非矩阵快速幂解法）

    Problem AtCoder-agc003F 题意:给出\(n\)行\(m\)列的01矩阵,一开始所有 \(1\) 连通,称此为\(1\)级分形,定义\(i\)级分形为\(i-1\)级分形中每个标示 ...

  9. java.sql.SQLException: Column count doesn't match value count at row 1 解决办法

    ♦ 所存储的数据与数据库表的字段类型定义不匹配. ♦ 解决办法: 检查dao层(数据访问层)的sql语句中赋值的参数是否与数据库中的字段个数.字段类型一致.

  10. hibernate框架学习第六天：QBC、分页查询、投影、数据加载策略、二级缓存

    QBC查询 1.简单查询 Criteria c = s.createCriteria(TeacherModel.class); 2.获取查询结果 多条:list 单挑:uniqueResult 3.分 ...