前端之初识javascript和jQuery

什么是BOM和DOM？

• BOM：Browser Object Model
• DOM: Document Object Model

BOM操作

操作浏览器，需要调用window对象，它是所有浏览器都支持的对象，表示的就是浏览器窗口

window对象可以通过点调用子对象

• window.navigator

  navigator.appName　　// Web浏览器全称
  navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
  navigator.userAgent　　// 客户端绝大部分信息
  navigator.platform　　　// 浏览器运行所在的操作系统
  

• window.screen

• window.history

  history.forward()  // 前进一页
  history.back()  // 后退一页
  

• window.location(重点)

  location.href  //获取URL
  location.href="URL" // 跳转到指定页面
  location.reload() 重新加载页面
  

• 弹出框

  警告框(alert)
  确认框(confirm)
  提示框(prompt)
  

• 计时器相关(重点)

  • setTimeout与clearTimeout(设置单次定时触发，清除)

  • setInterval与clearInterval(循环触发，清除)

    function f1() {
        alert(123);
    }
    
    function clear() {
        var t = setInterval(f1,3000);
        function inner() {
            clearInterval(t);
        }
        setTimeout(inner,9000)
    }
    clear();
    

DOM操作

通过JS代码操作html页面，实现相应效果

要想操作html页面，实现相应动态效果，第一步还是得先解决查找标签的事情

查找标签

直接查找

document.getElementById
document.getElementsByClassName
document.getElementsByTagName

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

js代码在书写时，一定要保证在页面html文件全部加载完毕后才能正常执行，否则报错。两种解决方式

• window.onload = function(里面写js代码)title标签内部
• js写在html文档最下方

节点操作

• 1.创建节点，2.添加自定义属性，3.添加固有属性，4.添加到DOM树中浏览器展示

  // appendChild 直接尾部添加
  
  // 创建标签
  var imgEle = document.createElement('img');
  // 设置自定义属性
  imgEle.setAttribute('id','i1')
  // 设置固有的属性
  imgEle.src = 'longzhu.png'
  // 添加到DOM树中，让浏览器展示出来
  var d1Ele = document.getElementById('d1')
  d1Ele.appendChild(imgEle)
  

• 1.创建节点，2.添加固有属性和标签文本值，3.指定位置添加标签

  // insertBefore 固定位置添加
  
  // 创建标签
  var aEle = document.createElement("a")
  aEle.href = 'https:www.baidu.com'
  aEle.innerText = '点我点我'
  // 获取参考点标签
  var d3Ele = document.getElementById('d3')
  var s1Ele = document.getElementById('s1')
  // 在d3标签内部，s1标签上方添加创建的a标签
  d3Ele.insertBefore(aEle,s1Ele)
  

• innerText和innerHTML的区别

  // 获取一个标签
  var d2Ele = document.getElementById('d2');
  // 仅仅能获取到d2标签的内部文本
  d2Ele.innerText
  // 不仅获取文本，标签页全部获取到
  d2Ele.innerHTML
  
  // 获取标签
  var d2Ele = document.getElementById('d2');
  // 设置内部文本
  d2Ele.innerText = '哈哈'
  d2Ele.innerHTML = '呵呵'
  // 设置内部文本(文本中包含标签)
  d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签
  d2Ele.innerHTML = '<h1>我是h1</h1>' // 能够识别html标签
  

• 获取值操作

  // 用于获取用户选择或输入的标签
  input
  select
  textarea
  
  // 获取值
  demoEle.value
  // 设置值
  demoEle.value = '我改了'
  

• class操作

  // 注意点：通过class获取到的数据是一个数组，需要通过索引拿到单个对象
  
  // 根据class找到相应的标签对象
  var c1Ele = document.getElementsByClassName('c1')[0]
  
  // 获取该标签对象的class属性列表并移除背景红色
  c1Ele.classList.remove('bg-red')
  
  // 添加属性
  c1Ele.classList.add('bg-green')
  
  // 判断是否存在
  c1Ele.classList.contains('bg-green')
  c1Ele.classList.contains('bg-red')
  
  // 有则删除，无则添加
  c1Ele.classList.toggle('bg-green')
  

• style样式操作

  // 修改高度样式
  d1Ele.style.height = '200px'
  // 修改宽度样式
  d1Ele.style.width = '200px'
  // 修改背景色样式
  d1Ele.style.backgroundColor = 'blue'
  

事件绑定

两种绑定事件的方法

• 标签内直接调用相应事件函数
• js代码自动查找标签并绑定事件

示例

<div class="bg-red " id="d1"></div>
<button id='b1' onclick='change();'>开关1</button>
<button id='b2'>开关2</button>
<script>
    // 标签直接绑定事件
    function change(){
        var d1Ele = document.getElementById('d1');
        d1Ele.classLict.toggle('bg-green');
    }
    // 通过JS代码绑定事件
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = ()=>{
        change();
    }

搜索框案例

<input type="text" value="苹果手机" id="i1">
    var i1Ele = document.getElementById('i1');
    i1Ele.onfocus = function (ev) {
        i1Ele.value = '';
        // 也可以直接用this
        this.value = ''
    };
    i1Ele.onblur = function (ev) {
        i1Ele.value = '苹果电脑';
        // 也可以直接用this
        this.value = '苹果电脑'
    }

计时器案例

// 全局变量
var t;
// 步骤1 
// 将当前时间填写到i1中
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();

// 步骤2(点开始，时间动起来)>>>(每隔一秒执行一次展示时间操作)
	// 将添加时间的功能封装成一个函数
function showTime(){
    var now = new Date();
    var i1Ele = document.getElementById('i1');
    i1Ele.value = now.toLocalString();
};
	// 页面一刷新先展示当前时间
showTime()
	// 找到开始按钮，绑定事件
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function(){
    // 判断是否已经开启过定时器了
    if (!t){
        // t指代定时器
    	t = setInterval(showTime,1000);
    }
}

// 步骤3(给停止按钮绑定事件，点击后清除定时器)
var b2Ele = document.getElementById('b1');
b2Ele.onclik = function(){
    // 问题来了，清除谁呢？需要有一个变量指代定时器
    clearInterval(t)；
}

// 步骤4(如果点击多次开始按钮，发现无法清除定时器)
// 判断定时器是否已开启

省市联动案例

data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
	  // 先提前将两个标签对象查找到
    var pEle = document.getElementById('province');
    var cEle = document.getElementById('city');
    // 先展示省份信息
    for (var province in data){
        var proEle = document.createElement('option');
        proEle.innerText = province;
        pEle.appendChild(proEle)
    }
	  // 绑定变化事件
    pEle.onchange = function () {
        // 获取对应的省信息
        var currentProvince = pEle.value;
        // 将之前的省对应的市清除
        cEle.innerHTML = '';
      
        // 添加默认的请选择项
        var newEle = document.createElement('option');
        newEle.innerText = '请选择';
        cEle.appendChild(newEle);
      
        // 获取当前省对应的市
        relCity = data[currentProvince];
        // 循环对应的市，添加到市对应的选择框中
        for(var i=0;i<relCity.length;i++){
            var cityEle = document.createElement('option');
            cityEle.innerText = relCity[i];
            cEle.appendChild(cityEle)
        }
    }

jQuery

找到div标签并给div标签设置为红色

// 原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';

// jQuery操作
$('#d1').css('color','blue');

什么是jQuery？

• 是一个工具，简单方便实现DOM操作
• python里可能叫模块贴切一点，但在前端叫"类库"

jQuery学什么？

• 查找标签
• 修改属性样式
• 事件
• Ajax异步请求
• 插件机制

使用注意事项

• 一定要先导入后使用

基础语法

$(selector).action()

// 样式演变，原本应该
jQuery();
// 为了简化
$();

标签查找

找标签的总格式:$("")

介绍三种最基本的找法

id查找

类名查找

标签查找

组合查找

• 提出注意点，原生DOM查找和jQuery查找出来的结果区别DOM对象与jQuery对象

  // DOM对象与jQuery对象互相转换
  $('#d1')[0]
  var d1Ele = document.getElementById('d1');
  $(d1Ele)
  

• 层级选择器

  后代

  儿子

  毗邻

  弟弟

• 基本筛选器

  // 用ul标签举例
  $('#ul>li:first')
  $('#u1>li:last')
  $('#ul>li:eq(3)')
  $('#ul>li:even')
  $('#ul>li:odd')
  $('#ul>li:gt(3)')
  $('#ul>li:lt(3)')
  $('#u1>li:not(.c1)')
  
  // 最后一个has的玩法需要写个三个div
  // 一个空div
  // 一个儿子有a标签
  // 一个儿子没有a，孙子有a标签
  $('div:has(a)')
  

• 样式操作(原生DOM和jQuery实现标签红绿变幻)

  addClass();// 添加指定的CSS类名。
  removeClass();// 移除指定的CSS类名。
  hasClass();// 判断样式存不存在
  toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
  

• jQuery操作模态框显隐(类添加隐藏类)

• 表单筛选器

  # 针对表单内的标签
  $('input[type="text"]')
  # 简化写法
  $(':text')
  
  # 找到所有被选中的checkbox
  $(':checkbox')  # 注意select框中默认selected标签也会被找到
  $('input:checkbox')
  

• 筛选器方法

  # 避免$('input:first')太麻烦
  $('input').first()
  
  $("#id").next()
  $("#id").nextAll()
  $("#id").nextUntil("#i2")
  
  $("#id").prev()
  $("#id").prevAll()
  $("#id").prevUntil("#i2")
  
  $("#id").parent()
  $("#id").parents()  // 查找当前元素的所有的父辈元素
  $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
  
  $("#id").children();// 儿子们
  $("#id").siblings();// 兄弟们
  

• jQuery链式操作

  <div>
  	<p>p1</p>
  	<p>p2</p>
  </div>
  
  $('div>p').first().addclass('c1').next().addclass('c2');
  
  # python代码诠释链式调用,其实就是在调用方法之后讲对象再次返回