薯条_9
薯条_9

Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理

认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理_第1张图片
将HTML代码分解为DOM节点层次图:


HTML文档可以说由节点构成的集合，DOM节点有:
　　1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
　　2. 文本节点：向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
　　3. 属性节点：元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:


遍历节点树:

以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理_第2张图片
前两个是document方法。

例：通过getElementById获取id为con的h2标签。修改h2标签的样式，将颜色设为红色。修改h2标签的样式，将背景颜色设为灰色(#CCC)。通过style.display实现隐藏。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>style样式</title>
 6 </head>
 7 <body>
 8     <h2 id="con">I love JavaScript</H2>
 9     <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
10     <script type="text/javascript">
11         var tite = document.getElementById("con");
12         tite.style.color = "red";
13         tite.style.backgroundColor = "#ccc";
14         tite.style.display = "none";
15     </script>
16 </body>
17 </html>

 

 

 

getElementsByName()方法
返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
　　1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
　　2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

例：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     function getnum(){
 6         var mynode = document.getElementsByName("myt");  
 7         alert(mynode.length);
 8     }
 9 </script>
10 </head>
11 <body>
12     <input name="myt" type="text" value="1">
13     <input name="myt" type="text" value="2">
14     <input name="myt" type="text" value="3">
15     <input name="myt" type="text" value="4">
16     <input name="myt" type="text" value="5">
17     <input name="myt" type="text" value="6">
18     <br />
19     <input type="button" onclick="getnum()" value="看看有几项？" />
20 </body>
21 </html>

运行结果：

 

 

 

getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

getElementsByTagName(Tagname)

1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

通过getElementsByTagName()获取节点：

Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理_第3张图片

使用三种获取节点的方法:

 1 <!DOCTYPE HTML>
 2 <html>  
 3 <head>  
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
 5 <title>JavaScript</title>  
 6 </head>  
 7 <body>  
 8     <form name="Input">
 9         <table align="center" width="500px" height="50%" border="1">
10             <tr>
11                 <td align="center" width="100px">
12                     学号:
13                 </td>
14                 <td align="center" width="300px">
15                     <input type="text" id=userid name="user" onblur="validate();">
16                     <div id=usermsg></div>
17                 </td>
18             </tr>
19             <tr>
20                 <td align="center" width="100px">
21                     姓名:
22                 </td>
23                 <td align="center">
24                     <input type="text" name="name">
25                 </td>
26             </tr>
27             <tr>
28                 <td align="center" width="%45">
29                     性别:
30                 </td>
31                 <td align="center">
32                     <input type="radio" name="sex" value="男">
33                         男
34                     <input type="radio" name="sex" value="女">
35                         女
36                 </td>
37             </tr>
38             <tr>
39                 <td align="center" width="30%">
40                     年龄:
41                 </td>
42                 <td align="center" width="300px">
43                     <input type="text" name="age">
44                 </td>
45             </tr>
46             <tr>
47                 <td align="center" width="100px">
48                     地址:
49                 </td>
50                 <td align="center" width="300px">
51                     <input type="text" name="addr">
52                 </td>
53             </tr>
54         </table>
55     </form>
56     <h1 id="myHead" onclick="getValue()">
57         看看三种获取节点的方法?
58     </h1>
59     <p>
60         点击标题弹出它的值。
61     </p>
62     <input type="button" onclick="getElements()"value="看看name为sex的节点有几个?" />
63     <br/>
64     <input type="button" onclick="getTagElements()"value="看看标签名为input的节点有几个?" />
65     <script type="text/javascript">
66         function getValue(){
67             var myH = document.getElementById("myHead");
68             alert(myH.innerHTML)
69         }
70 
71         function getElements(){
72             var myS = document.getElementsByName("sex");
73             alert(myS.length);
74         }
75 
76         function getTagElements(){
77             var myI = document.getElementsByTagName("input")
78             alert(myI.length);
79         }
80     </script>
81 </body>
82 </html>

 

 

 

 

区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
　　1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
　　2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
　　3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

把上面的例子转换到HTML中如下:

<input type="checkbox" name="hobby" id="hobby1"> 音乐

input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。

方法总结如下:（方法区分大小写）



通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:

1 <input type="checkbox" name="hobby" id="hobby1">  音乐
2 <input type="checkbox" name="hobby" id="hobby2">  登山
3 <input type="checkbox" name="hobby" id="hobby3">  游泳
4 <input type="checkbox" name="hobby" id="hobby4">  阅读
5 <input type="checkbox" name="hobby" id="hobby5">  打球
6 <input type="checkbox" name="hobby" id="hobby6">  跑步 
7 <input type="button" value = "全选" id="button1">
8 <input type="button" value = "全不选" id="button1">
1 document.getElementsByTagName("input"); //结果为获取所有标签为input的元素，共8个。
2 
3 document.getElementsByName("hobby"); //结果为获取属性name="hobby"的元素，共6个。
4 
5 document.getElementById("hobby6"); //结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。

实现当点击"全选"按钮时，将选中所有的复选项。实现当点击"全不选"按钮时，将取消所有选中的复选项。在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入的数值，通过id选中相应的复选项：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>无标题文档</title>
 6 </head>
 7 <body>
 8     <form>
 9       请选择你爱好:<br>
10       <input type="checkbox" name="hobby" id="hobby1">  音乐
11       <input type="checkbox" name="hobby" id="hobby2">  登山
12       <input type="checkbox" name="hobby" id="hobby3">  游泳
13       <input type="checkbox" name="hobby" id="hobby4">  阅读
14       <input type="checkbox" name="hobby" id="hobby5">  打球
15       <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
16       <input type="button" value = "全选" onclick = "checkall();">
17       <input type="button" value = "全不选" onclick = "clearall();">
18       <p>请输入您要选择爱好的序号，序号为1-6:</p>
19       <input id="wb" name="wb" type="text" >
20       <input name="ok" type="button" value="确定" onclick = "checkone();">
21     </form>
22 
23     <script type="text/javascript">
24         function checkall(){
25             var hobby = document.getElementsByTagName("input");
26 
27             for(i = 0; i < hobby.length; i++){
28                 if(hobby[i].type == "checkbox"){
29                     hobby[i].checked = true;
30                 }
31             } 
32         }
33         function clearall(){
34           var hobby = document.getElementsByName("hobby");
35 
36           for(i = 0; i < hobby.length; i++){
37               if(hobby[i].type == "checkbox"){
38                   hobby[i].checked = false;
39               }
40           }
41         }
42 
43         function checkone(){
44             var j=document.getElementById("wb").value;
45 
46             var hobby = document.getElementById("hobby" + j);
47             
48             hobby.checked = true;
49         }
50     </script>
51 </body>
52 </html>

 

你可能感兴趣的:(Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理)

  • 【SpringBoot】实现登录功能 一只爱打拳的程序猿 SpringMyBatisHTML5+CSSspringbootmybatisjavascripthtml5css
    在上一篇博客中，我们讲解了注册页面的实现。在此基础上会跳转到登录页面，今天给大家带来的是使用SpringBoot，MyBatis，Html，CSS，JavaScript，前后端交互实现一个登录功能。目录一、效果二、源码2.1前端2.2后端一、效果用户名和密码栏输入空或没有值时，提示错误。在数据库中有以下信息，任意挑选一条信息进行登录操作。输入用户lisi，123后登陆成功跳转到个人列表。二、源码2
  • 封装AJAX(带详细注释) Rverdoser okhttp
    封装AJAX请求是前端开发中常见的需求，可以帮助我们简化代码，提高可重用性。下面我将通过JavaScript（使用XMLHttpRequest对象）和现代JavaScript（使用FetchAPI）两种方式来展示如何封装AJAX请求。1.使用XMLHttpRequest封装AJAXfunctionajax(method,url,data,callback){//创建XMLHttpRequest对象
  • 深度掌握 ReactJS 高级概念：前端开发者必备 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读这篇文章汇总了ReactJS中值得深入研究的高级概念。读完后，不仅在前端面试中能更胸有成竹，还能自行开发一个类似ReactJS的UI库。目录Rendering的含义与过程Re-rendering发生的机制及原因VirtualDOM的原理Reconciliation算法的运行方式ReactJS的性能优化方案1
  • JavaScript性能优化实战 仰望丨苍穹 前端：技巧与实践javascript性能优化前端
    深入探讨JavaScript性能瓶颈，分享优化技巧与最佳实践：性能瓶颈DOM操作开销大：DOM操作往往是JavaScript性能的一个关键瓶颈。每次对DOM进行访问、修改或创建，都可能触发浏览器的重排（reflow）和重绘（repaint）操作。例如频繁地使用innerHTML修改元素内容，或者大量地动态创建DOM节点，都会导致性能问题。全局作用域查找慢：在JavaScript中，变量的查找是从当
  • JavaScript性能优化实战：从瓶颈分析到高效编码策略 AAEllisonPang Java数据库
    一、性能瓶颈分析：从问题出发1.1常见性能问题类型渲染阻塞：同步脚本加载导致DOMContentLoaded延迟内存泄漏：未解绑的事件监听、闭包引用残留重复计算：高频触发的回调函数无节制运算布局抖动：强制同步布局（ForcedSynchronousLayout）网络瓶颈：未优化的资源加载策略典型案例：某电商网站商品筛选功能，用户选择规格时界面卡顿。经分析发现每次选择都会触发全量DOM重新渲染，导致
  • 使用Jest和React Testing Library测试React组件 邹澜鹤Gardener
    使用Jest和ReactTestingLibrary测试React组件去发现同类优质开源项目:https://gitcode.com/项目介绍这个开源项目是TestingJavaScript.com课程的一部分，专注于教你怎么用最智能、最高效的方式去测试任何JavaScript应用，特别是针对React组件的测试。它提供了一系列示例代码，涵盖了从基础的React渲染到复杂的Redux连接组件以及自
  • n-tier(层)架构 神经兮兮的小饼 架构知识
    一，不断要去改。二来还得快。就必须要用n-tier（层）模式开发。这样我就可以把分工分得很细。需要改动时，可以一步到位，找到需要改动的地方，而且还可以非常快。n-tier架构，把model细化分成了几层。现在继续把其中的服务层（service）细化，变成service层调用BO（BusinessObject）层，BO层调用DO（domainobject）层。1、DO（domainobject）DO
  • 了解JS递归 几度泥的菜花 javascript前端
    在JavaScript中，递归是一个非常重要的概念，它允许函数在其定义内部调用自身。递归在处理许多类型的问题时非常有用，尤其是那些可以通过分解成更小、更简单的子问题来解决的问题。然而，递归也需要谨慎使用，因为它可能导致堆栈溢出（特别是当递归调用非常深时）。以下是关于JavaScript递归的一些深入了解：1.递归的基本结构递归函数通常包含两个基本部分：基本情况（BaseCase）：这是递归停止的条
  • JavaScript（7） 几度泥的菜花 javascript前端
    函数的含义函数：封装一段可被重复调用执行的代码块，通过函数可以实现大量代码的重复使用。函数也是一种引用数据类型。函数的使用创建函数（常用）：通过function关键字声明函数，又叫命名函数匿名函数：通过函数表达式定义函数，又叫做匿名函数函数的参数形参：函数定义时候，传递的参数(实参值会传递给形参,相当于不用声明的变量)实参：函数调用时候，传递的参数参数的返回值返回值：函数调用后返回的数据；函数执行
  • 搞定python之二----数据类型和程序的控制结构 stars 搞定pythonpython开发语言
    本文是《搞定python》的第二篇文章，主要介绍了程序的基本结构的基本的数据类型。1、python代码俯视图先从整体上认识一下python代码是如何组织，咱们先来一段简单的代码。#这是第一个python代码importtime#导入时间模块#定义了三个变量year=time.localtime().tm_yearmonth=time.localtime().tm_monday=time.local
  • 6个必备的 Node 网络爬虫库 zz_jesse 爬虫
    作为一名程序员，你是否曾遇到过需要从各大网站提取数据的需求？随着互联网的快速扩展，能够高效地进行网络爬虫已经成为企业、研究人员以及个人的一项重要技能。在这个数据为王的时代，如何利用JavaScript和Node.js来实现高效的数据抓取，是每一个开发者都应该掌握的技巧。网络爬虫，即从网站提取数据的过程，已经成为各行各业的重要工具。而JavaScript和Node.js因其强大的功能和丰富的库，成为
  • Neo4j笔记整理CQL大全 Kugua-F Neo4jNeo4j图形数据库
    工作需要用到知识图谱，学习一下Neo4jCQL常规操作查询关系的父节点match(n)-[r:likes]-()returnn查询节点名称为person的前25条结点记录和查询后25条结点记录match(n:Person)returnnlimit25match(n:Person)returnnskip25查询结点名称为personage=12的所有结点match(n:Person)wheren.a
  • vue3+ts+vite+pinia+element-plus搭建一个项目 貂蝉空大 vueaxiostypescriptvitepiniavue前端
    创建一个基于Vue3、TypeScript、Vite、Pinia和ElementPlus的项目是一个现代化的前端开发流程，这种配置通常用于构建轻量级、快速和模块化的单页应用程序（SPA）。下面是一个简单的介绍：1.Vue3是Vue.js的最新主要版本，提供了CompositionAPI、更好的TypeScript支持、自定义渲染器等功能。2.TypeScript是JavaScript的一个超集，添
  • 【Python教程】进阶篇 AI study Python系列python人工智能数据计算机工具
    目录2.1函数2.1.1函数基础2.1.1.1函数的定义和调用2.1.1.2函数的作用2.1.1.3函数的参数2.1.1.4函数的返回值2.1.1.5函数的作用域-LEGB2.1.2闭包2.1.3装饰器2.1.4迭代器和生成器2.1.4.1可迭代对象2.1.4.2迭代器2.1.4.3生成器2.1.4.4三者之间的异同2.1.5四种函数2.1.5.1递归函数2.1.5.2匿名函数2.1.5.3普通函
  • 今天记录一下哈希表，因为一直有点不理解，所以今天查找了一些资料来理解哈希表 suohanfjiusbis 散列表leetcode数据结构
    classSolution:defcopyRandomList(self,head:'Optional[Node]')->'Optional[Node]':ifnothead:returndic={}cur=headwhilecur:dic[cur]=Node(cur.val)cur=cur.nextcur=headwhilecur:dic[cur].next=dic.get(cur.next)d
  • python学智能算法（七）|KNN邻近算法 西猫雷婶 人工智能python学习笔记算法
    【1】引言前述学习进程中，已经了解了一些非常经典的智能算法，相关文章包括且不限于：python学智能算法（三）|模拟退火算法：深层分析_模拟退火动画演示-CSDN博客python学智能算法（四）|遗传算法：原理认识和极大值分析_遗传算法和模拟退火时间复杂度-CSDN博客python学智能算法（五）|差分进化算法：原理认识和极小值分析-CSDN博客python学智能算法（六）|神经网络算法：BP神经
  • 利用微软的 HTML 应用程序宿主程序的攻击 zhaoyong631 microsofthtml前端
    mshta.exe是微软的HTML应用程序宿主程序（MicrosoftHTMLApplicationHost），属于Windows系统组件。它的核心功能是运行.hta（HTMLApplication）文件，允许通过HTML、JavaScript、VBScript等技术创建交互式图形界面应用。何时会调用mshta.exe？1.合法用途运行本地/企业级HTA应用：企业可能用.hta开发内部工具（如配置
  • 【零基础入门unity游戏开发——进阶篇】Unity Microphone类处理麦克风相关信息，录制音频并实时处理或保存录制的音频数据 向宇it #unity音视频c#游戏引擎开发语言编辑器
    考虑到每个人基础可能不一样，且并不是所有人都有同时做2D、3D开发的需求，所以我把【零基础入门unity游戏开发】分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。【C#篇】：主要讲解C#的基础语法，包括变量、数据类型、运算符、流程控制、面向对象等，适合没有编程基础的同学入门。【unity通用篇】：主要讲解unity的基础通用的知识，包括unity界面、unity脚本、unit
  • react 组件封装原则_如何基于antd封装自己的react组件并发布到npm 楚云卿 react组件封装原则
    引言在前端项目开发过程中，有大量重复的内容，比如布局相似的模块，较多的功能表单等，我们可以提炼成组件来提升效率，减少重复建设。文章以实际工作中的项目为例，介绍如何将项目中常用的组件进行封装并发布到npm中。1前提要求在开始前你需要具备以下条件：安装了Node&npm安装了Git基本掌握npm，git使用方法熟练使用JavaScript&ES6&CSS基本掌握React熟悉React,antd2开始
  • Node_文件上传&令牌 katsukichan Node
    信息获取来源EnoYao创建脚手架expresskatsuki-project（express名称）在katsuki-project目录下安装依赖包npminstall上传单文件项目在katsuki-project安装multer模块npminstallmulter--save目录中创建一个uploads文件夹，不创建运行也会自动创建项目结构publicjavascriptsjquery.jsup
  • 这么强吗？ 电气外传 自动化电气自动化程序人生
    龙海儿11(同微博)同《电气外传》微信公众号直接先来引出我们今天强大的主角--KEPServerEX软件。那什么是KepS呢（小编懒得多打字，所以简写一下）？有多强大呢？听说过KepS的大哥们一般都会说：哦，它是一个OPC软件。对但不全对。那不认识它的朋友们怎么来认识它呢：人机界面总要采集一些数据或者操控一些设备的吧，上下位之前的数据连接桥梁就可以用它；而且几乎是万能的（暂且这么认为...摊手），
  • c#读取json某一节点数据_C#获取Json字符串中的某个值 鹿哥说 c#读取json某一节点数据
    问题描述：json数据格式{"resCode":0,"resMag":"aaa","data":[{"parkName":"B1停车场"，"freeSpaceNum":100}]}。第一方法：使用JavaScriptSerializerJavaScriptSerializerJss=newJavaScriptSerializer();DictionaryDicText=(Dictionary)Js
  • 前端-webpack一些常用配置的作用 大嘴史努比 前端webpacknode.js
    1.LoaderLoader用于对模块的源代码进行转换。它可以将非JavaScript文件（如CSS、图片、字体等）转换为webpack能够处理的模块。常用Loader及其作用Loader作用babel-loader将ES6+代码转换为ES5，兼容旧版浏览器。css-loader解析CSS文件，处理@import和url()等语法。style-loader将CSS插入到DOM中，通过标签生效。sa
  • 教你如何免费获取股票数据用python、JavaScript (Node.js)、JAVA等多种语言的实例代码演示（实时数据、历史数据、CDMA、KDJ等指标数据）配有股票数据API接口说明文档说明 蝶澈乐乐 pythonjavascriptnode.js数据仓库金融
    近一两年来，股票量化分析逐渐受到广泛关注。而作为这一领域的初学者，首先需要面对的挑战就是如何获取全面且准确的股票数据。因为无论是实时交易数据、历史交易记录、财务数据还是基本面信息，这些数据都是我们进行量化分析时不可或缺的宝贵资源。我们的核心任务是从这些数据中挖掘出有价值的信息，为我们的投资策略提供有力的支持。在寻找数据的过程中，我尝试了多种途径，包括自编网易股票页面爬虫、申万行业数据爬虫，以及同花
  • javascript Day_1 Mswanga javascript前端javajavascript
    script的书写位置1，写在标签的正上方constnewItem=12，写在外部，然后引入到HTML文件输入输出1.输入：prompt('请输入一段文字')结果：会显示一个对话框，包含一个文字信息，用来提示用户输入。2.输出：//普通输出document.write('要输出的内容')//内容可以包含标签//弹出警告框输出alert('要输出的内容')//控制台打印输出，程序员可见console
  • 类与对象（一） 15Moonlight c++算法开发语言
    目录1.面向过程和面向对象初步认识2.类的引入3.类的定义4.类的访问限定符及封装4.1访问限定符4.2封装5.类的作用域6.类的实例化7.类对象模型7.1类对象的存储方式7.2结构体内存对齐规则7.3特殊情况：空类的大小8.this指针8.1this指针的引出8.2this指针的特性9.C语言和C++实现栈(Stack)的对比：如果你在阅读过程中有任何疑问或想要进一步探讨的内容，欢迎在评论区畅所
  • JavaScript_Day2 Mswanga javascript前端开发语言
    对象的声明let对象名={属性值，方法}letsir={name:"wang",address:"Henan",age:18}//修改属性sir.name="li";//增加属性sir.sex="man";//删除属性deletesir.age;console.log(sir);查找的两种方法1.对象名.属性名2.对象名["属性名"]，如sir['name']如何写方法例如song方法song:f
  • angular自定义指令 ~ rainbow～ js实用技巧angular.js前端javascript
    1、什么是指令？官方文档的解释：指令是为Angular应用程序中的元素添加额外行为的类。使用Angular的内置指令，你可以管理表单、列表、样式以及要让用户看到的任何内容。2、指令的分类1）组件——带有模板的指令。这种指令类型是最常见的指令类型。2）属性型指令——更改元素、组件或其他指令的外观或行为的指令。3）结构型指令——通过添加和删除DOM元素来更改DOM布局的指令。内置属性指令：内置指令只会
  • Ubuntu22.04安装数据 @-wyy mysql
    数据库安装步骤：sudoapt-getupdatesudoaptinstallmysql-servermysql-clientsudosystemctlstartmysqlsudosystemctlstatusmysql（1）在命令行登录MySQL数据库，并使用mysql数据库（必须使用这个库，因为root在这里面）sudomysql-uroot-pusemysql（2）修改连接权限，执行：upd
  • Angular指令 lvxinaidou AngularTypeScriptangular.jstypescriptjavascript
    1.上面是指令指令是为Angular应用程序中的元素添加额外行为的类。使用Angular的内置指令，你可以管理表单、列表、样式以及要让用户看到的任何内容。2.指令分类Angular指令的不同类型如下：组件——带有模板的指令。这种指令类型是最常见的指令类型。属性型指令——更改元素、组件或其他指令的外观或行为的指令。结构型指令——通过添加和删除DOM元素来更改DOM布局的指令。内置属性指令：ngCla
  • 桌面上有多个球在同时运动，怎么实现球之间不交叉，即碰撞？ 换个号韩国红果果 html小球碰撞
    稍微想了一下，然后解决了很多bug，最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后，遍历整个在dom树中的其他小球，看一下它们与当前小球的距离是否小于球半径的两倍？若小于说明下一次绘制该小球（设为a）前要把他的方向变为原来相反方向（与a要碰撞的小球设为b），即假如当前小球的距离小于球半径的两倍的话，马上改变当前小球方向。那么下一次绘制也是先绘制b，再绘制a，由于a的方向已经改变
  • 《高性能HTML5》读后整理的Web性能优化内容 白糖_ html5
    读后感         先说说《高性能HTML5》这本书的读后感吧，个人觉得这本书前两章跟书的标题完全搭不上关系，或者说只能算是讲解了“高性能”这三个字，HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲，再去分析性能优化的内容，这样才会有吸引力。因为只是在线试读，没有机会看后面的内容，所以不胡乱评价了。  
  • [JShop]Spring MVC的RequestContextHolder使用误区 dinguangx jeeshop商城系统jshop电商系统
        在spring mvc中，为了随时都能取到当前请求的request对象，可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量，如request, response等。         在jshop中，对RequestContextHolder的
  • 算法之时间复杂度 周凡杨 java算法时间复杂度效率
          在 计算机科学 中， 算法 的时间复杂度是一个 函数 ，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的 字符串 的长度的函数。时间复杂度常用 大O符号 表述，不包括这个函数的低阶项和首项系数。使用这种方式时，时间复杂度可被称为是 渐近 的，它考察当输入值大小趋近无穷时的情况。 这样用大写O()来体现算法时间复杂度的记法，
  • Java事务处理 g21121 java
    一、什么是Java事务 通常的观念认为，事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性（atomicity）、一致性（consistency）、隔离性（isolation）和持久性（durability）的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时，所有被该事务影响的数据都应该恢复到事务执行前的状
  • Linux awk命令详解 510888780 linux
    一.  AWK 说明   awk是一种编程语言，用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件，或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能，是linux/unix下的一个强大编程工具。它在命令行中使用，但更多是作为脚本来使用。    awk的处理文本和数据的方式：它逐行扫描文件，从第一行到
  • android permission 布衣凌宇 Permission
    <uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中，改值可以修改上传 <uses-permission android:na
  • Oracle和谷歌Java Android官司将推迟 aijuans javaoracle
    北京时间 10 月 7 日，据国外媒体报道，Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行，这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测，谷歌 Oracle 案很可能会被推迟。　　该案中的第二波辩护被安排在 10 月 17 日出庭，从目前看来
  • linux shell 常用命令 antlove linuxshellcommand
    grep [options] [regex] [files] /var/root # grep -n "o" * hello.c:1:/* This C source can be compiled with:
  • Java解析XML配置数据库连接(DOM技术连接 SAX技术连接) 百合不是茶 sax技术Java解析xml文档dom技术XML配置数据库连接
        XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习   XML配置数据库的连接主要技术点的博客; JDBC编程 : JDBC连接数据库 DOM解析XML:  DOM解析XML文件 SA
  • underscore.js 学习（二） bijian1013 JavaScriptunderscore
            Array Functions 所有数组函数对参数对象一样适用。1.first   _.first(array, [n])   别名: head, take       返回array的第一个元素，设置了参数n，就
  • plSql介绍 bijian1013 oracle数据库plsql
    /* * PL/SQL 程序设计学习笔记 * 学习plSql介绍.pdf * 时间：2010-10-05 */ --创建DEPT表 create table DEPT ( DEPTNO NUMBER(10), DNAME NVARCHAR2(255), LOC NVARCHAR2(255) ) delete dept; select
  • 【Nginx一】Nginx安装与总体介绍 bit1129 nginx
    启动、停止、重新加载Nginx nginx 启动Nginx服务器，不需要任何参数u nginx -s stop 快速(强制)关系Nginx服务器 nginx -s quit 优雅的关闭Nginx服务器 nginx -s reload 重新加载Nginx服务器的配置文件 nginx -s reopen 重新打开Nginx日志文件  
  • spring mvc开发中浏览器兼容的奇怪问题 bitray jqueryAjaxspringMVC浏览器上传文件
        最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件.     在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer
  • Lua的io库函数列表 ronin47 lua io
    1、io表调用方式：使用io表，io.open将返回指定文件的描述，并且所有的操作将围绕这个文件描述 　　io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr 　　2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄 　　多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil
  • java-26-左旋转字符串 bylijinnan java
    public class LeftRotateString { /** * Q 26 左旋转字符串 * 题目：定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部。 * 如把字符串abcdef左旋转2位得到字符串cdefab。 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n)，辅助内存为O(1)。 */ pu
  • 《vi中的替换艺术》-linux命令五分钟系列之十一 cfyme linux命令
    vi方面的内容不知道分类到哪里好，就放到《Linux命令五分钟系列》里吧！ 今天编程，关于栈的一个小例子，其间我需要把”S.”替换为”S->”(替换不包括双引号)。 其实这个不难，不过我觉得应该总结一下vi里的替换技术了，以备以后查阅。   1 所有替换方案都要在冒号“:”状态下书写。 2 如果想将abc替换为xyz，那么就这样 :s/abc/xyz/ 不过要特别
  • [轨道与计算]新的并行计算架构 comsci 并行计算
         我在进行流程引擎循环反馈试验的过程中，发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段，而整个流程中又充满着很多并行路由，每个并行路由中又包含着一些并行节点，那么当整个流程图开始循环反馈过程的时候，这个流程图的运行过程是否变成一个并行计算的架构呢？      
  • 重复执行某段代码 dai_lm android
    用handler就可以了 private Handler handler = new Handler(); private Runnable runnable = new Runnable() { public void run() { update(); handler.postDelayed(this, 5000); } }; 开始计时 h
  • Java实现堆栈（list实现） datageek 数据结构——堆栈
    public interface IStack<T> { //元素出栈，并返回出栈元素 public T pop(); //元素入栈 public void push(T element); //获取栈顶元素 public T peek(); //判断栈是否为空 public boolean isEmpty
  • 四大备份MySql数据库方法及可能遇到的问题 dcj3sjt126com DBbackup
    一：通过备份王等软件进行备份前台进不去？ 用备份王等软件进行备份是大多老站长的选择，这种方法方便快捷，只要上传备份软件到空间一步步操作就可以，但是许多刚接触备份王软件的客用户来说还原后会出现一个问题：因为新老空间数据库用户名和密码不统一，网站文件打包过来后因没有修改连接文件，还原数据库是好了，可是前台会提示数据库连接错误，网站从而出现打不开的情况。 解决方法：学会修改网站配置文件，大多是由co
  • github做webhooks：[1]钩子触发是否成功测试 dcj3sjt126com githubgitwebhook
    转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html github和svn一样有钩子的功能，而且更加强大。例如我做的是最常见的push操作触发的钩子操作，则每次更新之后的钩子操作记录都会在github的控制板可以看到！ 工具/原料 github 方法/步骤
  • ">的作用" target="_blank">JSP中的作用 蕃薯耀
    JSP中<base href="<%=basePath%>">的作用 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  • linux下SAMBA服务安装与配置 hanqunfeng linux
    局域网使用的文件共享服务。 一.安装包： rpm -qa | grep samba samba-3.6.9-151.el6.x86_64 samba-common-3.6.9-151.el6.x86_64 samba-winbind-3.6.9-151.el6.x86_64 samba-client-3.6.9-151.el6.x86_64 samba-winbind-clients
  • guava cache IXHONG cache
    缓存，在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说，cache 就是为了提升系统性能而开辟的一块内存空间。 　　缓存的主要作用是暂时在内存中保存业务系统的数据处理结果，并且等待下次访问使用。在日常开发的很多场合，由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时，当我们发现我们的系统这个数据请求量很大的时候，频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的
  • Query的开始--全局变量,noconflict和兼容各种js的初始化方法 kvhur JavaScriptjquerycss
    这个是整个jQuery代码的开始，里面包含了对不同环境的js进行的处理，例如普通环境，Nodejs，和requiredJs的处理方法。 还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解  完整资源： http://www.gbtags.com/gb/share/5640.htm jQuery 源码：   (
  • 美国人的福利和中国人的储蓄 nannan408
       今天看了篇文章，震动很大，说的是美国的福利。    美国医院的无偿入院真的是个好措施。小小的改善，对于社会是大大的信心。小孩，税费等，政府不收反补，真的体现了人文主义。    美国这么高的社会保障会不会使人变懒？答案是否定的。正因为政府解决了后顾之忧，人们才得以倾尽精力去做一些有创造力，更造福社会的事情，这竟成了美国社会思想、人
  • N阶行列式计算(JAVA) qiuwanchi N阶行列式计算
    package gaodai; import java.util.List; /** * N阶行列式计算 * @author 邱万迟 * */ public class DeterminantCalculation { public DeterminantCalculation(List<List<Double>> determina
  • C语言算法之打渔晒网问题 qiufeihu c算法
    如果一个渔夫从2011年1月1日开始每三天打一次渔，两天晒一次网，编程实现当输入2011年1月1日以后任意一天，输出该渔夫是在打渔还是在晒网。 代码如下：   #include <stdio.h> int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/ { if((a%4 == 0 && a%100 != 0
  • XML中DOCTYPE字段的解析 wyzuomumu xml
    DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL.   私有DTD <!DOCTYPErootSYST
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他