- 1、js 中 字符串 可以 与数字 进行加减 预算（原理：将数字转化为字符串进行拼接操作）
一、javascript的基本知识：
1、js 与 jquery的关系：
jquery 只是 js 方便操作 html节点的 库。
2、DOM对象、DOM节点、jquery对象概念：
（1）DOM对象：
通过js的语法将 html标签转化为 树状 节点的对象 叫做 DOM对象。
var objDOM=document.getElementsByTagName("p"); // 变量 objDOM 就是一个 DOM 对象（2）jquery 对象：
通过jquery的语法 将 html标签转化 生成的 对象。
var objJquery=$("[class=content1]:odd");3、jquery 的数据类型、条件循环语句：
jquery只是java的一个库，因此使用时首先需要引入库：
<head>
<script type="text/javascript" src="jquery的存储路径"></script> // 导入jquery 库
<script type="text/javascript"> // jquery 内嵌式 代码
var a=1; // js代码句末用 ； 结尾
var b="2";
alert(a); // 警报弹出窗口
alert(b);
</script>
</head>（1）弹出警报窗口：alert（）
var a=1;
alert(a);（2）控制台显示：console.log( )
var tag="aaa";
console.log(tag);（3）js的bool值：true false ---------- 首字母不大写
（4）js数据类型：array 数组
var array_1=[1,2,3,"1","b"];（5）js数据类型：JSON对象（类似python的字典）：
var tag={'name':'liu','age':18};
console.log(tag.age,tag['age']); ------------- 两种方式均可取值 ，第二种方法 key 需要加 “ ”（6）js 的条件判断：
if(条件){
}esle if(条件){
}else{
}（7）js 的循环结构：
for(初始值；条件；步距){
}for(var a=1;a<9;a++){
alert(111);
}二、jquery 控制css：
1、jquery的外链式：
<head>
<script type="text/javascript" src="jquery的存储路径"></script> // 导入jquery 库
<script type="text/javascript" src="js的储存路径"></script> // jquery 外链式 代码(注意用的是 src 不是 href )
</head>2、jquery 代码的解析顺序设置：
3、jquery的语法结构：
$("input[type=text]").css("background","red");
$("input[type=text]").addClass("content"); // content 是css中定义的一个 类名。4、jquery控制 css 样式：
- jquery的方法支持连写：
$("h2").css("background-color","#CCFFFF").next().css("display","block"); // 语法 支持 连写（1）.css方法 ： ---------- 设置 css 属性值 或 取 css 属性值
1）：为元素设置CSS样式的值
<head>
<script type="text/javascript" src="jquery的存储路径"></script> // 导入jquery 库
<script type="text/javascript"> // jquery 内嵌式 代码
$(function(){ // 设置 jquery 代码最后解析
$("div.content").css("color","red"); // 更改 类名为 content的div 的 文本颜色。
$("div.content").css({"color":"red","font-size":"30px"}); // 同时赋值多组更改--------注意 “ ”不要忘记。
$("div.content").css({"color":"red","border":"3px solid red"}); // 一个属性更改多个值时用 空格 隔开。
$("div.content").css("color"); ------- 如果后面不加属性值的时候表示 取值
})
</script>
</head>2）：取标签的 css 的属性的值：
一定要注意 与 attr（）、 prop（） 的区别 ；区分 标签 css 属性 与 标签属性。
三、jquery中常见的内置方法：
（1）.eq()、.children()、.partent()、.partents()：
① .eq() ：
eq（）里面是 索引值 ，从0开始：
$("li").eq(2).css("display"); ------- 等于
$("li").lt(2).css("display"); ------- 小于
$("li").gt(2).css("display"); ------- 大于② .children() 、 .parent()
.children() -------------- 标签所有子元素 ，不包含 子孙级；.parent() -------------- 标签的父元素 （1个）
.parents() ------------- 标签所有的父元素
$("li").children().eq(2).css("display");获得元素其后紧邻的同辈元素
$("h2").css("background-color","#CCFFFF").next().css("display","block"); // 语法 支持 连写（3）.addClass()：
注意：注意addClass（）是添加CSS 类属性，attr() 是获取和设置 标签的属性。
作用 ：添加 某类名的css样式/属性 -------------------------- 实际 上 添加了一个类属性。
特点：动态添加某个 类的css样式到指定 标签中，它的执行顺序是按照 添加后 css的权重 来执行的，依次类样式的 最好放在css样式的后面。
<script type="text/javascript">
$(function(){
$(".add").click(function(){
// addClass 给选中的元素添加class 可添加多个,使用空格隔开
$(".content").addClass("pro_mode pro_mode1 pro_mode2 pro_mode3");
})
</script>
（4） .removeClass()：清除 类名的css样式/属性
<script type="text/javascript">
$(function(){
$(".remove").click(function(){
// removeClass 给选中的元素移除class 可移除多个, 留空移除全部
$(".content").removeClass("pro_mode1 pro_mode2 pro_mode3");
$(".content").removeClass(); ---------------- 留空移除全部
})
})
</script>(5） .click(function(){ }) 点击事件
<script type="text/javascript">
$(function(){
$(".remove").click(function(){ ---------------- 点击事件
$(".content").removeClass(); ---------------- 留空移除全部
})
})
</script>（6）取标签的内容：.html() ------------ 取标签内容 或者 赋值标签内容
$(".nowSize").html(1111) ----------- 将 1111 赋值给 该标签内容中
$(".nowSize").html() ----------- 获得此标签的内容（7）根据属性名获取和设置标签的属性值：.attr()
注意 .attr() 与 prop（）的区别
它只能获取一个属性值
//attr 方法,获取或者设置 标签的属性
console.log($("li").attr("data-value")) //获取元素属性名为"data-value" 的一个属性值（只获取一个）
$("li").attr("data-value","12345"); // 修改属性值 ----------- 修改所有
$("input").attr("type","checkbox")（8）prop（）查看与设置 表单（<input>）的 选中状态
用途：常用于获取设置选中状态，结果为bool值 ---------------- 例如 ：单选 或多选 表单时 判断选中 状态
代码：
// prop 获取设置选中状态
$("input").prop("checked",true); //设置都选中
console.log($("input").prop("checked")) 获取元素是否被选中,如果选中为true 否为false
1、 设置选中状态
($("input").prop("checked",true) ----------------- 改变按钮的选中状态
2、 将按钮改变为不可点击：
$(".btn_next").attr("disabled","disabled")（9）删除标签的属性：removeAttr()
// removeAttr 移除元素的某一些属性
$("li").removeAttr("data-value"); // 删除所有四、jquery选择器：
1、普通的css 选择器：
//并集选择器
$(".action,.choice,.last").css("font-size","30px");
// 交集选择器
$("p.action").css("font-size","30px");
//全局选择器
$("*").css({"margin":0,"padding":0})
//层次选择器
//后代选择器
$(".all li").css("color","white");
//子选择器
$(".all > li").css("color","white");
//相邻元素选择器
$(".choice+ul").css("color","red");
//同辈元素选择器
$(".choice~ul").css("color","red");2、属性选择器：
通过标签的属性 ，一定要 与 css 中的属性区分开
实例：
3、基本过滤选择器：
索引为偶数或奇数的元素：
根据索引的值选取元素
3、去除某个选择器：
通过元素显示状态来选取元素：
5、选择器中 转义字符 \ 的应用：
五、jquery中的事件：
注意： js 事件 中执行 的是 匿名函数 的内部 ，因此不要忘记 写 function( ){ }
1、常见鼠标事件：
$("li").mouseover(function(){
$(this).addClass("active")
var this_index=$(this).index() // index() index方法,查找当前元素的下标
$(".content > div:eq("+this_index+")").addClass("show")
// 因为this_index 这个变量在双引号中无法解析,所以使用拼接的形式
}).mouseout(function(){
$(this).removeClass('active')
var this_index=$(this).index()// 或者使用 .eq() 方法 例 $("li:eq(1)") 等同于 $("li").eq(1)
$(".content > div").eq(this_index).removeClass("show")
})2、键盘事件：
------------------ 动态展示 表单的 值
$("[name=username]").keyup(function(){
var value=$(this).val() //使用 val() 方法 val() 用于获取 表单元素的value值
console.log(value)
$("p").html(value)
})（2）键盘事件中的keycode：
$(function(){
$("[name=username]").keyup(function(event){
// event.keyCode 按下按键的时候每个按键对应的code ,
console.log(event.keyCode)
if(event.keyCode==27){
$("[name=username]").val("")
}else if(event.keyCode==13){
alert("确认要提交吗?")
}
})
})3、表单事件------ 焦点事件：
$(function(){
//focus 获取焦点事件 blur 失去焦点事件
$("input").focus(function(){
$(this).next().css("display","inline")
}).blur(function(){
$(this).next().css("display",'none')
})
})4、悬浮事件：hover -------- 用法与 mouseover不同：
区别 与 mouseover 的用法：
5、绑定事件与阻止事件冒泡：on
// 使用 on 可以为 新添加的元素也绑定事件 $("要绑定元素的上级(一般为父级)").on("事件","触发事件的元素",function(){})
$("body").on("mouseover","li",function(event){
console.log(123)
$(this).css("background","#ddd")
event.stopPropagation() //阻止事件冒泡
}).on("mouseout","li",function(){
$(this).css("background","none")
})
六、jquery的动画效果：
注意： 以下 特效都是 控制元素 显示与隐藏 的动画
1、显示与隐藏元素------- show() 、 hide()
show（）、hide（） 里面可以添加参数
2、切换元素的可见状态：toggle（）
toggle（） 参数与 show（）相同
3、根据透明度 淡入淡出 显示与隐藏元素：
4、根据元素宽度改变 显示与隐藏 元素：
七、js中的正则表示式、. test() 的用法：
正则表达式：
注意：js 中 正则表达式需要 在两端加 / /
(1) 正则中test的用法：
function passWord_func(){
var passWord_match=/^[a-zA-Z0-9]{4,10}$/; // 正则表达式两端 加 / /
var passWord=$("[name=passWord]").val();
if(passWord_match.test(passWord)){
$("[name=passWord]").next().html("√").addClass("pass")
return true
}else{
$("[name=passWord]").next().html("×").addClass("error")
return false
}
七、部分数据流后台交互 ajax ：
注意：区分 表单 form 提交 与 ajax 加载的区别，form 提交需要 整个网页刷新 ，而 ajax 是局部数据流交互，不需要刷新整个网页。
特点：通常ajax 是jquery 的内置方法，因此 使用 ajax 前需要引入jquery库。
<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">
$("div.button").children().click(function(){
alert("是否确认加载数据")
// ajax 执行的 参数 , url type dataType 通常是必须有的
$.ajax( -------------- $ 相当于 jquery ,即调用 jquery中的方法
{ --------------- 传入的数据 是一个 js的对象,不过 key 不需要加 " "
url:"./json数据文件/man_money.json", ---------- 交互后台请求的地址
type:"get", ---------- 请求方式
data:{}, ---------- 请求时传入后台的参数
dataType:"json", ---------- 接收后台返回数据后的处理方式,普通文本用 "text"
success:function(data){ ------------ 请求成功后 执行函数 , data是 后台返回的形参
server_data=data;
console.log(server_data);
}
)
})
</script>
