js基础内容

基础方法:

prop与attr的区别:
prop:只取得指定属性的value;prop(“checked”,true或者false)决定整体的true或false
attr:是改变指定属性的value

remove与empty:
remove:删除元素本身及其子元素
empty:删除元素的子元素

append与prepend:
.append:尾部添加(保留原来的数据,在基础上添加)
.html:尾部添加(清空原来的数据,再添加元素,替换)
.prepend:头部添加

animate动画
.animate(指定动作{},时间)

//Math.ceil() 向上取整
//Math.floor() 向下取整
查找:
parent寻找父节点
children寻找子节点
find直接找
eq根据同胞查找下标
each循环
next查找同胞元素
siblings获取被选的同胞元素

**

定位:

**
1.相对定位 position:relative,相对之前块级本身移动,但会占本身之前的位置(left right)
2.浏览器窗口定位position:fixed 相对屏幕不移动,应用于网页广告\导航栏(left top right bottom)
3.绝对定位 position:absolute 有层级属性,z-index
(left top bottom right z-index:-99~99)

**

选择器:

**
" "标签选择器
"#"id选择器
"."class选择器
"标签名加条件"伪类选择器
优先级:id>class>标签
执行动作: .attr获取或修改属性
.click设置点击事件
. text获取文本信息
.val获取value值
.prop设置属性的值,checked已选中;例子:

input type=“checkbox” name=“aihao” οnclick=“selectALL(this)” />全选
function selectALL(obj){
$("input[name{=}^{\prime }aiha{o}^{\prime }]").prop("checked",$(obj).prop(“checked”)) }

**

jquery添加和删除元素

**
1.append()在被选元素的尾部插入内容与html()添加元素的区别在于,append不会删除直接添加,html是清空之前的之后在添加
2.prepend()在被选元素的头部插入内容

例子:

	<table border="1" width="100%">
		<thead>
			<th>id</th>
			<th>姓名</th>
		</thead>
		<tbody>
			
		</tbody>
	</table>
</body>
<script type="text/javascript">
	var arr = [{id:"1",name:"张三1"},{id:"2",name:"张三2"},{id:"3",name:"张三3"}]
	var arr1 = [{id:"1",name:"李四1"},{id:"2",name:"李四2"},{id:"3",name:"李四3"}]
	$(function(){
		for (var i=0;i<arr.length;i++) {
			$("tbody").append("<tr><td>"+arr[i].id+"<td><td>"+arr[i].name+"<td/><tr/>")
		}
	})
	$("button").click(function(){
		$("tbody").empty();
		for(var i=0;i<arr1.length;i++){
			$("tbody").append("<tr><td>"+arr1[i].id+"<td><td>"+arr1[i].name+"<td/><tr/>")
		}
	})
</script>

**

删除元素:

**
1.remove,删除元素本身和其子元素
2.empty,删除元素的子元素

例子:

	<div style="width: 300px;height: 400px;border: 2px solid red;">
		<p>1111</p>
		<p>2222</p>
	</div>
	<button id="one">删除元素</button>
	<button id="two">删除元素的子元素</button>
</body>

script:
$(function(){
//删除元素本身和子元素
$("#one").click(function(){
$(“div”).remove();
})
//删除元素的子元素
$("#two").click(function(){
$(“div”).empty();
})
})

**

JS修改CSS样式获取CSS属性

**
1 .css("") 获取属性
2 .css("","")修改样式
3 .css({“color”:“red”,“font-size”:“40px”}) 修改多个样式

**

jquery遍历

**
eq是类似数组的东西,根据索引寻找元素,从0开始
eq()不能单独使用,//eq()需结合选择器一起使用
父节点parent()
子节点children()

1.通过子元素查找父节点,parent
2.通过父元素查找子节点,children
3.查找所有节点,find()中放选择器
4.查找同胞元素节点,next
5.查找条件下的第一个元素,first
6.查找条件下的最后一个元素,last
7.获取同胞元素,siblings

例子:
html:

<div>
		第一层
		<div>
			第二层
			<p>1111111111</p>
			<p>2222222222</p>
		</div>
	</div>
	<button>通过子元素找父元素</button>
	<button>通过父元素找子元素</button>
	<button>找到所有</button>
	<button>next</button>
	<button>first</button>
	<button>last</button>
	<button>siblings</button>
</body>

js:

$(function(){
	//通过子元素找父元素
	$("button").eq(0).click(function(){
		console.log($("p").eq(0).parent().text()) 
	})
	//通过父元素找子元素
	$("button").eq(1).click(function(){
		console.log($("div").eq(0).children().children().text()) 
	})	
	  //查找所有元素	
	$("button").eq(2).click(function(){
		console.log($("div").eq(0).find("p").eq(0).text()) 
	})
	//查找同胞元素
	$("button").eq(3).click(function(){
		console.log($("div").eq(0).find("p").eq(0).next().text()); 
	})
	//查找第一个元素
	$("button").eq(3).click(function() {
		console.log($("div").eq(0).find("p").eq(0).first().text());
	})
	//查找最后一个元素
	$("button").eq(3).click(function() {
		console.log($("div").eq(0).find("p").eq(0).last().text());
	})	
	$("button").eq(3).click(function() {
		console.log($("div").eq(0).siblings.eq(0).last().text());
	})				
})

**

Jquery 动画:

**
1 .animate()参数:移动位置,时间
例子: $(“div”).animate({left:“200px”},1000) 所选区域在1秒内向左移动200个像素单位

**

js中对数组操作的方法:

**
1 .shift(),用于把数组中的第一个元素从原数组删除,返回值为被删除的元素
2 .unshift(),用于在数组开头新添加一个元素,返回值为新数组的长度
3 .push(),向数组的末尾添加一个或多个元素,并返回新数组的长度
4 .indexof(),返回指定字符串在字符串中首次出现的位置;例子:arr.indexof(“b”),表面b在arr中首次出现的位置
5 .pop(),删除字符串中最后一个元素
6 .join(),用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。例子:arr.join(" "),原字符串之间用空格隔开了
7 .trim(),去掉字符串两头的空格
8 .setInterval(函数,时间),设置计时器;clearInterval,停止计时器;setTimeout(函数体内容,时间)只执行一次
9 .innerhtml包含标签,innertext只包含文本
10 .toUpperCase()将文本转化为大写, .toLowerCase将文本转化为小写
11 .replace(需要的,不需要的),将需要的替换掉不需要的
12 .charAt(3),返回下标的字符
13 .concat(),返回新数组,括号里填写新数组后添加的内容
14 .search(“char”),返回数组第一个字母所在的索引
15 .substring(1,2),返回原字符串中第一个到第二个字符串
.substr(5),返回原字符串中第5到结束的子字符串
16 .slice(1,3),方法截取开始索引和截止索引(不包含截止索引的元素)的数组元素)与substr类似
17 Math.max/min .apply(Math,数组名),返回数组中最大或最小的元素值
18 .sort(),对数组进行升序排列
19 .reverse(),对数组进行翻转
20 .splice(1,2) ,是删除数组中从索引位置1开始删除，删除2条
splice(x,y,v)
* x 是要添加到数组的索引位置
* y 如果是0 ，表示不做删除操作
* v 要添加的元素
从数组元素索引位置为1开始删除，一共删除1条，然后添加马六到索引位置1的位置
arr.splice(1,1,“马六”);
splice(0,2) ,删除前两个元素
21 .lastindexof(字符),找出指定字符在字符串最后一次出现的位置,返回值为出现位置的索引

**

js中的一些事件:

**

该方法在页面加载完成后立即执行:
window.οnlοad=function({
})
**

键盘事件:

**
1 .οnkeydοwn=function({
键盘按下,方法体
})
2 .onkeyup = function({
键盘松开,方法体
})
3 .
每个键盘按键都是不同的编码数字,回车是13
//onkeypress 键盘按下和释放事件合二为一
window.οnkeypress=function(e){
console.log(e.keyCode)
if(e.keyCode==13){
alert(“回车登录”);
}
}
**

鼠标事件:

**

1
//onmouseover鼠标滑过事件
document.getElementById(“one”).οnmοuseοver=function(){
this.style.color=“red”;
}

2
//onmouseout鼠标滑开事件
document.getElementById(“one”).οnmοuseοut=function(){
this.style.color="";
}
3
//onmousedown鼠标按下触发的事件 document.getElementById(“one”).οnmοusedοwn=function(){
this.style.color=“blue”;
}
4
//onmousedown鼠标释放触发的事件 document.getElementById(“one”).οnmοuseup=function(){
this.style.color=“green”;
}

淡入淡出事件:

1.fadeIn(时间)淡入
.fadeIn(时间,function(){
淡入过程中的行为
})
2.fadeOut(时间)淡出
3.fadeToggle(时间)淡入和淡出都执行

滑动事件:

1.slideDown(时间)向下滑动
2.slideUp(时间)向上滑动
3.slideToggle(时间)向上和向下滑动都执行

**

浏览器滚动:

**
.scroll()不添加参数.可以加函数

**

选择器

**
1 id选择器("#id")
2 class选择器(".class")
3 元素选择器(“div”)
4 伪类选择器(“p[name=‘myname’]”)
5 .each()循环 .eq()同类针对有下标的选择,一般与其他选择器共同使用

**

伪类选择器同时使用:

**
例子:奇数行鼠标滑动和偶数行鼠标滑动改变不同的背景颜色

< style>

		tr:hover:nth-child(odd){
			background-color: #A99D9D;
        }
        tr:hover:nth-child(even){
			background-color: aqua;
        }
	</ style>

Data指定时间:

var myDate=new Date();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
var mydate=myDate.getDate();
var hour=myDate.getHours()
var minu=myDate.getMinutes()
var second=myDate.getSeconds()
var week=myDate.getDay()
var myTime=year+"年"+month+"月"+mydate+"日"+hour+"时"+minu+"分"+second+"秒"+"今天是星期"+week;