本文系統的整理了javascript的語法,知識點很全,較基礎,在學習的時候可以作為參考,複習也很系統,不用去翻看書籍了,書籍的知識點很散亂,翻看完很浪費時間,如果不嫌棄可以收藏下來以防備忘,能對大家有幫助就是我繼續寫文章的動力,我也很樂意與大家分享我的知識。
1-1學習JavaScript的起點就是處理網頁,我們先學習如何使用DOM來進行簡單操作。
<body> <p id="p1">我是第一段文字</p> <p id="p2">我是第二段文字</p> <script type="text/javascript"> document.write("hello"); # 输出文本 document.getElementById("p1").style.color="blue"; # 第一段文字变蓝色了 </script> </body>
1-2 內部引用
1-3 外部引用
1-4 一般放在網頁的head或body部分:
放在
部分最常用的方式是在頁面中head部分放置<script>元素,瀏覽器解析head部分就會執行這個程式碼,然後才解析頁面的其餘部分。 </script>
放在
部分JavaScript程式碼在網頁讀取到該語句的時候就會執行。果實是透過事件呼叫執行的function那麼對位置沒什麼要求的。
1-5 JavaScript語句是發給瀏覽器的指令。
1-6 註解 // 或 /* */
1-7 var 變數名稱區分大小寫
1-8 if語句
if(条件) 注意:没有分号哦。 { 条件成立时执行的代码 } else { 条件不成立时执行的代码 }
1-9 函數
function add2(){ var sum = 3 + 2; alert(sum); }
呼叫: add2()
##1-10 字串方法2-2alert
confirm
#confirm 訊息對話方塊通常用於允許使用者做選擇的動作,如: 「你對嗎?」等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。
var mymessage=confirm("你喜欢JavaScript吗?");2-4 promte彈出訊息對話框,通常用於
詢問一些需要與使用者互動的資訊。彈出訊息對話框(包含一個確定按鈕、取消按鈕與一個文字輸入框)。
prompt(str1, str2);參數:
2-5
開啟新視窗window.open([URL], [窗口名称], [参数字符串])
參數:
#URL:可選參數,在視窗中要顯示網頁的網址或路徑。如果省略這個參數,或者它的值是空字串,那麼視窗就不會顯示任何文件。
視窗名稱:可選參數,被開啟視窗的名稱。
_blank:以新視窗顯示目標網頁
_self:目前視窗顯示目標網頁
_top:上方視窗中框架網頁中以上方視窗顯示目標網頁
參數字串:可選參數,設定視窗參數,各參數以逗號隔開。
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes') </script>2-6 關閉視窗
#window.close(); //关闭本窗口 或 window.close(); //关闭本窗口
關閉
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象,存储在变量mywin中
mywin.close();
</script>
注意:上面程式碼在打開新窗口的同時,關閉該窗口,看不到被打開的窗口。
2-7 略
3-1
认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
元素节点:上图中、
、等都是元素节点,即标签。
文本节点:向用户展示的内容,如
属性节点:元素属性,如标签的链接属性href="http://www.imooc.com"
3-2 通过ID获取元素
document.getElementById(“id”)
该示例打印并非理想结果,是因为从浏览器读取html文件来说,是从上到下读取的:如果将JavaScript放在head中,HTML文件读取时会先读取并执行JavaScript的内容,然后才会执行body标签内的内容;如果放在body标签内,HTML文件读取时,会先读取在JavaScript前面的内容,再读取JavaScript的内容;
从上面这个原理与课程结合进行分析:
结果为null是因为,JavaScript没有找到id名为“con”的标签,所以返回null。
结果为[object HTMLParagraphElement],则说明JavaScript找到了id名为“con”的标签,以对象的形式返回该标签
但是我们发现在HTML中明明存在id=“con”的标签,这又是怎么回事?这是因为,前面说的浏览器读取HTML文件,是从上到下读取的:
如果将JavaScript放在id=“con”的标签之前,这就导致了浏览器在读取HTML文件时,JavaScript先读取,读取完JavaScript后,才开始读取到id=“con”的标签,这就是说JavaScript读取时是没有读取到id=‘con’的标签,只能返回null,表示没有读取到该标签
如果将JavaScript放在id=“con”的标签之后,在浏览器读取HTML文件时,先读取到了id="con"的标签,才读取JavaScript,这时由于id="con"的标签名存在,JavaScript可以发现,所以以对对象的形式([object HTMLParagraphElement])返回该标签
要返回正确的结果应该在前后加双引号或者在mychar变量后加上.innerHTML
3-3 innerHTML属性
获取元素内容
var mychar= document.getElementById("con"); document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容 mychar.innerHTML = 'Hello world!' document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
3-4 改变HTML样式
Object.style.property=new style; //Object是获取的元素对象
3-5 显示和隐藏
Object.style.display = value
3-6 控制class属性元素
object.className = classname 注意中间有个大写的N
2-2
变量取名规则:
必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。如下:
变量名区分大小写,如:A与a是两个不同变量。
不允许使用JavaScript关键字和保留字做变量名。
2-9 “&&”表示and操作符
2-10 "||" 或
2-11 "!" 否
2-12 操作符之间的优先级(高到低):
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。
3-1 数组
3-2
var myarray= new Array(8); //创建数组,存储8个数据。
注意:
1.创建的新数组是空数组,没有值,如输出,则显示undefined。
2.虽然创建数组时,指定了长度,但实际上数组都是变长的,也就是说即使指定了长度为8,仍然可以将元素存储在规定长度以外。
3-3 添加元素
只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素。
myarray[5]=88; //使用一个新索引,为数组增加一个新元素
3-6 length属性
myarray.length; //获得数组myarray的长度
相关推荐:
以上是【javascript學習】js語法基礎大全的詳細內容。更多資訊請關注PHP中文網其他相關文章!