DOM+jQuery

目录

• 操作标签
  • 创建标签
  • 设置和获取标签的文本属性
  • 获取值操作
  • 属性操作
• 事件
  • 常用事件
  • 绑定事件
  • 事件案例
• jQuery简介
• jQuery对象
• 查找标签
  • 基本选择器
  • 层级选择器
  • 基本筛选器
  • 属性选择器
  • 表单筛选器
  • 筛选器方法
  • 链式操作

操作标签

创建标签

var divEle = document.createElement("div");
'在起变量名的时候 如果该变量指向的是一个标签 那么建议使用
	'xxxEle
		'eg:aEle\pEle\divEle\spanEle

/*
标签可以有默认属性 
	比如 id class 等 设置的时候可以直接通过点的方式
		divEle.id = 'd1'
也可以有自定义属性
	比如 username password 等 设置的时候需要使用setAttribute
		divEle.setAttribute('username','jason')
		
setAttribute()既可以设置自定义属性也可以设置默认属性

divEle.getAttribute("age")		获取指定属性
divEle.removeAttribute("age") 移除指定属性

// 动态创建一个a标签并添加到页面指定位置
var aEle = document.createElement('a')  // 创建a标签
aEle.href = 'https://www.sogo.com/'  // 设置href属性
aEle.innerText = '点我去搜狗'  // 设置文本内容
var divEle = document.getElementById('d1')  // 查找标签
divEle.append(aEle)  // 内部追加标签

设置和获取标签的文本属性

获取文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText // 只会获取文本内容
divEle.innerHTML // 获取文本和标签

设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1" // 不识别标签语法 
divEle.innerHTML="<p>2</p>" // 识别标签语法

获取值操作

// 适用于以下标签
.input .option .textarea
1.获取普通值数据
	标签对象.value
2.获取文件数据
	标签对象.value  # 只能获取到文件路径 没啥用
  	标签对象.files  # 结果是一个数组 可以通过索引获取具体文件对象

属性操作

'''类属性操作'''
标签对象.classList  // 查看所有的类属性
标签对象.classList.add()  // 添加类属性
标签对象.classList.remove()  // 移除类属性
标签对象.classList.contains()  // 判断是否含有某个类属性
标签对象.classList.toggle()  // 有则移除 无则添加

'''样式操作'''
标签对象.style.属性名
	divEle.style.height = '800px'

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

绑定事件

事件函数中有一个固定的关键字this指代当前被操作对象本身

方式1(调用函数的形式)：

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green"; // 将背景样式改为 green
  }
</script>
/* 注意：
this是实参，表示触发事件的当前元素。
函数定义过程中的ths为形参。
如果不需要可以不写参数

方式2(DOM操作标签的形式)

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

事件案例

1.数据校验
	获取用户名和密码 校验是否符合 并暂时相应提示
  '''给普通按钮绑定一个点击事件 触发校验动作'''
  <p>username:
    <input type="text" id="username">
      <span style="color: red" id="username_error"></span>
  </p>
  <p>password:
      <input type="text" id="password">
      <span style="color: red" id="password_error"></span>
  </p>
  <input type="button" value="提交" id="btn">
  <script>
      // 1.查找按钮标签
      let btnEle = document.getElementById('btn');
      // 2.绑定点击事件
      btnEle.onclick = function () {
          // 3.获取用户名和密码
          let userNameVal = document.getElementById('username').value;
          let passWordVal = document.getElementById('password').value;
          // 4.判断
          if (userNameVal === 'jason'){
              // 给用户名下面的span标签设置文本内容
              let userSpanEle = document.getElementById('username_error')
              userSpanEle.innerText = '用户名不能是jason!!!'
          }
          if (passWordVal === '123'){
              // 给密码下面的span标签设置文本内容
              let userSpanEle = document.getElementById('password_error')
              userSpanEle.innerText = '密码不能是123!!!'
          }
      }
  </script>

2.搜索框案例
	<input type="text" id="d1" value="默认搜索的内容">
	<script>
    // 1.查找input标签对象
    var inputEle = document.getElementById('d1')
    // 2.绑定一个聚焦事件
    inputEle.onfocus = function () {
        // 3.清空value值
        this.value = ''
    }
    // 4.绑定一个失焦事件
    inputEle.onblur = function () {
        // 5.添加一个全新的value值
        this.value = '小霸王游戏机'
    }
	</script>
3.省市联动
	<p>省市:
    <select name="" id="pro">

    </select>
	</p>

	<p>市区:
    <select name="" id="city">

    </select>
	</p>
	<script>
    let proEle = document.getElementById('pro');
    let cityEle = document.getElementById('city');
    // 1.自定义数据(以后有现成的组件实现)
    let data = {
        "河北": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["合肥市", "芜湖市"],
        "上海": ["静安", "黄埔"],
        "深圳": ["龙湖", "罗湖"]
    };
    // 2.获取自定义对象中所有的key并添加到省市下拉框中
    for (let proVal in data) {
        // 2.1.创建option标签
        opEle = document.createElement('option');
        opEle.innerText = proVal;
        opEle.value = proVal
        // 2.2.添加到第一个下拉框中
        proEle.append(opEle)
    }
    // 3.文本域变化事件
    proEle.onchange = function () {
        // 3.0.先清空市区下拉框中的内容
        cityEle.innerHTML = '';
        let currentPro = this.value;
        let currentCityList = data[currentPro];
        // 3.1.循环获取市区数据
        for (let i=0;i<currentCityList.length;i++){
            // 3.2.创建option标签
            opEle = document.createElement('option');
            opEle.innerText = currentCityList[i];
            opEle.value = currentCityList[i]
            // 2.2.添加到第一个下拉框中
            cityEle.append(opEle)
        }
    }
	</script>

jQuery简介

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

'''版本区别''' 
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678  学习直接使用最新版即可
 
'''下载使用'''
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已

'''导入方式'''
1.本地jQuery文件
	不会收到网络影响
2.CDN加速服务
	需要确保有互联网
	min.js  压缩之后的文件 容量更小  
  .js			没有压缩的文件 容量稍大
 
'''基本使用'''
将页面上的两个p标签文本内容一个变成红色 一个变成绿色
原生的js代码
	let p1Ele = document.getElementsByTagName('p')[0]
  let p2Ele = document.getElementsByTagName('p')[1]
  p1Ele.style.color = 'red'
  p2Ele.style.color = 'green'

jQuery代码
	$('#d1').css('color','red').next().css('color','green')

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

查找标签

基本选择器

id选择器：

$("#id")

标签选择器：

$("tagName")

class选择器：

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器：

$("*")

组合选择器：

$("#id, .className, tagName")

层级选择器

x和y可以为任意选择器

$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

表单筛选器

$('input[type="text"]')	 
//筛选器简化	
$(':text')

$(':checked') // 会将option也找到
$(':selected')  // 只会找到option标签

筛选器方法

// 同级别往下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

// 同级别网上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

// 查找父标签
$("#id").parent()
$("#id").parents() 
$("#id").parentsUntil()

// 查找儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)

链式操作

// 链式操作
	$('#d1').parent().parent().parent()
	$('#d1').parent().parent().next().parents()
	一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
	
核心:
	对象在调用完一个方法之后返回的还是一个对象