分类目录归档:Javascript学习笔记

js的匿名函数总结文章

网上看到一句话,匿名函数的执行是具有全局性的,那怎么具有的全局性呢?

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

1.案例中,第一个say打出来的是Alan,而第二个则是window

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var name = 'window'
var person = {
name :'Alan',
sayOne:function () {
 console.log(this.name)
},
sayTwo:function () {
 return function () {
 console.log(this.name)
 }
}
}
person.sayOne()//Alan
person.sayTwo()() // window

2.原因

  1. 函数内部的this指向调用者
  2. sayOne调用者是person对象,所以this指向person;
  3. sayTwo的调用者虽然也是person对象,但是区别在于这次调用并没有打出this而是在全局返回了一个匿名函数
  4. 而这个匿名函数不是作为某个对象的方法来调用执行,是在全局执行

3.我们也可以更改this指向,这里应用JS高级编程的案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var name = "global";
var foo = {
 name: "foo",
 getName : function(){
 console.log(this.name);
 }
}
var bar = {
 name: "bar",
 getName : function(){
 return (function(){
  console.log(this.name);
 })();
 }
}
foo.getName(); //foo
foo.getName.call(bar); //bar
foo.getName.call(this); //global
foo.getName.call(window); //global
(function(){
 console.log(this.name)
}.bind(bar))(); //bar
(function(){
 console.log(this.name)
}.bind())(); //global

 

 

 

function 改写为=> => 可以读成goesto

如果只有一个形参,那就可以省略形参小括号

如果不一个形参,0个或者多个形参,那就不能省略这个形参的小括号了

如果函数体只有一句话,那就可以省略函数体大括号

如果函数体只有一句话,并且这一句话是return 返回值 那return也要省略

如果函数不一句话,不能省略这个大括号

js中的正则提取

提取img标签
arr=[<a href=’/Uploads/file/20220106/61d6b285308a5.jpg’ target=_blank><img src=’/Uploads/file/20220106/61d6b285308a5.jpg’ width=’30’ height=’30’ /></a>
<a href=’/Uploads/file/20220106/61d6b2853d880.jpg’ target=_blank><img src=’/Uploads/file/20220106/61d6b2853d880.jpg’ width=’30’ height=’30’ /></a>
<a href=’/Uploads/file/20220106/61d6b2862ece9.jpg’ target=_blank><img src=’/Uploads/file/20220106/61d6b2862ece9.jpg’ width=’30’ height=’30’ /></a>]

获取img src=.*

$("#pic{$key}").html(/<img src=.*>/.exec(arr[0]))

网页不允许复制破解,三条js解决

网页不允许复制破解

一般都是通过js做限制,例如onselectstart等

chrome浏览器为例,网页:https://m.techan.com/produce/zkgeb.html为例,去掉网页的复制限制,运行完如下,可以选择复制

图片详情

步骤:

1\chrome浏览器,F12打开开发者工具

2\点开控制台,输入图片中的三条js语句:

document.onselectstart=null;

document.ondragstart=null;

document.body.contentEditable=’true’;

3\然后就没了

4\去掉右键菜单屏蔽办法:

layui的form,mark一下

form改成div后,button的type=reset就失效了,

button的三个type参数submt,reset,button,如果使用type=submit,就不走layui的form.on方法,如果走form.on

<script>
    layui.use('form',function(){
        var form = layui.form;

        form.on('submit(add)', function(data)
        {
            console.log(data);
           $.post('/index/jbgs/apply/add', data.field, function(result)
           {
               // result.code = 100if;
               // layer.msg("success");
               // setTimeMethods(function()
               // {
               //     location.reload();
               // }, 500)
           });
            // return false;
        });
    })
</script>

自己写的提取文章中的图片(layui+tp5),以弹出窗口的形式,左右滑动展示,当然这里没用到tp5

//需要引用layer或者layui
//需要引用jquery
//需要引用swiper组件

<script>

//articlecontent是文章id所在DOM
      $("#aritclecontent").find("img").on("click",function() {

        var html = '';
        html += '<div class="swiper-container" style="z-index:999999999;width:1024px;"><div class="swiper-wrapper">';
        $('#aritclecontent img').each(function (index) {
            html += '<div class="swiper-slide">'
            html += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div><img style="width:1024px;" src="' + $(this).attr("src") + '"></div>';
        })
        html += '</div></div>';
        layer.open({
            type: 1,
            // area:['900px','600px'],
            title: false,
            skin: 'layui-layer-rim',
            closeBtn: 1,
            // shade:0,
            content: html
        })
        var mySwiper = new Swiper('.swiper-container',{
            // direction: 'vertical',//竖着切换
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    })
</script>

jquery中的this和$(this)分别,简单就是说,this是js中的,$(this)是jquery中的,当然jquery中也可以用this.

      首先来看看JQuery中的 $() 这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象。那么,当你在网页中alert($(‘#id’));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了。

那么,我们再回过头来说$(this),这个this是什么呢?假设我们有如下的代码:

继续阅读

foreach方法,forech(function(currentValue,index,arr),thisValue)

function(currentValue, index, arr)
fn是必需的。 数组中每个元素需要调用的函数。

函数参数:
参数 描述
currentValue 必需。当前元素
index 可选。当前元素的索引值。
arr 可选。当前元素所属的数组对象。
thisValue 可选。传递给函数的值一般用 “this” 值。
如果这个参数为空, “undefined” 会传递给 “this” 值

tips:
onclick=”number.foreach(myfunction)”
var numbers = [4,9,16,25]

javascript学习笔记2,top,closed,opener,getElementById等属性和方法

closed 属性:closed 属性可返回一个布尔值,该值声明了窗口是否已经关闭。该属性为只读。
当浏览器窗口关闭时,表示该窗口的 Windows 对象并不会消失,它将继续存在,不过它的 closed 属性将设置为 true。
opener属性:opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。
opener 属性非常有用,创建的窗口可以引用创建它的窗口所定义的属性和函数。

defaultstatus属性:属性可设置或返回窗口状态栏中的默认文本。该属性可读可写。
该文本会在页面加载时被显示。

status属性:基本同上,像我这样的人一般用不上不同的地方。 继续阅读

javascript学习笔记1:return,onclick,confirm,oncontextmenu,window的event和注释和排错

// javascript的单行注释符
两个斜杠是javascript的单行注释

oncontextmenu
Fires when the user clicks the right mouse button in the client area, opening the context menu,当用户右键单击页面的时候,打开一个右键菜单

return关键字,举例
    <script language=”javascript”>
         function myfunction(a,b){
         var r;
          r = a+b;
         return(r)
         }
window.alert(myfunction(3,2));
</script>

继续阅读