JavaScript基础
JavaScript
html搭建页面的结构和内容
css用于美化页面
javaScript，给页面添加动态效果和内容的
历史：1995年由网景公司发布 LiveScript同年更名为JavaScript简称JS，和java没啥关系 为了蹭热度。
JS特点
js属于脚本语言，不需要编译，由浏览器解析执行。
js可以嵌入到html代码中
js基于面向对象，属于弱类型语言
JS优点
交互性：可以直接和用户进行交互
安全性：js语言智能访问浏览器内部的数据不能访问浏览器之外内容（电脑磁盘中的各种数据）
如何引入JS代码
在元素的事件中书写js代码
通过Script标签添加js代码
把js代码写在单独的js文件中，通过
JS的数据类型
数值类型(number)
字符串类型(string)
布尔值类型(boolean)
undefined
对象类型
变量的声明及赋值
由于js语言属于弱类型语言声明变量时不需要指定类型 var x = 18; var name="小明"; var isBoy=true; x="abc"; var m; //此时m的类型为undefined值也为undefined
###JS引入方式
1. 在元素的事件中添加js代码
2. 通过
###$
- $等效jQuery $("#id") = jQuery("#id");
###jq对象和js对象互相转换
$("#id") //jq对象
var btn = document.getElementById("id");//js对象
- 把js对象转成jq对象
var jq = $(js);
- 把jq对象转成js对象
var js = jq[0] / jq.get(0);
###选择器
####基本选择器 和css一样
1. 标签名选择 $("div")
2. id选择器 $("#id")
3. 类选择器 $(".class"）
4. 分组选择器 $("#id,.class,div")
5. 任意元素选择器 $("*")
####层级选择器
1. $("div span") 匹配div下所有的span子孙元素
2. $("div>span") 匹配div下的span子元素
3. $("div+span") 匹配div后面相邻的span兄弟元素
4. $("div~span") 匹配div后面所有的span兄弟元素
####层级函数
1. 获取某个元素的所有兄弟元素
$("d1").siblings("div"); //参数可以不写，不写代表所有兄弟
2. 获取某个元素的哥哥元素
$("d1").prev("div")；//参数不写是获取相邻的上一个元素 写的话指定上一个的元素类型
3. 获取某个元素的哥哥们元素
$("d1").prevAll("div")；
4. 获取某个元素的弟弟元素
$("d1").next("div");
5. 获取某个元素的弟弟们元素
$("d1").nextAll("div");
####过滤选择器
1. $("div:first") 匹配所有div中的第一个
2. $("div:last") 匹配所有div中的最后一个
3. $("div:even") 匹配所有div中的偶数位的元素 从0开始
4. $("div:odd") 匹配所有div中的奇数位的元素 从0开始
5. $("div:eq(n)") 匹配所有div中的第n个 从0开始
6. $("div:lt(n)") 匹配所有div中小于n的所有元素 从0开始
7. $("div:gt(n)") 匹配所有div中大于n的所有元素 从0开始
8. $("div:not(.one)") 匹配所有div中 class不等于one的所有div元素
####内容选择器
1. $("div:has(p)") 匹配所有包含p标签的div
2. $("div:empty") 匹配所有空的div
3. $("div:parent") 匹配所有非空的div
4. $("div:contains('abc')") 匹配所有包含文本abc的div
####可见选择器
1. $("div:hidden") 匹配所有隐藏的div
2. $("div:visible") 匹配所有可见的div
- 显示隐藏相关的函数
$("#abc").hide();//隐藏
$("#abc").show();//显示
$("#abc").toggle();// 如果当前隐藏则显示，如果显示则隐藏
####属性选择器
1. $("div[id]") 匹配有id属性的div
2. $("div[id='d1']") 匹配有id=d1属性的div
3. $("div[id!='d1']") 匹配有id不等于d1属性的div
####子元素选择器
1. $("div:nth-child(n)") n从1开始 匹配div中第n个子元素
2. $("div:first-child") 匹配div中第一个子元素
2. $("div:last-child") 匹配div中最后一个子元素
####表单选择器
1. $(":input") 匹配所有 文本框 密码框 单选 复选 。。。
2. $(":password") 匹配所有密码框
3. $(":radio") 匹配所有单选
4. $(":checkbox")匹配所有复选框
5. $(":checked") 匹配所有 单选、复选、下拉选
6. $("input:checked") 匹配所有 单选、复选
7. $(":selected") 匹配所有被选中的下拉选
###文档操作
1. 创建元素
var div = $("
2. 添加元素
父元素.append(div); //添加到最后面
父元素.prepend(div);//添加到最前面
3. 插入元素
兄弟元素.after(div); //插入到兄弟元素的后面
兄弟元素.before(div); //插入到兄弟元素的前面
4. 删除元素
元素对象.remove();
####总结回顾
1. jq js的框架 简化代码
2. jq->js js = jq[0]/jq.get(0)
3. js->jq jq = $(js)
4. 选择器
- 基础选择器 标签名 #id .class , *
- 过滤选择器 div:first div:last div:even div:odd div:eq(0) div:lt() div:gt() div:not(.class)
- 层级选择器 div span div>span div+span div~span
- 函数 siblings() prev() prevAll() next() nextAll()
- 内容选择器 div:contains('aaa') div:empty div:parent div:has(span)
- 可见选择器 div:hidden div:visible 函数 show() hide() toggle()
- 属性选择器 div[id] div[id='a'] div[id!='a']
- 子元素选择器 div:nth-child(1) div:first-child div:last-child
- 表单选择器 ：input :password :radio :checkbox :checked
input:checked :selected
- 创建jq元素对象 var div = $("
");- 添加 父元素.append(div) 父元素.prepend(div)
- 插入 兄弟元素.before(div) 兄弟元素.after(div)
- 删除 元素对象.remove()
###样式
元素对象.css("color","red");
元素对象.css({"color":"red","width":"100px"});
对象.css("color");
###属性
对象.attr("id","a");
对象.attr("id");//取值
###文本
对象.text("lala")；
对象.text();
###html
对象.html("
aaa
");对象.html();
###jq事件相关
- jq中事件名称和js事件名称相比较 就是去掉on
- 页面加载完成事件：
$(function(){
})
$(document).ready(function(
){})
- 事件中获取事件源的方式：
1. 如果是动态绑定事件 this为事件源
2. 非动态绑定 var obj = event.target||evet.srcElement;
3. 非动态绑定时 在元素属性中通过this
- 事件模拟
setTimeout(function(){
//模拟点击事件
$("input").trigger("click");
},3000);
- 事件合并
hover事件相当于 onmouseover+onmouseout