前端 -＞ JavaScript 方法, jQuery 方法

欧皇小德子

已于 2022-02-16 16:49:59 修改

阅读量210

点赞数

分类专栏：前端文章标签： javascript 前端 jquery

于 2020-12-14 14:47:10 首次发布

本文链接：https://blog.csdn.net/rod0320/article/details/111034741

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

JavaScript

补充

//这种的函数,只在myFunction(),才会执行
//并不会在初始化的时候就赋值,函数不调用的时候不会执行函数的内容
var myFunction=function ()
{
    alert("Hello World!");
}

JavaScript arguments.callee.caller

arguments;当前的参数都存在这个隐式的参数中
callee:指向拥有这个arguments对象的函数。
caller:指向调用当前函数的函数的引用(调用这个函数的函数)。
=> 这里是指base在一个函数中使用了,指这个函数,不一定有对象调用就是.base

JavaScript window.ActiveXObject

(window.ActiveXObject) 什么意思?

判断浏览器是否支持ActiveX控件,实例化xmlhttprequest时使用

IE浏览器以前的版本可能不能正常实例化xmlhttprequest
浏览器支持ActiveX控件可以利用var xml=new ActiveXObject(“Microsoft.XMLHTTP”);
- 创建XMLHttpRequest 对象（IE7以前的版本）；
新的IE版本中可以利用 var xml=new ActiveXObject(“Msxml2.XMLHTTP”)
- 创建XMLHttpRequest对象;
IE7及非IE浏览器中可以利用var xml=new XMLHttpRequest()
- 创建XMLHttpRequest对象。

实际上不管怎么样都要支持ActiveX控件,有这个前提才能用ajax这些交互功能

JavaScript match()

定义和用法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

JavaScript window.location

用该属性获取页面 URL 地址：

window.location:就是当前的url

属性	描述
hash	从井号 (#) 开始的 URL（锚）
host	主机名和当前 URL 的端口号
hostname	当前 URL 的主机名
href	完整的 URL
pathname	当前 URL 的路径部分
port	当前 URL 的端口号
protocol	当前 URL 的协议
search	从问号 (?) 开始的 URL（查询部分）

JavaScript requestAnimationFrame:请求动画渲染

requestAnimationFrame:表示要渲染我自己定义的动画了

requestID = window.requestAnimationFrame(callback);

JavaScript timeStamp 事件属性

定义和用法

timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。
epoch 是一个事件参考点。在这里，它是客户机启动的时间。

<script>
function myFunction(e){
	alert(e.timeStamp);
}
</script>
</head>
<body>

<p onclick="myFunction(event)">点击这一段。弹出一个警告框，含有时间戳。</p>

</body>

在这里插入图片描述

JavaScript shift() 方法

定义和用法

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值(被删除的元素)。
注意：此方法改变数组的长度！
提示: 移除数组末尾的元素可以使用 pop() 方法。

<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	var delell = fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML= '删除后数组为：' +  fruits;
	document.getElementById("demo2").innerHTML= '删除的元素是：' +  delell;
}
</script>

在这里插入图片描述

JavaScript Math.pow() 方法

定义和用法

pow() 方法返回 x 的 y 次幂。

实例
返回 4 的 3 次幂 (4*4*4):
Math.pow(4,3);

输出结果：
64

JavaScript join() 方法

定义和用法

join() 方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。

实例
把数组中的所有元素转换为一个字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();

输出结果：
Banana,Orange,Apple,Mango

语法

array.join(separator)
- separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
- String 返回一个字符串。

JavaScript forEach() 方法

定义和用法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。

array.forEach(function(currentValue, index, arr), thisValue)

function(currentValue, index, arr):必需。数组中每个元素需要调用的函数。
thisValue:可选。传递给函数的值一般用 “this” 值。
- 如果这个参数为空， “undefined” 会传递给 “this” 值

JavaScript Math.min() 方法:相对的有max方法

定义和用法

min() 方法可返回指定的数字中带有最小值的数字。

实例
返回最小数值：
Math.min(5,10);

输出结果：
5

JavaScript For(x In xx) 循环

For(x In xx) 中与java不同,遍历的x不是每一个属性,而是索引,要用遍历的索引找对应的属性

实例
var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

JavaScript hasOwnProperty() 函数

hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性如果有，返回true，否则返回false。

该方法属于Object对象，由于所有的对象都"继承"了Object的对象实例
因此几乎所有的实例对象都可以使用该方法。

语法
object.hasOwnProperty( propertyName )

for (var i in nodes.childrens) {
     var node = null;
     if (nodes.childrens.hasOwnProperty(i)) {
       node = nodes.childrens[i];
     }
}

此方法不会检查对象的原型链中是否存在该属性，该属性只有是对象本身的一个成员才会返回true。

JavaScript Window.event

window.event代表着事件对象的状态。只有在事件发生时生效。如鼠标、键盘等事件被触发时这个对象才存在。

例如触发event对象的元素、鼠标的位置及状态、按下的键等等  
例如：获取光标位置 
window.event.clientX 
window.event.clientY

JavaScript Window open() 方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

在新浏览器窗口中打开 www.runoob.com ：

function open_win() {
    window.open("http://www.runoob.com");
}

JavaScript window.onload()

window.onload（）方法用于在网页加载完成后立即执行的操作，即当HTML文档加载完成后，立即执行某个方法。

window.onload（）通常用于<body>元素，在页面完全加载后（包括图片，css文件等等）执行脚本代码。

window.onload = function（）{
    Func1（）;
    Func2（）;
    Func3（）;
    .....
}

为什么使用window.onload（）？

因为JavaScript中的函数方法需要在HTML文档渲染完成后才可以使用
如果没有渲染完成，此时的DOM树是不完整的，因此在加载完html后调用onload()执行一些方法。
如:css  没有加载完html渲染个屁啊

JavaScript setTimeout()

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

语法格式可以是以下两种：

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)

实例
setTimeout("alert('对不起, 要你久候')", 3000 )

JavaScript:; 使得href="javascript:; "点击链接后不做任何事情

都是执行一个空事件。

<a href="####"></a>
<a href="javascript:;"></a>
<a href="javascript:void(0)"></a>

JavaScript call()、apply()、bind() 的用法(转载)

转载:https://www.runoob.com/w3cnote/js-call-apply-bind.html

JavaScript arguments.callee的用法

arguments：
含义：该对象代表正在执行的函数和调用它的函数的参数。
callee：指向当前函数的引用
arguments.callee代表函数名，多用于递归调用

例子:递归调用自己本身

(function(num){
      if(num<=1){
          return 1;
      }else{
          return num*arguments.callee(num-1);
      }
 });

配合call使用:arguments.callee也是只想自己本身的函数

arguments.callee.call(this, x1, x2);

JavaScript require() 判断命名空间是否存在

sfs.require(name)

	 /**
    *判断命名空间是否存在
    *@method require
    *@param name {String} 命名空间名称
    */
    require: function (name) {
        try {
            if (name == null || name == "")
                return true;
            var namespace = name.split('.');
            if (namespace[0] != "sfs")
                throw "必须在sfs命名空间内";
            var cur, gobal = sfs;
            for (var i = 1; i < namespace.length; i++) {
                cur = namespace[i];
                if (gobal[cur] == undefined || gobal[cur] == null) {
                    return false;
                }
                gobal = gobal[cur];
            }
            return true;
        } catch (e) {
            return false;
        }
    },

JavaScript 构造函数

1.声明式函数定义： function 函数名（）{}；

这种定义方式，会将函数声明提升到该函数所在作用域的最开头
也是就无论你在这个函数的最小作用域的那儿使用这种方式声明的函数
在这个作用域内，你都可以调用这个函数为你所用。

2.函数表达式：let fun = function(){};

此方式定义的函数，只能在该作用域中，这段赋值代码执行之后才能通过fun（）调用函数
否则，由于变量声明提升，fun === undefined。

3.new Function 形式：var fun1 = new Function (arg1 ,… )；

Function构造函数所有的参数都是字符串类型。
除了最后一个参数, 其余的参数都作为生成函数的参数即形参。
这里可以没有参数。最后一个参数, 表示的是要创建函数的函数

常用的构造函数： 

　　　　1.    var arr = [];为var arr = new Array();的语法糖。

　　　　2.    var obj = {};为 var obj = new Object(); 的语法糖

　　　　3.　var  date = new Date();

JavaScript this笔记

调用this只会在函数中指向他的上一级
function x(){
	adc: {
	a: this
	b: function(this)
	}	
}
x();

a的this->a的this会去找外层的函数->找到x()->对应的this就是全局的this
b的this->b的this会去找外层的函数->找到b()->对应的this就是adc对象所在的this

还有一种情况:

let obj1={
    a:222
    fn:function(){
        alert(this.a);
    }
};
let obj2={
    a:111,
    fn:function(){
        alert(this.a);
    }
}
//这里用的是obj2.fn->不是obj2.fn()
//所以是没有执行函数的->很明显这句话是赋值不会存在调用函数的情况
obj1.fn=obj2.fn;
//obj1中本来没有函数fn()->赋值得到的->现在就是b中有了一个fn()函数->b现在应该长这样
//let obj1={
//    a:222
//    fn:function(){
//        alert(this.a);
//    }
//};
//所以obj1.fn();->this找最近的函数就是fn()->fn()找最近的对象就是obj1->结果this就是obj1的范围了
obj1.fn();//222

this总结:

this的范围就是找最近的函数->最近的函数所在的对象就是this的范围
如
函数x()最近的对象在整个windows中->this就是windows的范围
函数b()最近的对象在adc中->this就是adc的范围

JavaScript define

('自定义的名字' ,['sa各种依赖,各种包'],函数)

define('自定义的名字' ,['sa各种依赖,各种包'],function (函数) {
		//
});

define('sample3' ,['sample','sample1'],function (sample,sample1) {
  var sample4 = require('sample4');
  return function(){
    alert(sample.name+':'+sample.sayhell());
  } 
});

JavaScript stopPropagation()

      //下拉显示事件,proxy
      $location_import.on('click', '.drop_ti', $.proxy(function (e) {
        //阻止 click 事件冒泡到父元素：阻止任何父事件处理程序被执行。
        //比如:一个div标签中有一个span标签:我设置了点击div跳出弹窗,点span也跳出弹窗
        //就会出现一个问题,点div的位置跳出div弹窗,点span的位置,跳出span弹窗后还要跳出div的弹窗
        //因为span也在div中,点了span也相当于点了div,这个方法stopPropagation就是防止这种事件
        e.stopPropagation();

JavaScript replace() 方法

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

当第一个 "Microsoft" 被找到，它就被替换为 "Runoob"：

var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");

JavaScript constructor()==initialize()

JavaScript charAt() 方法

charAt() 方法可返回指定位置的字符。

返回字符串中的第三个字符:

var str = "HELLO WORLD";
var n = str.charAt(2)

jQuery

jQuery是一个库,就是一个超大的类
是要是$(x)的样式的,就可以使用这个类中的所有方法,是所有方法
就是有些本来你不可以用的,但是你可以不用,但是你要有
例如:$(人)  $(狗)

jQuery 效果 - slideToggle() 方法

定义和用法

slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

本质是修改的style的 => display 属性

display 属性

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。

jQuery offset() 方法

offset() 方法设置或返回被选元素相对于文档的偏移坐标。

当用于返回偏移时：
- 该方法返回第一个匹配元素的偏移坐标。
- 它返回一个带有两个属性（以像素为单位的 top顶和 left左位置）的对象。

<script>
$(document).ready(function(){
	$("button").click(function(){
		var x=$("p").offset();
		alert("上: " + x.top + " 左: " + x.left);
	});
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<button>返回p元素的偏移坐标</button>

在这里插入图片描述

jQuery对象中 “冒号” 详解

冒号可以理解为 “匹配” 或 “选取”的意思。

$(":button") 表示匹配所有的按钮。
$("input:checked")表示匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。
:在css中代表伪选择符，jQuery里的选择器很多地方都使用css中的表示方法

jQuery 对话框部件（`Dialog Widget`）

用法

描述：在一个交互覆盖层中打开内容。
对话框是一个悬浮窗口，包括一个标题栏和一个内容区域。
对话框窗口可以移动，重新调整大小，默认情况下通过 ‘x’ 图标关闭。

<body>
 
<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>

在这里插入图片描述

jQuery `change()` 方法

实例
当 <input> 字段改变时警报文本：

$("input").change(function(){
    alert("文本已被修改");
});

定义和用法

当元素的值改变时发生 change 事件（仅适用于表单字段）。

jQuery `next()` 方法

定义和用法

next() 方法返回被选元素的后一个同级元素。
同级元素是共享相同父元素的元素。

实例
返回带有类名 "start" 的每个 <li> 元素的后一个同级元素：

$(document).ready(function(){
$("li.start").next().css({"color":"red","border":"2px solid red"});
});

filter 可选。规定缩小搜索后一个同级元素范围的选择器表达式。

jQuery `siblings()` 方法

定义和用法

siblings() 方法返回被选元素的所有同级元素。
同级元素是共享相同父元素的元素。

实例
返回带有类名 "start" 的每个 <li> 元素的所有同级元素：

$(document).ready(function(){
$("li.start").siblings();
});

filter 可选。规定缩小搜索同级元素范围的选择器表达式。

jQuery keydown() 方法

定义和用法
与 keydown 事件相关的事件顺序：

keydown - 键按下的过程
keypress - 键被按下
keyup - 键被松开

当键盘键被按下时发生 keydown 事件。
keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

提示：请使用 event.which 属性来返回哪个键盘键被按下。

实例
当键盘键被按下时，设置 <input> 字段的背景颜色：

<script>
$(document).ready(function(){
  $("input").keydown(function(){
    $("input").css("background-color","yellow");
  });
  $("input").keyup(function(){
    $("input").css("background-color","pink");
  });
});
</script>

jQuery empty() 方法

定义和用法

empty() 方法移除被选元素的所有子节点和内容。
注意：该方法不会移除元素本身，或它的属性。

实例
移除所有 <div> 元素的内容：

$("button").click(function(){
    $("div").empty();
});

jQuery trigger() 方法

实例
触发 <input> 元素的 select 事件：

<script>
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本已选中!");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});
</script>
</head>
<body>

<input type="text" value="Hello World">
<br><br>
<button>触发输入框的 select 事件</button>

</body>

在这里插入图片描述

定义和用法
trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。

jQuery toggleClass() 方法

实例
对添加和移除所有 <p> 元素的 “main” 类进行切换：

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").toggleClass("main");
	});
});
</script>
<style>
.main{
	font-size:120%;
	color:red;
}
</style>
</head>
<body>

<button>转换P元素的"main"类</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p><b>注意:</b>单击按钮查看多次切换的效果。</p>

在这里插入图片描述

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已存在则删除。这就是所谓的切换效果。

jQuery attr() 方法

attr() 方法设置或返回被选元素的属性和值。

设置图像的 width 属性：

$("button").click(function(){
    $("img").attr("width","500");
});

jQuery each() 方法

each() 方法为每个匹配元素规定要运行的函数。
也就是foreach遍历:只是遍历是是需要找的所有元素:
例如$('div').each(function(){})
所有的div都要一个一个的去执行each()中的函数
$('#div').css(xx):内部就是用了each将所有的div都加上了style;

输出每个 <li> 元素的文本：

$("button").click(function(){
    $("li").each(function(){
        alert($(this).text())
    });
});

jQuery event.currentTarget 属性

        //event.currentTarget 通常等于 this：,他就是this中所有的元素
        //且e.currentTarget===this;//true
        //是用JQuery的,是获取到html的所有元素(标签)
        var $target = $(e.currentTarget);

jQuery then在ajax中的使用

不用then

   $.ajax({
       url:'https://autumnfish.cn/api/hero/simple',
       type:'get',
       data:{
           name:'提莫'
       },
       success:function(res){
           if(res){
                $.ajax({
                    url:'https://autumnfish.cn/api/hero/info',
                    type:'get',
                    data:{
                        name:'提莫'
                    },
                    success:function(res){
                        if(res.name){
                            $.ajax({
                                url:'https://autumnfish.cn/api/hero/detail',
                                type:"get",
                                data:{
                                    name:'提莫'
                                },
                                success:function(res){

                                },
                                error:function(err){

                                }
                            })
                        }
                    },
                    error:function(err){

                    }
                })
           }
       },
       error:function(err){
           console.log(err)
       }
   })

以上结构无逻辑问题，但是结果嵌套比较深，难以维护。

使用then

 	   $.ajax({       
            url:'https://autumnfish.cn/api/hero/simple',
            type:'get',
            data:{ name:'提莫'}
       })
       .then(
           function (res) {
           return $.ajax({
               url: 'https://autumnfish.cn/api/hero/info',
               type: 'get',
               data: {
                   name: '提莫'
               }})

           },
           function(err){

           }
       )
       .then(
           function (res) {
           return $.ajax({
               url: 'https://autumnfish.cn/api/hero/detail',
               type: "get",
               data: {
                   name: '提莫'
               },
           })

           },function(err){

           }
        )
       .then(
           function(res){

            console.log('最后一个请求',res)

           },
           function(err){
               
           }
       )

return $.ajax是继续将发挥的数据作为下一个then的参数使用

jQuery.extend()方法

1.jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

语法
$.extend( target [, object1 ] [, objectN ] )

$(function () { 
    var object1 = {apple: 0,banana: {weight: 52, price: 100},cherry: 97};
    var object2 = {banana: {price: 200}, durian: 100};
    
    /* object2 合并到 object1 中 */
    $.extend(object1, object2);

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options);

结果：
settings == { validate: true, limit: 5, name: "bar" }

2.为jQuery类添加类方法，可以理解为添加静态方法。

如：

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});

jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5

注意:局限性:
我用的是$.xx() 不是$('#xx').xx()

jQuery.extend=$.extend:只能以$.使用方法
不能用实例化的对象使用extend方法:$('选择id').xx()

有另一个方式解决这种扩展的局限性:
jQuery.fn.extend(object);

jQuery.fn.extend(object)

jQuery.fn.extend = jQuery.prototype.extend

对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。
jQuery类的实例可以使用这个“成员函数”。$('id选择器').xx()--xx是扩展的方法;

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({          
    alertWhileClick:function() {            
			          $(this).click(function(){                 
			                 alert($(this).val());           
			        });           
     }       
});      
 
$("#input1").alertWhileClick(); // 页面上为：

$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展
每次被点击时它会先弹出目前编辑里的内容。

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，
如jQuery.init()，$.xx()
而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上
所以实例化一个jQuery对象的时候，它就具有了这些方法，这是很重要的，在jQuery.js中到处体现这一点

jQuery.fn.extend(object) 插件机制的格式

一个js文件:格式是这样的: ;()(); 是不是很奇怪(;是用来减少一些不必要是麻烦的)

（function( $, window, document, undefined ){}）{
 
      //...code
 
}(jquery,window,document)

1.立即执行函数：(function(){})()

这是一个自调函数，函数定义好之后自动执行。
（function(){}）表示一个匿名函数，而后面紧跟着的（）表示立即调用此函数。
而且（）也是向函数传递参数的地方。

比如：

;(function(){
     alert("立即执行")；
})();
 
(function(parameter){
    alert(parameter);
})("立即执行函数传递参数");

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

返回 <ul> 的直接子元素,改变子元素css样式：

<script>
$(document).ready(function(){
	$("ul").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="descendants">body (曾祖先节点)
	
<div style="width:500px;">div (祖先节点)
	<ul>ul (直接父节点)  
		<li>li (子节点)
			<span>span (孙节点)</span>
		</li>
	</ul>   
</div>

在这里插入图片描述

jQuery off() 方法

移除所有 <p> 元素上的 click 事件：

$("button").click(function(){
    $("p").off("click");
});

jQuery $.proxy() 方法

方式一:$.proxy(对象,“对象中的属性”)

定义和用法

$.proxy 方法接受一个已有的函数，并返回一个带特定上下文的新的函数。

该方法通常用于向上下文指向不同对象的元素添加事件。

官方实例:


强制执行 objPerson 内的 "test" 函数的上下文：

$("button").click($.proxy(objPerson,"test"));

var objPerson = {
    name: "John Doe",
    age: 32,
    test: function(){
      $("p").after("Name: " + this.name + "<br> Age: " + this.age);
    }

官方结果:

点击button=>执行objPerson的test函数=><p>中执行after
=>this.name就是John Doe
=>this.name就是32

我自己的理解:
例子一样:

$("button").click($.proxy(objPerson,"test"));

var objPerson = {
    name: "John Doe",
    age: 32,
    test: function(){
      $("p").after("Name: " + this.name + "<br> Age: " + this.age);
    }

查看部分源码:

proxy: function( fn, context ) {
		var tmp, args, proxy;

		if ( typeof context === "string" ) {
			tmp = fn[ context ];
			context = fn;
			fn = tmp;
		}
		if ( !jQuery.isFunction( fn ) ) {
			return undefined;
		}

第一个参数objPerson,就是fn(这里是一个对象)
第二个参数"test",就是context 

源码得知:
1.如果context是字符串就在objPerson对象中(源码中用数组索引查找)
2.找到名字是test的属性=>可以是name对应一个值,也可以是一个函数,就是找key
3.交换=>原来的第一个参数objPerson实际上变成了objPerson.test
4.第二个参数test实际上已经变成了objPerson这个对象
5.如果fn不是一个函数,就直接结束return undefined
6.本来这个fn是一个对象来自,他不是函数,但是第一个if交换变成了函数
7.如果都不是函数,那么也就没必要搞这个点击事件了

原来的样子=> $("button").click($.proxy(objPerson,"test"));
源码后的样子=> $("button").click($.proxy(objPerson.test,objPerson));
最后第一个参数都会变成函数的,就算是对象,走源码后也变成了函数

结论:

最后执行的就是objPerson.test的这个函数
作用域就是objPerson本身,可以使用objPerson中的所有东西(this)

方式二:$.proxy(函数,“对象中的属性”)
例子:

$.proxy(function (e) {}

源码:

proxy: function( fn, context ) {
		var tmp, args, proxy;

		if ( typeof context === "string" ) {
			tmp = fn[ context ];
			context = fn;
			fn = tmp;
		}

		// 译文：快速检查确定目标是否可调用，在规范中
		// 译文：这会抛出一个类型错误，但是我们只返回undefined。
		if ( !jQuery.isFunction( fn ) ) {
			return undefined;
		}

		// 译文：模拟的结合
		//这是源码自己执行的,我们只是传入了fn和context,这里不用我们管
		args = slice.call( arguments, 2 );
		proxy = function() {
		//apply是替换this的,其他的都没有变化,使用apply变化的就是this的内容
		//第一个参数就是要替换的内容,替换了以后,数据从这个里面调用
		//第二个参数,就是调用fn的时候的参数,因为不是每个fn都是fn()无参的,有些是fn(e)这样的
		//这里fn(e),就是第二个参数传递的,但是我们可以查看到,这里都是源码帮我们做的,是固定的内容,不用管
			return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
		};

		// 译文：将唯一处理程序的guid设置为与原始处理程序相同的guid，以便可以删除它
		//这也是源码帮我们干的,我们只用看我们传进来的参数有什么变化,最后返回有什么变化就行了
		proxy.guid = fn.guid = fn.guid || jQuery.guid++;
		
		//返回proxy,就是调用了proxy(),就是把fn函数调用,调用我们传入的函数
		//(参数是函数,不调用是不会执行函数的),执行fn的时候,使用的范围是指定的就是我们传进来的context
		return proxy;
	}

jQuery remove() 方法

remove() 方法移除被选元素，包括所有的文本和子节点。

移除所有的 <p> 元素：

$("button").click(function(){
    $("p").remove();
});

jQuery removeAttr() 方法

removeAttr() 方法从被选元素移除一个或多个属性。

从所有的 <p> 元素移除样式属性：

$("button").click(function(){
    $("p").removeAttr("style");
});

jQuery removeData() 方法

removeData() 方法移除之前通过 data() 方法设置的数据。

从 <div> 元素中移除之前附加的数据：

$("#btn2").click(function(){
$("div").removeData("greeting");
alert("Greeting is: " + $("div").data("greeting"));
});

jQuery removeClass() 方法

只是移除了class的属性,标签是没有移除的

实例
从所有的 <p> 元素移除 "intro" 类：

$("button").click(function(){
    $("p").removeClass("intro");
});

jQuery show() 方法

show() 方法显示隐藏的被选元素。

显示所有隐藏的 <p> 元素：

$("button").click(function(){
    $("p").show();
});

jQuery 文档操作 - text() 方法

text() 方法方法设置或返回被选元素的文本内容。
$(selector).text()

设置所有 <p> 元素的内容：

$(".btn1").click(function(){
  $("p").text("Hello <b>world</b>!");
});

jQuery.data()方法

在 div 元素上先存储再获取数据

语法
$.data( element, key, value )

element		Element类型 要存储数据的DOM对象
key			可选。String类型 指定的键名字符串。
value		可选。 Object类型 需要存储的任意类型的数据。

<div>
    存储的值为
    <span></span>
    和
    <span></span>
</div>
<script>
$(function () { 
    var div = $( "div" )[ 0 ];
    jQuery.data( div, "test", {
        first: 16,
        last: "pizza!"
    });
    $( "span:first" ).text( jQuery.data( div, "test" ).first );
    $( "span:last" ).text( jQuery.data( div, "test" ).last );
})
</script>

jQuery $xx.find(’.aaa’)[0]

 $xx.find('.drop_list:visible')[0]
 这个表示的就是这个位置的元素(<a class='aaa'></a>)
 
 $xx.find('.aaa')
 这个表示的是以恶搞jQuery对象,不是单纯的html语句,这个还可以->
  $xx.find('.aaa').val().text();使用很多方法,他有很多属性

欧皇小德子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端 -＞ JavaScript 方法, jQuery 方法

文章目录javascript:; 使得href="javascript:; "点击链接后不做任何事情javascript:; 使得href="javascript:; "点击链接后不做任何事情都是执行一个空事件。<a href="####"></a><a href="javascript:;"></a><a href="javascript:void(0)"></a>...
复制链接

扫一扫