js是什么
js是直译的语言(没有编译的过程) 与java不同,基于对象的语言(没有类的概念),弱语言,内置对象()
变量不辨别类型,能够指向任意数据六类型
`var s=100;
s="abc";
s=ture;......
`
劣势:
良好的交互性
安全性(只在浏览器外部器)
跨平台:
( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台
Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )
数据类型(5大):
1.数据类型(number),所有的数值在底层都是浮点型，然而在解决和显示的过程中会主动的和整型进行转换。例如：2.4+3.6=62字符串类型(string),字符串类型属于根本数据类型，字符串常量能够应用单引号或者应用双引号引起来。3布尔类型(boolean):true和false4undefined类型值只有一个，就是undefined，示意变量未定义5 null类型:示意空值。空的对象。JS中的数组能够存储任意类型的数据,长度是能够被任意扭转的
var arr1 = [];console.log("此处数组的长度为: "+arr1.length ); // 0arr1.length = 5;console.log("此处数组的长度为: "+arr1.length ); // 5arr1[9] = "a";console.log("此处数组的长度为: "+arr1.length ); // 10arr1[99] = "b";console.log("此处数组的长度为: "+arr1.length ); // 100js获取元素
document是一个对象,用于示意以后html网页document.getElementById(id值)通过元素的id值,获取元素对象document.getElementsByTagName( 元素名 ) -- 通过元素名称获取以后文档中的所有指定名称的元素，返回的是一个数组，其中蕴含了所有指定名称的元素document.body -- 获取以后文档中的body元素ele.parentNode -- 获取以后元素的父元素。ele示意以后元素
Js增删改元素
document.createElement( 元素名称 ) -- 依据元素名称创立指定名称的元素，返回的是示意新创建元素的js对象parent.appendChild( child ) -- 通过父元素增加子元素，其中parent示意父元素，child示意子元素parent.removeChild( child )-- 通过父元素删除子元素，其中parent示意父元素，child示意子元素ele.innerHTML= dateStr -- 获取以后元素的html内容(从开始标签到完结标签之间的所有内容)，还能够设置以后元素的html内容(如果元素外部有内容，将会笼罩原有内容)
jQuery简介
轻量,收费开源的js函数库,简化js代码引入jq<script src="js/jquery-1.8.3.js"></script>
文档就绪事件函数:整个html网页都被加载了,最初才加载
<script src="js/jquery-1.8.3.js"></script><script> $(function(){ //1.获取id为demo的h1元素 var h1 = document.getElementById("demo" ); //2.获取h1元素中的内容( innerHTML ) alert( h1.innerHTML ); });</script></head><body> <h1 id="demo">jQuery的引入示例...</h1></body>创立一个元素
var $tab = $("<table></teble") 创立table元素$td.html("Hello TD~~"); 创立td元素, 并为td增加内容$tr.append( $td ); //将td增加到tr元素内//获取指定元素的值 js中:var rows = document.getElementById("rows").value;jq中:trim()去掉头尾空格var id = $("#box1 input[name='id']").val().trim();根本选择器
(1)元素名选择器$("div") -- 选中所有的div元素$("span") -- 选中所有的span元素(2)class/类选择器$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)$("span.s1") -- 选中所有class值为s1的span元素(3)id选择器$("#one") -- 选中id为one的元素(4)多元素选择器$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素层级选择器
$("div span") -- 选中所有div外部的所有span元素$("#one span") -- 选中id为one的元素外部的所有span元素$("#two+span") -- 选中id为two的元素前面紧邻的span兄弟元素$("#two").next("span") -- 选中id为two的元素前面紧邻的span兄弟元素$("#two").prev("span") -- 选中id为two的元素后面紧邻的span兄弟元素$("#two~span") -- 选中id为two的元素前面所有的span兄弟元素$("#two").nextAll("span") -- 选中id为two的元素前面所有的span兄弟元素$("#two").prevAll("span") -- 选中id为two的元素后面所有的span兄弟元素$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素根本过滤选择器
(1) 选中第一个div元素$("div:first")$("div:eq(0)")$("div").eq(0)(2) 选中最初一个div元素$("div:last")$("div:eq(-1)")$("div").eq(-1)(3) 选中第n+1个div元素(n从零开始)$("div:eq(n)")$("div").eq(n)全选或不选
function checkAll(){ //1.获取全选复选框的选中状态( 选中(true)? 没选中(false)? ) var isCheck = $("#all").prop("checked"); //true|false //2.获取所有一般复选框, 将全选框的选中状态设置给所有一般复选框 $("input[type='checkbox'][id!='all']").prop("checked",isCheck);}html元素内容和值的操作
$("div").html() -- 获取所有div中的第一个div的内容$("div").html("xxxx") -- 为所有div设置内容$("div").text() -- 获取所有div中的所有文本内容$("div").text("xxxx") -- 为所有div设置文本内容$("input").val() -- 获取所有input元素中的第一个input元素的value值$("input").val(值) --为所有的input元素设置value值prop一个取,两个赋$("input[type='checkbox']").prop("checked")-- 获取input复选框的选中状态, 返回true示意复选框为选中状态,返回false示意复选框为勾销选中状态$("input[type='checkbox']").prop("checked", true)-- 设置所匹配的复选框元素为选中状态$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成usereach()函数 遍历show() -- 设置元素由暗藏变为显示hide() -- 设置元素由显示变为暗藏toggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为暗藏, 否则切换为显示slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为暗藏，否则切换为显示，切换为显示为下拉状态，暗藏为膨胀状态。为元素绑定点击事件
js的绑定点击事件:<script> function fn(){ alert("input按钮被点击了..."); }</script><body> <input onclick="fn()" type="button" value="点我~!" /></body>//第二种<script> window.onload = function(){ //获取id为btn的元素 var btn = document.getElementById("btn"); btn.onclick = function(){ alert("input按钮被点击了..."); } }</script><body> <input id="btn" type="button" value="点我~!" /></body>jq中事件点击事件<script>$(function(){ //当点击btn按钮时,触发点击事件执行其中的函数 $("#btn").click( function(){ alert("input按钮被点击了..."); });});</script><body> <input id="btn" type="button" value="点我~!" /></body>