js jq的简单使用

###JavaScript

• 负责给页面添加动态效果
  ###语言特点:

1. 属于脚本语言,不需要编译 由浏览器解析执行
2. 属于弱类型语言
3. 基于面向对象
4. 安全性高: js语言只能访问浏览器内部数据,不能访问浏览器以外的数据。
5. 交互性高: js语言可以直接嵌入到html页面中,可以直接在页面中和用户进行交互.
   ###如何在html页面中引入JavaScript语言

• 内联: 在标签的事件属性中添加js代码,当事件触发时执行.

    <input type="button" value="内联按钮" 
    	onclick="alert('内联js代码触发!')">  
  

• 内部: 在html页面的任意位置添加script标签,标签体内写js代码,当加载页面时执行.

    <script type="text/javascript">
    	alert("内部js代码触发!");
    </script>
  

• 外部: 在单独的js文件中写js代码,在html页面中通过script标签的src属性引入

    <script type="text/javascript"
           src="first.js"></script>
  

###JavaScript语法

• 数据类型 变量 运算符 语句 方法 面向对象
  ###数据类型
• JS语言中只有对象类型
• 常见的对象类型:
  1. 数值: number 相当于Java中的所有数值类型总和
  2. 字符串: string JS中使用单引号或双引号修饰字符串
  3. 布尔值: boolean true/false
  4. 未定义: undefined 当变量只声明不赋值时为未定义类型
  5. 自定义: object Person/Student/Hero
     ###变量的声明和赋值
• JS语言属于弱类型的语言
• Java: int x = 10; String s = “小明”; Person p = new Person();
• JS: var x = 10; var s = “小梦”; var b = true; var p = new Person();
• var和let的区别: var声明的是全局变量,let声明的是局部变量(后添加的,有些程序员一直使用的就是var)

###运算符 + - * / % > < >= <= = == !=

• 和=, ==先统一类型再比较值是否相等, ===先比较类型如果类型统一再比较值 “66”===66
• 除法运算: JS中会根据结果自动转换整数和小数
  Java: int x = 5; int y = 2; x/y=2;
  JS: var x = 5; var y=2; x/y=2.5;
  var x = 6; var y=2; x/y=3;
• typeof 变量 typeof 66 + 6 = “number”+6 = “number6”;
  ###语句 if else for while switch case
• 用法和Java大体相同
• for循环中的int i改成var i
  ###方法声明
• Java: public void 方法名(参数列表){方法体}
• JS: function 方法名(参数列表){方法体}
• 常见的四种方法:
  1. 无参无返回值
  2. 无参有返回值
  3. 有参无返回值
  4. 有参有返回值
• 三种声明方法的方式:

1. function 方法名(参数列表){方法体}
2. var 方法名 = function(参数列表){方法体}
3. var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

###和页面相关的方法

1. 通过id获取页面中的元素
   abc
   var d = document.getElementById("d1");
2. 获取和修改元素的文本内容
   d.innerText = “啦啦啦”; //修改
   d.innerText //获取
3. 获取和修改文本框的值
   i1.value=“xxx”; //修改
   i1.value //获取
4. 获取和修改元素的html内容
   d1.innerHTML="

   xx

   "; //修改 d1.innerHTML //获取 d1.innerHTML+="

   xxx

   "; //追加

####JavaScript对象分类

1. 内置对象: number,string,boolean等
2. 浏览器相关对象BOM: Browser Object Model(浏览器对象模型)
3. 页面相关对象DOM: Document Object Model(文档对象模型)
   ###BOM浏览器相关对象

• window对象, window的属性称为全局属性,方法称为全局方法,访问时可以省略掉window.

• window里面常见属性

  1. location 位置
     window.location.href 获取和修改浏览器的请求地址
  2. history 历史
     history.length 获取历史页面的数量
     history.back() 返回上一页面
     history.forward() 前往下一页面
  3. screen 屏幕
     screen.width
     screen.height
  4. navigator 导航/帮助
     navigator.userAgent 获取浏览器的版本信息

• window里面常见的方法
  parseInt()/parseFloat() “2.8” 3.14
  isNaN() 判断一个变量是否是NaN(Not a Number)
  alert() 弹出提示框
  confirm() 弹出确认框
  prompt() 弹出文本框
  开启定时器: var timer = setInterval(方法,时间间隔);
  停止定时器: clearInterval(timer);

                          JQ
  

###只执行一次的定时器

• 格式: setTimeout(方法,时间间隔);
  ###事件相关
• 什么是事件: 事件就是系统给提供的一些特定的时间点, 事件分为: 鼠标事件,键盘事件,状态改变事件

1. 鼠标事件:

   • onclick 点击事件
   • onmouseover 鼠标移入事件
   • onmouseout 鼠标移出事件
   • onmousedown 鼠标按下
   • onmouseup 鼠标抬起
   • onmousemove 鼠标移动

2. 键盘事件:

   • onkeydown 键盘按下
   • onkeyup 键盘抬起

3. 状态改变事件:

   • onload 加载完成事件
   • onresize 窗口尺寸改变事件
   • onchange 值改变事件
     ####事件绑定

4. 事件属性

    <input type="button" value="事件属性" 
    	onclick="myfn()">
   

5. 动态绑定(通过js代码添加事件)

    b1.onclick = function(){
    	alert("动态绑定事件触发!");
    }
   

####事件传递(事件冒泡儿)

• 如果在某一个范围有多个事件需要触发,则事件的传递顺序是从最底层往上层传递(类似于气泡从下往上)

###DOM document Object Model 文档对象模型(和页面相关内容)

• 通过id获取元素
  var d = document.getElementById(“abc”);
• 获取和修改元素文本内容
  innerText
• 获取和修改元素HTML内容
  innerHTML
• 获取和修改文本框的值
  input.value

###jQuery

• jq是一个js语言的框架,对原生的js代码进行封装,可以让程序员写的更少但实现的更多.
• 如何引入jq框架, jq就是一个通过js语言所写的框架,实际上就是一个普通的js文件

###js对象和jq对象互相转换

1. js转jq

• var jq = $(js);

2. jq转js jq对象就是一个数组
   var js = jq[0];
   ###选择器
3. 基础选择器

• 标签名选择器 $(“div”)
• id选择器 $("#id")
• class选择器 $(".class")
• 分组选择器 $(“div,#id,.class”)
• 任意元素选择器 $("*")

2. 层级选择器

• $(“div span”) 匹配div里面的所有span
• $(“div>span”) 匹配div里面的所有span子元素
• $(“div+span”) 匹配div的弟弟元素span
• $(“div~span”) 匹配div的弟弟们元素span
• 层级相关的方法
  1. 获取id为abc元素的所有兄弟元素 $("#abc").siblings(“div”)
  2. 获取id为abc元素的哥哥元素 $("#abc").prev(“div”)
  3. 获取id为abc元素的哥哥们元素 $("#abc").prevAll()
  4. 获取id为abc元素的弟弟元素 $("#abc").next()
  5. 获取id为abc元素的弟弟们元素 $("#abc").nextAll()
  6. 获取id为abc元素的父元素 $("#abc").parent()
  7. 获取id为abc元素的子元素们 $("#abc").children()

3. 过滤选择器

• $(“div:first”) 匹配所有div中的第一个
• $(“div:last”) 匹配所有div中的最后一个
• $(“div:even”) 匹配所有div中下标为偶数的div
• $(“div:odd”) 匹配所有div中下标为奇数的div
• $(“div:eq(n)”) 匹配下标为n的div
• $(“div:lt(n)”) 匹配下标小于n的div
• $(“div:gt(n)”) 匹配下标大于n的div
• $(“div:not(.abc)”) 匹配class值不是abc的div

4. 内容选择器

• $(“div:has§”) 匹配包含p子元素的div
• $(“div:empty”) 匹配空的div
• $(“div:parent”) 匹配非空的div
• $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div

5. 可见选择器

• $(“div:visible”) 匹配所有可见的div
• $(“div:hidden”) 匹配所有隐藏的div
• 隐藏显示相关的方法
  1. $("#abc").hide(); 隐藏
  2. $("#abc").show(); 显示
  3. $("#abc").toggle(); 隐藏显示切换

6. 属性选择器

• $(“div[属性名]”) 匹配包含xxx属性的div
• $(“div[属性名=‘值’]”) 匹配xxx=xxx的div
• $(“div[属性名!=‘值’]”) 匹配xxx不等于xxx的div

7. 子元素选择器

• $(“div:first-child”) 匹配是div并且是第一个并且是子元素
• $(“div:last-child”) 匹配是div并且是最后一个并且是子元素
• $(“div:nth-child(n)”) 匹配是div并且是第n个并且是子元素

8. 表单选择器

• $(":input") 匹配表单中的所有控件
• $(":password") 匹配所有密码框
• $(":radio") 匹配所有单选
• $(":checkbox") 匹配所有多选
• $(":checked") 匹配所有选中的单选 多选和下拉选
• $(“input:chekced”) 匹配所有选中的单选和多选
• $(":selected") 匹配选中的下拉选
  ###创建及添加元素

1. 创建元素对象
   var d = $(“
   abc
   ”);
2. 添加元素
   $(“body”).append(d); 最后面
   $(“body”).prepend(d); 最前面
3. 插入元素
   xxx.before(d); 某个元素的前面
   xxx.after(d); 某个元素的后面
4. 删除元素
   xxx.remove();
   ####获取和修改元素的文本内容 等效innerText

• xxx.text(); //获取

• xxx.text(“xxxx”); //修改
  ####获取和修改元素的html内容 等效innerHTML

• xxx.html(); //获取

• xxx.html(“

  xxx

  ”); //修改
  ####获取和修改元素的css样式

• xxx.css(“样式名”,“样式值”); //修改

• xxx.css(“样式名”); //获取
  var w = xxx.css(“width”); 获取元素的css中width的值

• xxx.css({“样式名”:“值”,“样式名”:“值”});
  ####获取和修改元素的属性

• xxx.attr(“属性名”,“值”); //修改

• xxx.attr(“属性名”);
  var c = xxx.attr(“class”); 获取元素的class属性的值

                 Bootstrap
  

class=“row”
class=“col-md-6”
class=“col-md-6”