js是什么
js是直译的语言(没有编译的过程) 与java不同,基于对象的语言(没有类的概念),弱语言,内置对象()
变量不区分类型,可以指向任意数据六类型
`var s=100;
s="abc";
s=ture;......
`
优势:
良好的交互性
安全性(只在浏览器内部器)
跨平台:
( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台
Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )
数据类型(5大):
1.数据类型(number),所有的数值在底层都是浮点型，但是在处理和显示的过程中会自动的和整型进行转换。例如：2.4+3.6=6
2字符串类型(string),字符串类型属于基本数据类型，字符串常量可以使用单引号或者使用双引号引起来。
3布尔类型(boolean):true和false
4undefined类型值只有一个，就是undefined，表示变量未定义
5 null类型:表示空值。空的对象。
JS中的数组可以存储任意类型的数据,长度是可以被任意改变的
var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[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属性值就会变成user
each()函数 遍历
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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。