JavaScript进击之路（1）

最新推荐文章于 2019-05-23 22:14:00 发布
最新推荐文章于 2019-05-23 22:14:00 发布
阅读量430 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_34210678/article/details/72910328
版权

一、DOM学习

1.5个常用的DOM方法（getElementById、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute）

2.D为document（文档）；O为object（对象）划分3种分别包含用户自行定义的对象、内建对象如Array,Math等、宿主对象由浏览器提供的对象；M为model（模型）

3.DOM可以抽象的理解为一棵树，用parent（父）、child（子）、sibling（兄弟）来描述各个元素节点之间的关系。

4.节点（node）包含元素节点（element node）如<body>、<li>等元素、文本节点（被包含在元素节点之内）、属性节点（对元素做出更加详细的描述）如title的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>buy Something</title>
</head>
<body>
<h1>What to buy</h1>
<p title = "topic" id = "nodelem"> Don't forget to buy this stuff</p>
<ul id = "buySomeThing">
<li>book</li>
<li class = "sale">food</li>
<li  class = "sale">dog</li>
</ul>
</body>
</html>


获取元素3个方法：

 1.getElementById 获取并返回一个与给定id属性的元素节点对象

document.getElementById("buySomething");

2.getElementsByTagName 返回一个对象数组，每个对象对应文档中给定标签的一个元素

document.getElementsByTagName("li");
可以通过for循环获取每个元素的对象 

var element = document.getElementsByTagName("li");
for(var i=0;i<element.length;i++){
alert(element.[i]);
}
还可以通过通配符获取该文档中所有的元素（获取当前文档中的所有元素对象） 
alert(document.getElementsByTagName("*").length);
3.getElementsByClassName 返回相同类名元素的数组 
document.getElementsByCalssName("sale");

获取和设置属性
1.getAttribute 获取元素对象的属性 

var element = document.getElementsByTagName("p");
for(var k = 0;k<element.length;k++){
alert(element[k].getAttribute("title"));
}
如果该元素没有这个属性则返回为null
2.setAttribute 对元素节点的属性做修改
将上例中的title属性topic 修改为onepiece 
var element = document.getElementsByTagName("p");
for(var k = 0;k<element.length;k++){
element[k].setAttribute("title","onepiece");
alert(element[k].getAttribute("title"));
}

扩展DOM属性

1.childNodes可以获取任何一个元素的所有子元素

var bodychild = document.getElementsByTagName("body").[0];
alert(bodychild.childNodes.length);
2.nodeType 返回节点属性值
*元素节点的nodeType的属性值为1；
*文本节点的nodeType的属性值为2；
*属性节点的nodeType的属性值为3；
3.nodeValue获得/设置文本节点的内容 
var nodelem = document.getElementById("nodelem");
alert(nodelem.nodeValue);
返回的是null，因为该节点为元素节点，他的子节点为文本节点，故： 
alert(nodelem.childNodes[0].nodeValue);
这样就返回为该文本节点的内容
修改文本节点的文本内容则如： 
nodelem.childNodes[0].nodeValue = "Buy some storybooks";







                

        

        

    

  


    

      

        

            

              
                
                  爵_J
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
javaScript核心原理

				
			

			

				

					07-24
				

			

		

		

			
				
ECMAScript是一门高度抽象的面向对象(object-oriented)语言，用以处理Objects对象. 当然，也有基本类型，但是必要时，也需要转换成object对象来用。
An object is a collection of properties and has a single prototype object. The prototype may be either an object or the null value.

Object是一个属性的集合，并且都拥有一个单独的原型对象[prototype object]. 这个原型对象[prototype object]可以是一个object或者null值。
让我们来举一个基本Object的例子，首先我们要清楚，一个Object的prototype是一个内部的[[prototype]]属性的引用。
不过一般来说，我们会使用____ 下划线来代替双括号，例如__proto__(这是某些脚本引擎比如SpiderMonkey的对于原型概念的具体实现，尽管并非标准)。

			
		

	



                

              
                



	

		

			

				
					
java攻城狮学习路线

				
			

			

				

					08-09
				

			

		

		

			
				
自学java的路线图，合理的学习规划希望可以帮助你节省时间

			
		

	



                


  
              

                


	

		

			

				
					
进击JavaScript核心

				
			

			

				

					慕白博客
				

				

					07-24
					
					875
					
				

			

		

		

			
				
一、JavaScript函数



0x1 遍历对象

for in 循环 
for…in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 也就是说，for … in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。



//变量可以是数组的元素，也可以是对象的属性。
for (变量 in 对象)
{
在此执行代码
}
//遍历数组
var arr = ...

			
		

	





	

		

			

				
					
汤姆大叔深入理解JavaScript系列

				
			

			

				

					XUENIAO的专栏
				

				

					03-13
					
					1418
					
				

			

		

		

			
				
深入理解JavaScript系列文章，包括了原创，翻译，转载，整理等各类型文章，如果对你有用，请推荐支持一把，给大叔写作的动力。

深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点
深入理解JavaScript系列（2）：揭秘命名函数表达式
深入理解JavaScript系列（3）：全面解析Module模式
深入理解JavaScript系列（4）：立即调

			
		

	



		

			
		



	

		

			

				
					
javascript程序设计实验1.docx

				
			

			

				

					12-22
				

			

		

		

			
				
JavaScript 程序设计实验 1  本实验旨在帮助学生掌握 JavaScript 的基本概念和编程技术，包括变量、表达式、运算符、对话框、函数和控制结构等。通过实验，学生将了解 JavaScript 的基本语法和编程思想，并掌握如何...

			
		

	





	

		

			

				
					
JavaScript常用对象.md

				
			

			

				

					09-16
				

			

		

		

			
				
### JavaScript 常用对象详解  #### 对象概念与特性  在 JavaScript 中，对象是一种非常重要的数据类型。它可以被理解为一系列属性与方法的集合。简单来说，对象就像现实世界中的实体，拥有自身的特性和行为。  - **...

			
		

	





	

		

			

				
					
titanAttack：结合PHP连结MySQL资料库制作进击的巨人网页，并制作小游戏

				
			

			

				

					02-11
				

			

		

		

			
				
在这个项目中，我们将会探索如何利用PHP和MySQL构建一个以“进击的巨人”为主题的动态网页，并且结合JavaScript开发一个小游戏。这个过程涉及到多个关键的技术知识点，包括数据库设计、网页交互以及前后端的协作。  ...

			
		

	





	

		

			

				
					
javascript的基础语法，面向对象的实现和设计模式实现

				
			

			

				

					03-16
				

			

		

		

			
				
1.对象 JavaScript 引用  2.JavaScript this  3.JavaScript 闭包  4.JavaScript 事件  5.javascript 跨域  6.javascript 命名空间  Oject-Oriented 1.JavaScript Expressive  2. Interfaces  3.Introduction  4. ...

			
		

	





	

		

			

				
					
进击JavaScript核心 --- （1）基本数据类型

				
			

			

				

					weixin_33887443的博客
				

				

					05-23
					
					189
					
				

			

		

		

			
				
ES5之前提供了 5种基本数据类型 和 1种引用数据类型
  基本数据类型：Undefined, Null, String, Number, Boolean
  引用数据类型：Object

  ES6开始引入了一种新的基本数据类型 Symbol，表示独一无二的值
  1、typeof 操作符
  typeof 是一个操作符而不是函数，因此后面的圆括号可以用，但不是必须的
  "u...

			
		

	





	

		

			

				
					
Vue.js 高仿饿了么外卖APP

				
			

			

				

					weixin_30896825的博客
				

				

					07-28
					
					557
					
				

			

		

		

			
				
第1章 课程简介介绍课程的学习目标和学习内容。1-1 课程简介1-2 课程安排
第2章 Vuejs介绍从前端开发趋势分析开始，引入 MVVM 开发框架和 Vue.js，接着对比流行框架Angular 和 React，最后详细介绍 Vue.js 的核心思想-数据驱动和组件化。2-1 Vuejs介绍-近年来前端开发趋势2-2 Vuejs介绍-MVVM框架2-3 Vuejs介绍-什么是Vuejs及Vu...

			
		

	





	

		

			

				
					
百度云自定义分享密码

				
			

			

				

					Xs15073722800的博客
				

				

					09-27
					
					1715
					
				

			

		

		

			
				
javascript:require(["function-widget-1:share/util/service/createLinkShare.js"]).prototype.makePrivatePassword=function(){return prompt("自定义网盘提取码","1111")}a在百度云分享的时候.调出浏览器的Console,然后执行上面这段js脚本. 
ok

			
		

	





	

		

			

				
					
JS核心系列：理解 new 的运行机制

				
			

			

				

					cynwang的博客
				

				

					09-22
					
					1784
					
				

			

		

		

			
				
和其他高级语言一样 javascript 中也有 new 运算符，我们知道 new 运算符是用来实例化一个类，从而在内存中分配一个实例对象。 但在 javascript 中，万物皆对象，为什么还要通过 new 来产生对象？ 本文将带你一起来探索 javascript 中 new 的奥秘...

一、认识new运算符：


 1     function Animal(name){
 2 

			
		

	





	

		

			

				
					
利用JavaScript更改百度云分享密码

				
			

			

				

					何加焉的博客
				

				

					07-02
					
					1498
					
				

			

		

		

			
				
javascript:require(["function-widget-1:share/util/service/createLinkShare.js"]).prototype.makePrivatePassword=function(){return prompt("请输入"，"张3")};

			
		

	





	

		

			

				
					
基于Vue的老年人健康管理平台设计源码

				
			

			

				

					09-24
				

			

		

		

			
				
该项目是基于Vue的老年人健康管理平台设计源码，共计136个文件，其中包括50个JavaScript文件、17个Python源文件、14个Python字节码文件、11个SVG图像文件、8个Markdown文档、5个XML文件、5个JSON配置文件、5个PNG图片文件、5个Vue组件文件以及2个Git忽略文件，实现了前端界面与后端逻辑的完整构建。

			
		

	





	

		

			

				
					
基于Vue.js的麻将计分系统设计源码

					
最新发布

				
			

			

				

					09-24
				

			

		

		

			
				
该项目是基于Vue.js的麻将计分系统设计源码，共包含61个文件，涵盖28个JavaScript文件、6个map文件、5个CSS样式文件、5个SVG图形文件、4个HTML页面、3个JSON配置文件、2个Vue组件文件、1个开发环境配置文件、1个生产环境配置文件、1个Git忽略文件。项目前端采用Vue框架开发，后端代码尚未开源。

			
		

	





	

		

			

				
					
Bulk Rename Utility(批量改名) v4.0.0 一款功能强大的批量文件重命名工具.rar

				
			

			

				

					09-24
				

			

		

		

			
				
Bulk Rename utility(文件重命名软件)是一款简便实用的批量文件重命名工具。怎么快速多个文件改名？Bulk Rename utility(文件重命名软件)轻松帮助用户批量修改文件名。该软件具有灵活规则的自动编号文件，而且还能够根据多个灵活的标准快速重命名多个文件。

激活信息（大飞哥软件自习室）在压缩包文档内

软件特色

1、快速重命名多个文件，根据许多灵活的标准。

2、多功能的重命名方式：添加，替换文件名中插入文本。转换的情况下，添加号码。删除或更改文件扩展名。

3、在文件重命名前可以即时预览。

4、重命名的照片EXIF元数据(即“拍摄日期”，“分辨率”等信息嵌入在所有JPG图片文件)重命名你的照片文件名从一个毫无意义的dsc1790.jpg到一个新的文件名。

5、重命名MP3文件的ID3标签(又名MP3 ID3标签重命名)。

6、更改文件的创建日期和修改时间等。


			
		

	





	

		

			

				
					
geopandas安装包(pip install)_geopandas-0.14.1.tar.zip

				
			

			

				

					09-24
				

			

		

		

			
				
在使用Python来安装geopandas包时，由于geopandas依赖于几个其他的Python库（如GDAL, Fiona, Pyproj, Shapely等），因此安装过程可能需要一些额外的步骤。以下是一个基本的安装指南，适用于大多数用户：

使用pip安装
确保Python和pip已安装：
首先，确保你的计算机上已安装了Python和pip。pip是Python的包管理工具，用于安装和管理Python包。
安装依赖库：
由于geopandas依赖于GDAL, Fiona, Pyproj, Shapely等库，你可能需要先安装这些库。通常，你可以通过pip直接安装这些库，但有时候可能需要从其他源下载预编译的二进制包（wheel文件），特别是GDAL和Fiona，因为它们可能包含一些系统级的依赖。
bash
pip install GDAL Fiona Pyproj Shapely
注意：在某些系统上，直接使用pip安装GDAL和Fiona可能会遇到问题，因为它们需要编译一些C/C++代码。如果遇到问题，你可以考虑使用conda（一个Python包、依赖和环境管理器）来安装这些库，或者从Unofficial Windows Binaries for Python Extension Packages这样的网站下载预编译的wheel文件。

安装geopandas：
在安装了所有依赖库之后，你可以使用pip来安装geopandas。
bash
pip install geopandas
使用conda安装
如果你正在使用conda作为你的Python包管理器，那么安装geopandas和它的依赖可能会更简单一些。

创建一个新的conda环境（可选，但推荐）：
bash
conda create -n geoenv python=3.x anaconda  
conda activate geoenv
其中3.x是你希望使用的Python版本。

安装geopandas：
使用conda-forge频道来安装geopandas，因为它提供了许多地理空间相关的包。
bash
conda install -c conda-forge geopandas
这条命令会自动安装geopandas及其所有依赖。

注意事项
如果你在安装过程中遇到任何问题，比如编译错误或依赖问题，请检查你的Python版本和pip/conda的版本是否是最新的，或者尝试在不同的环境中安装。
某些库（如GDAL）可能需要额外的系统级依赖，如地理空间库（如PROJ和GEOS）。这些依赖可能需要单独安装，具体取决于你的操作系统。
如果你在Windows上遇到问题，并且pip安装失败，尝试从Unofficial Windows Binaries for Python Extension Packages网站下载相应的wheel文件，并使用pip进行安装。
脚本示例
虽然你的问题主要是关于如何安装geopandas，但如果你想要一个Python脚本来重命名文件夹下的文件，在原始名字前面加上字符串"geopandas"，以下是一个简单的示例：

python
import os  
  
# 指定文件夹路径  
folder_path = 'path/to/your/folder'  
  
# 遍历文件夹中的文件  
for filename in os.listdir(folder_path):  
    # 构造原始文件路径  
    old_file_path = os.path.join(folder_path, filename)  
    # 构造新文件名  
    new_filename = 'geopandas_' + filename  
    # 构造新文件路径  
    new_file_path = os.path.join(folder_path, new_filename)  
    # 重命名文件  
    os.rename(old_file_path, new_file_path)  
    print(f'Renamed "{filename}" to "{new_filename}"')
请确保将'path/to/your/folder'替换为你想要重命名文件的实际文件夹路径。

			
		

	





	

		

			

				
					
利用JavaScript设计模式构建强大应用

				
			

			

				

					
				

			

		

		

			
				
1. **单例模式**：确保一个类只有一个实例，并提供全局访问点。在JavaScript中，单例模式常用于管理需要全局共享的状态或服务。  2. **工厂模式**：提供了一种创建对象的方式，但不直接暴露创建逻辑，而是通过返回...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值