简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > javascript基础与Jquery(方法，对象，JQ基础操作)2019年10月24日
Blogger Information
Blog 27
fans 0
comment 0
visits 26388
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
javascript基础与Jquery(方法，对象，JQ基础操作)2019年10月24日
渊的博客
Original
914 people have browsed it

1、重新赋值

实例

<script>
    var val=3;
    function func(){
        val=5;
        return val;
    }
    alert(func());
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果图

重新赋值.png

2、对象使用

实例

<script>
     var obj=new Object();
    obj.name='php';
    obj.rand=function(){
        console.log(Math.random());
    }
    obj.sum=function(num1,num2){
        return num1+num2;
    }
    console.log(obj.name);
    console.log(obj.rand());
    console.log(obj.sum(1,7));
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果图

对象.png

3、对象实例2

实例

<script>
   var obj='asdfasfasebc';
   var obj={};
   obj.name='php';
   obj.rand=function(){
     console.log(Math.random());
   }
   obj.rand();
   console.log(obj.name);
   console.log(obj);
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果图

对象1.png

4、对象实例2

实例

<script>
    var obj={
        table:'abc',
        find:function(){
            return this.table;
        },
        where:function(){
            return this;
        }
    };

var obj2=obj;
obj2.table='abcdefghjkl';

var res=obj2.where().find();
console.log(res);
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果图

对象2.png

5、javascript获取对象ID操作

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body style="margin:0;">
<div id="div1" class="div1" style="background:red;width: 100%;height: 50px;"></div>
<p id="p1" class="p1" style="background:green;width: 100%;height: 50px;"></p>
</body>
</html>
<script>
var res=document.getElementById('div1');
console.log(res);

</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果图

getid.png

6、javascript获取对象class

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body style="margin:0;">
<div id="div1" class="div1" style="background:red;width: 100%;height: 50px;"></div>
<p id="p1" class="p1" style="background:green;width: 100%;height: 50px;"></p>
</body>
</html>
<script>
var res=document.getElementsByClassName('div1');
console.log(res);

</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果图

getclass.png

7、jquery中each循环

实例

<script type="text/javascript">
 var arr=[1,2,3,4,5,6,8,0];
    $.each(arr,function(i,v){
        if(v==3 || v==6){
            return v;
        }
        console.log('索引:'+i+'值:'+v);
    });
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果图

each.png

8、jquery选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" style="background:red;width: 100%;height: 50px;"></div>
<p class="p1" style="background:green;width: 100%;height: 50px;"></p>
<button onclick="change_color_div()">改变div颜色</button>
<button onclick="change_size_p()">改变P人的大小</button>
</body>
</html>
<script type="text/javascript">
function change_color_div(){
     $('#div1').css('background','#00ff00');
}
function change_size_p(){
    $('.p1').css('width','200px');
}
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果图

选择器.png

Correction status：qualified

Teacher's comments：写得不错哟
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！