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. E - Emptying the Baltic Kattis - emptyingbaltic （dijkstra堆优化）

    题目链接: E - Emptying the Baltic Kattis - emptyingbaltic 题目大意:n*m的地图, 每个格子有一个海拔高度, 当海拔<0的时候有水. 现在在(x ...

  2. mysql 8.0 ~ innodb与变量优化

    一  innodb的优化  1 已完全不支持myisam引擎  2 将自增主键的计数器持久化到redo log中.每次计数器发生改变,都会将其写入到redo log中.如果数据库发生重启,InnoDB ...

  3. python第二天，list和tuple

    概念:list是集合,且是可变集合,tuple是元组集合,不可变集合. 1.Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 主要知识点:初始化 ...

  4. Tesseract识别图片提取文字&字库训练

    文中测试了3.0和4.0两个版本.发现3.0识别效率不准确,需要训练词库.4.0识别效率就比较高了,而且支持结果生成pdf.txt等格式.所以推荐使用4.0版本. 这个工具可以用在爬虫的时候获取验证码 ...

  5. *445. Add Two Numbers II

    1. 原始题目 You are given two non-empty linked lists representing two non-negative integers. The most si ...

  6. Linux登录失败：Too many logins for 'username'.

    cat /etc/security/limits.conf #<domain> <type> <item> <value> * - maxlogins ...

  7. 利用iscroll实现上拉加载下拉刷新

    1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...

  8. 【转】C++中substr的用法

    substr有2种用法:假设:string s = "0123456789"; string sub1 = s.substr(5); //只有一个数字5表示从下标为5开始一直到结尾 ...

  9. Java 处理 XML

    DOM 优缺点:实现 W3C 标准,有多种编程语言支持这种解析方式,并且这种方法本身操作上简单快捷,十分易于初学者掌握.其处理方式是将 XML 整个作为类似树结构的方式读入内存中以便操作及解析,因此支 ...

  10. web@css盒模型详解

    Margin(外边距) - 清除边框外的区域,外边距是透明的./*上 右 下 左*/ 上 左右 下 /*上下 左右*/ 四方 /Border(边框) - 围绕在内边距和内容外的边框.      可以用 ...