1、首先建立一个静态页面命名为jshtml,标题为“JS函数调用的方法”。
2、在jshtml的页面<head></head>之间加入 <script></script>。
3、在 <script></script>中加入一个js函数 toalert，当点击一个button的时候d出一个alert。
4、在body之中加入一个button，并且添加一个onclick点击事件。
5、在onclick的事件中，加入js的toalert函数名，加载onclick事件的双引号中即可。
6、为了让button看的更明显一些，可以设置一下button的样式，设置宽为100px，高为30px，字的颜色为红色。
7、用浏览器打开jshtml，如果点击按钮能够d出“JS函数调用的方法”，说明调用js函数是成功的。
一、阻止事件的默认行为： epreventDefault()eg:
function jqFun(){ //点击的时候a的class含有‘cur’时候阻止默认行为
$(‘nav a’)on(‘click’,function(e){
if($(this)hasClass(‘cur)){
epreventDefault();
}
})
}
return false 等效于同时调用epreventDefault()和estopPropagation() 。（即return false 除了阻止事件的默认行为之外 还会阻止事件冒泡）
二、query 中 length 和size异同点
size() 方法返回被jquery选择器匹配的元素的数量。 $(selector)size()
length 属性包含query对象中的数目 $(selector)length
size()是方法，length是属性
如果只是获取元素的个数，两者的效果一样，但是如果获取的是字符串的长度就只能用length
size()在18版本以后被length取代了，因为length不需要返回一个函数调用，更加优秀。
三、运动的判断与停止 stop() :animated
stop() 停止当前正在运行的动作
:animated 表示当前运动的状态
用$(:animated) 获取当前所有动画的元素
is(“:animated”) 判断是否在运动 $(‘bbb’)is(“:animated”) 返回true or false
if( !$(‘bbb’)is(“:animated”)){ //bbb元素在不运动的情况下执行 *** 作
//do something
}
动画函数 animate 函数
animate 方法执行css属性集的自定义动画的方法
语法如下：
$( selector )animate( styles , speed , easing , callback )
styles 参数为必选
speed , easing , callback 可选
你这个得通过播放器来控制吧 ，如果你是用的播放器的话。
具体的函数调用不太清楚，无非就是判断下是否登录，如果已登录则停止播放；
这里提供下 H5 VIDEO 的函数：
获得video对象后，可以通过调用pause()函数来暂停播放。
<script type="text/javascript">function makeArray(arg1, arg2){
return [ this, arg1, arg2 ];
}
</script>最常用的方法,但不幸的,全局的函数调用
当我们学习Javascript时，我们了解到如何用上面示例中的语法来定义函数。
,我们也知道调用这个函数非常的简单,我们需要做的仅仅是:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]Wait a minute What's that window object doing there Why is it the value of this If you haven't stopped to think about it, please stay with me here
等一等,那个Window对象在这里干嘛呢,为何this的值是它呢,如果你以前没有停下来思考这个问题,那么请和我一起来分析吧,
在 Javascript里,我没有指特定的浏览器,有一个全局的对象, 那些看起来散落在你的脚本里的每一行代码(例如在一个对象外的声明)其实都被写在了一个全局对象的上下文里在我们的例子中,其实那个makeArray 函数可以说不是一个松散的全局函数,而是全局对象的一个方法, 让我们返回来看浏览器,在这个环境里它的全局对象被映射到window对象让我们来证明一下:
alert( typeof windowmethodThatDoesntExist );
// => undefined
alert( typeof windowmakeArray);
// => function所有的这些意味着我们之前调用 makeArray的方法是和下面调用的方法一样的
windowmakeArray('one', 'two');
// => [ window, 'one', 'two' ]我说最普遍的调用方法是不幸的是因为它导致我们声明的函数默认是全局的我们都知道全局成员不是编程的最佳实践这在JavaScript里是特别的正确,在JavaScript中避免使用全局的成员,你是不会为之后悔的
JavaScript函数调用规则1
在没有通过明确所有者对象而直接调用的函数中，如myFunction()，将导致this的值成为默认对象（浏览器中的窗口）。
函数调用
让我们现在创建一个简单的对象,使用 makeArray函数作为它的一个方法,我们将使用json的方式来声明一个对象,我们也来调用这个方法
//creating the object
var arrayMaker = {
someProperty: 'some value here',
make: makeArray
};
//invoke the make() method
arrayMakermake('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// alternative syntax, using square brackets
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'one', 'two' ]看到这里的不同了吧,this的值变成了对象本身你可能会疑问原始的函数定义并没有改变,为何它不是window了呢好吧,这就是函数在 JSavacript中传递的方式,函数在JavaScript里是一个标准的数据类型,确切的说是一个对象你可以传递它们或者复制他们就好像整个函数连带参数列表和函数体都被复制,且被分配给了 arrayMaker里的属性make,那就好像这样定义一个 arrayMaker:
var arrayMaker = {
someProperty: 'some value here',
make: function (arg1, arg2) {
return [ this, arg1, arg2 ];
}
};JavaScript函数调用规则2 在一个使用方法调用语法,像 objmyFunction()或者 obj['myFunction'](),这时this的值为obj
这是事件处理代码中bug的主要源头,看看这些例子
<input type="button" value="Button 1" id="btn1" />
<input type="button" value="Button 2" id="btn2" />
<input type="button" value="Button 3" id="btn3" onclick="buttonClicked();"/>
<script type="text/javascript">
function buttonClicked(){
var text = (this === window) 'window' : thisid;
alert( text );
}
var button1 = documentgetElementById('btn1');
var button2 = documentgetElementById('btn2');
button1onclick = buttonClicked;
button2onclick = function(){ buttonClicked(); };
</script>点击第一个按钮将会显示”btn”因为它是一个方法调用,this为所属的对象(按钮元素) 点击第二个按钮将显示”window”因为 buttonClicked是被直接调用的(不像 objbuttonClicked()) 这和我们第三个按钮,将事件处理函数直接放在标签里是一样的所以点击第三个按钮的结果是和第二个一样的
使用像jQuery的JS库有这样的优点,当在jQuery里定义了一个事件处理函数,JS库会帮助重写this的值以保证它包含了当前事件源元素的引用,
//使用jQuery
$('#btn1')click( function() {
alert( thisid ); // jQuery ensures 'this' will be the button
});jQuery是如何重载this的值的呢继续阅读
另外两个:apply()和call()
你越多的使用JavaScript的函数,你就越多的发现你需要传递函数并在不同的上下文里调用他们,就像Qjuery在事件处理函数里所做的一样,你往往经常需要重置this的值记住我告诉你的,在Javascript中函数也是对象,函数对象包含一些预定义的方法,其中有两个便是apply()和 call(),我们可以使用它们来对this进行重置
var gasGuzzler = { year: 2008, model: 'Dodge Bailout' };
makeArrayapply( gasGuzzler, [ 'one', 'two' ] );
// => [ gasGuzzler, 'one' , 'two' ]
makeArraycall( gasGuzzler, 'one', 'two' );
// => [ gasGuzzler, 'one' , 'two' ]这两个方法是相似的,不同的是后面的参数的不同,Functionapply()是使用一个数组来传递给函数的,而Functioncall()是将这些参数独立传递的,在实践中你会发现apply()在大多数情况下更方便
JSavacript函数调用规则3 如果我们想在不复制函数到一个方法而想重载this的值的时候,我们可以使用 myFunctionapply( obj ) 或 myFunctioncall( obj )
构造器
我不想深入研究在Javascript中类型的定义,但是在此刻我们需要知道在Javascript中没有类,而且任何一个自定义的类型需要一个初始化函数,使用原型对象(作为初始化函数的一个属性)定义你的类型也是一个不错的主义,让我们来创建一个简单的类型
//声明一个构造器
function ArrayMaker(arg1, arg2) {
thissomeProperty = 'whatever';
thistheArray = [ this, arg1, arg2 ];
}
// 声明实例化方法
ArrayMakerprototype = {
someMethod: function () {
alert( 'someMethod called');
},
getArray: function () {
return thistheArray;
}
};
var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );
amgetArray();
// => [ am, 'one' , 'two' ]一个非常重要并值得注意的是出现在函数调用前面的new运算符,没有那个,你的函数就像全局函数一样,且我们创建的那些属性都将是创建在全局对象上 (window),而你并不想那样,另一个话题是,因为在你的构造器里没有返回值,所以如果你忘记使用new运算符,将导致你的一些变量被赋值为 undefined因为这个原因,构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒,让你在调用的时候不要忘记前面的new运算符
带着这样的小心,初始化函数里的代码和你在其他语言里写的初始化函数是相似的this的值将是你将创建的对象
1、首先新建一个html文件，命名为testhtml。
2、在testhtml文件内，使用span标签创建一行文字，用于下面延时设置其颜色。
3、在testhtml文件内，给span标签添加一个id属性，用于下面获得它的对象。
4、在js标签内，通过ready()方法，在页面加载成功后，执行function方法。
5、在function方法内，使用setTimeout定时器，在2秒后通过id获得span对象，使用css()方法将其文字颜色设置为红色。
6、最后在浏览器打开testhtml文件，查看结果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）