前端jQuery

前端类库之jQuery

 

jQuery简介　

　　内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器
　　第三方的类库:使用它需要提前导入 # 很容易遗忘

　　宗旨:Write less, do more.

　　版本:1.x 2.x 3.x # 可以使用3.x最新版

 

　　下载与导入

　　　　官网下载: 压缩之后的和未压缩的都可以

　　　　　　压缩之后的版本将很多变量名全部使用英文字母代替了

　　　　本地导入: 下载后存在本地导入　

　　　　　　缺点:在于需要提前下载文件
　　　　　　优点:在于不会受到网络的影响

　　　　CDN导入: 基于CDN技术的网络导入 导入网址打开文件自动加载

　　　　　　网站:bootcdn  jquery最好使用3.4.1版本

 

　　基本使用

　　　　很多时候jQuery都是一行代码搞定所有

　　　　关键字:

　　　　　　jQuery === $

 

基本选择器

　　如何通过变量名来区分指代的是何种对象
　　eg:
　　　　如果是原生的js对象
　　　　　　var pEle = ...
　　　　如果是jQuery的对象
　　　　　　var $pEle = ...

$('#d1')   　　　　# document.getElementById('d1')
$('.c1')   　　　　# document.getElementsByClassName('d1')
$('p')     　　　　# document.getElementsByTagName('p')
$('div.c1')  　　 # 查找class含有c1的div标签
$('#d1, .c1, p')  # 并列查找
$('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(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器

$('[name]')
$('[name="jason"]')
$('input[name="jason"]')

表单筛选器

$(':text')  　  # 查找属性值是text的form表单内的标签
$(':checked')  # 会连同option默认的selected一起找到

筛选器方法

　　使用原生js代码批量查找到标签之后 结果是一个数组
　　需要索引取值之后才可以调用标签的一些方法

　　使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)
　　不需要索引取值 就可以直接调用封装的方法

　　两者对象的转换
　　　　js对象转jQuery对象
　　　　　　$(js对象)
　　　　jQuery对象转jd对象
　　　　　　jQuery对象索引取值

.next()
.nextAll()
.nextUntil()
.prev()
.prevAll()
.prevUntil()
.parent()
.parents()
.parentsUntil()
.children()
.siblings()
.find()

节点操作

　　1、创建节点

　　　　语法:createElement(标签名)

　　　　示例：

var divEle = document.createElement("div");

　　2、添加节点

　　　　语法

　　　　追加一个子节点（作为最后的子节点）

　　　　somenode.appendChild(newnode)；

　　　　把增加的节点放到某个节点的前边。

　　　　somenode.insertBefore(newnode,某个节点);

　　　示例:

var aEle = document.createElement('a');  # 创建标签
aEle.setAttribute('href','https://www.mmzztt.com/')  # 设置属性
aEle.innerText = '好不好看?'  # 设置内容文本
document.getElementsByTagName('p')[0].appendChild(aEle)  # 动态添加

　　3、删除节点

　　　　语法：获得要删除的元素，通过父元素调用该方法删除。

　　　　somenode.removeChild(要删除的节点)

　　4、替换节点

　　　　语法：somenode.replaceChild(newnode, 某个节点);

# 样式类操作
    addClass()     # classList.add()
    removeClass()  # classList.remove()
    hasClass()     # classList.contains()
    toggleClass()  # classList.toggle()
  
# 样式操作
    css('属性名','属性值')
    
$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });

# 文本操作
    text()  # innerText
    html()  # innerHTML
    val()   # value
    jQuery对象先转js对象之后.files
    '''括号内不写参数就是获取值 写参数就是设置值'''
 
# 属性操作
    attr()  # setAttribute()
    '''适用于属性为静态的情况(不经常修改动态变化的)'''
    prop()
        $($(':checkbox')[1]).prop('checked',true)
    """适用于动态变化的情况 尤其是选择类标签"""
    
  
# 文档处理
    append()   # 内部的尾部追加元素
    prepend()  # 内部的头部追加元素
    after()    # 同级别下面添加元素
    before()   # 同级别上面添加元素
    remove()   # 移除当前元素
    empty()    # 清空当前元素内部所有的数据
    clone()    # 克隆标签 括号内可以加布尔值来明确是否克隆事件

　　属性节点

　　　　1、获取文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

　　　　2、设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

　　　　3、两者区别

innerText
    不加赋值符号是获取内部文本
    加了赋值符号是设置内置文本
    # 不可以识别HTML标签
innerHTML
    不加赋值符号是获取内部标签+文本
    加了赋值符号是设置内置标签+文本
    # 可以识别HTML标签

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

　　注：getAttribute重要

获取值操作

　　1、普通的文本数据获取

　　　　标签对象.value

　　2、特殊的文件数据获取

　　　　标签对象.value　　获取一个文件地址

　　　　标签对象.files[0]　　获取单个文件数据

　　　　标签对象.files　　   获取所有文件数据

class操作

classList  查看所有的类
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

样式操作

　　标签对象.style.属性名 = 属性值

obj.style.backgroundColor="red"

事件

　　常用事件

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

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

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

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

　　绑定事件的两种方式

　　　　方式1
　　　　　　jQuery对象.事件名(function(){})
　　　　　　　　$('#d1').click(function(){alert(123)})

　　　　方式2
　　　　　　jQuery对象.on('事件名',function(){})
　　　　　　　　$('#d1').on('click',function(){alert(123)})

绑定事件的方式1
    <button onclick="func()">点我</button>
    <script>
        function func() {
            alert(123)
        }
    </script>
    
绑定事件的方式2
    <button id="d1">选我</button>
    <script>
        // 1.先查找标签
        var btnEle = document.getElementById('d1')
        // 2.绑定事件
        btnEle.onclick = function () {
            alert(456)
        }
    </script>

 

　　　　有时候绑定事件可能没有效果 这个时候可以考虑切换绑定方式
　　　　　　方式1不行就方式2
　　　　　　方式2不行就方式1

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

 

　　内置参数this

　　　　this指代的就是当前被操作对象本身

　　　　在事件的函数体代码内部使用

btnEle.onclick = function () {
        alert(456)
        console.log(this)
    }

　　事件示例

　　　　定时器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    var t;
    function showTime() {
        var i1Ele = document.getElementById('i1');
        var time = new Date();
        i1Ele.value = time.toLocaleString();
    }
    showTime();
    var b1Ele = document.getElementById('b1');
    b1Ele.onclick = function (ev) {
        if (!t){
            t = setInterval(showTime,1000)
        }
    };
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = function (ev) {
       clearInterval(t);
       t = undefined
    };

</script>
</body>
</html>

　　　　搜索框示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="请输入关键字"){
        inputEle.value="";
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="请输入关键字";
    }
}
</script>
</body>
</html>

　　　　select联动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</title>
</head>
<body>
<select id="province">
  <option>请选择省:</option>
</select>

<select id="city">
  <option>请选择市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");

  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    c.innerHTML = "";

    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

window.onload

　　当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

　　window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。

　　注意：.onload()函数存在覆盖现象。

END