JQuery使用方法简介（一）

最新推荐文章于 2024-09-20 17:38:49 发布

傻乎乎的小不点

最新推荐文章于 2024-09-20 17:38:49 发布

阅读量369

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_62697897/article/details/127357206

版权

目录

一、jquery介绍

1、是一个javascript类库

2、以最少的代码实现更多的功能

3、优势：

4、版本拓展：是否兼容IE678

二、基础核心

1、代码风格

2、加载模式

3、对象互换

三、选择器

1、最核心选择引擎

2、使用

3、拓展：容错功能

4、拓展：选择器复杂度

一、jquery介绍

1、是一个javascript类库

通过封装原生的javascript函数从而得到一套完整的方法

2、以最少的代码实现更多的功能

3、优势：

（1）像CSS操作那样操作DOM

（2）修改CSS方便简单

（3）简化JS代码操作

（4）事件处理更加容易

（5）各种动画效果

（6）ajax更加完美

（7）大量插件（eg：日历）

（8）量大的优势：特别方便

4、版本拓展：是否兼容IE678

（1）成本控制

（2）用户选择

<1>高质量

<2>低质量（创业初期可以考虑放弃）

（3）项目侧重点

（4）用户体验

（5）数据支持

（6）教育用户

（7）总而言之：视情况而定

二、基础核心

1、代码风格

（1） $function(){}; （匿名函数的执行）

（2）$("#div1") （选取元素）

（3）$("#div1").css('color','red') （添加内联样式）

（4）$ == jQuery （js封装好的一个对象）

2、加载模式

（1）window.onload

<1>全部资源加载完毕

<2>只能执行一次，会覆盖前边的

<3>不能简写

(2)$(document).ready(function() {});

<1>DOM结构加载完毕

<2>可多次执行

<3>可简写 $(function() {});

3、对象互换

这个互换多指JQuery对象于DOM对象互换

(1)DOM对象转成JQuery对象：$(DOM对象)

(2)JQuery对象转换成DOM对象：JQuery对象[index]

三、选择器

1、最核心选择引擎

继承了css的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择

2、使用

（1）id选择器（#div1）

（2）标签名选择器（div）

（3）class选择器（.div1）

（4）后代选择器

<1>header div

<2>$("header div")等价于 $("header").find("div")

（5）子代选择器 header>div

<1>IE6不支持

<2>$("header>div") 等价于 $("header").children('p')

（6）第一个元素：：first

（7）最后一个元素：：last

（8）所有偶数元素：：even

（9）所有奇数元素：：odd

（10）根据下标进行选择元素：：eq(n)

（11）根据属性进行选择元素：[title]

3、拓展：容错功能

很多情况下动态DOM生成会有问题

4、拓展：选择器复杂度

选择器越复杂，字符串解析越慢

5、具体案例：

html文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq</title>
</head>
<body>
    <li>一群男人的故事</li>
    <li>人与自然的故事</li>
    <li>105个男人与3个女人的故事</li>
    <li>一群女人与一个男人的故事</li>

    <div id="ok">
        <div class="ok1">
            <div>
                <p>1</p>
                <p>2</p>
            </div>
            <div>
                <p>3</p>
                <p>4</p>
            </div>
            <div>
                <p>5</p>
                <p>6</p>
            </div>
        </div>
        <div class="ok2">
            <div>
                <p>7</p>
                <p>8</p>
            </div>
            <div class="nt">
                <p>9</p>
                <p>10</p>
            </div>
            <div>
                <p>11</p>
                <p>12</p>
            </div>
        </div>
    </div>
</body>
<script src="js/jq.js"></script>
<script>
    // $('  #ok   .ok    .nihao  div  li  ')
    var els = $("#ok .ok1  p");
    // 链式语法：（因为都返回this）
    $("#ok .ok2  .nt p").css({
        color: "red",
        fontSize: "30px"
    }).css({
        backgroundColor: "yellowgreen"
    });
    console.log(els); 
</script>
</html>

js文件代码：


// arg  div  .ok  #yes  div  ul  li
// 对外使用的方法
function   $(arg){
    // 通过arg(类似css选择器) 获取指定的标签
    // 返回一个数组
    return   _getEls(arg);

}


// 自定义内部使用方法
arg = '  #ok   .ok    .nihao  div  li  '   
function  _getEls(arg){
    // 将arg规范化
    // arg首位首位没有空格，中间只有一个空格
    var  reg = /^\s+|s+$/g;
    arg = arg.replace(reg, '');
    // console.log("ok===="+arg);
    reg = /\s+/g;
    arg = arg.replace(reg, ' ');
    // console.log(arg);
    // 将arg分隔为数组
    var  arr = arg.split(' ');
    // console.log(arr);
    // arr = ["#ok",".ok",".nihao","div","li"];
    // 需要工具
    var  parent = [document];
    var  children = [];
    // 遍历arr
    for(var i=0;i<arr.length;i++){
        var  s = arr[i];      //当前的查询项
        for(var j=0;j<parent.length;j++){
            // 遍历当前查询项的父级
            var  p = parent[j];
            var  subarr = _getChildByParent(p,s);
            children = children.concat(subarr);
        }
        parent = children;     //子级成为父级
        children = [];
    }
    return  parent;
}


function  _getChildByParent(p,s){
    var  c = s.charAt(0);     //获取查询项的首字母
    var  arr = [];
    if(c === "#"){
        c = s.substring(1);
        arr = [p.getElementById(c)];
        console.log(arr);
    }else  if(c === "."){
        c = s.substring(1);
        var  els = p.getElementsByClassName(c);
        for(var i=0;i<els.length;i++){
            arr.push(els[i]);
        }
    }else{
        var  els = p.getElementsByTagName(s);
        for(var  i=0;i<els.length;i++){
            arr.push(els[i]);
        }
    }
    return  arr;
}

// 为数组的原型添加一些新的方法
// 继续简化DOM操作
Array.prototype.css = function(obj){
    this.forEach(function(el){
        for(var  x  in  obj){
            el.style[x] = obj[x];
        }
    })
    return  this;
}

运行结果：