2.WEB前端-JQuery

最新推荐文章于 2022-02-07 22:25:44 发布

superleedev

最新推荐文章于 2022-02-07 22:25:44 发布

阅读量422

点赞数

分类专栏： WEB前端 web 前端文章标签： web前端 jquery

本文链接：https://blog.csdn.net/Lsc_hei/article/details/88180593

版权

WEB前端同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

web 前端

3 篇文章 0 订阅

订阅专栏

Jquery

什么是 JQuery :
jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery 的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的 css 选择器，并且可对 CSS 选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery 兼容各种主流浏览器，如google,IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
1. 写更少的代码,做更多的事情: write Less ,Do more
2. 将我们页面的 JS 代码和 HTML 页面代码进行分离
JQ 中根据 ID 查找元素

全都是根据选择器去找的
#ID{}
.类名{}
$("#ID的名称")

JQ 和 JS 之间的转换
JQ 对象,只能调用 JQ 的属性和方法
JS 对象只能调用 JS 的属性和方法

function changeJS(){
                var div = document.getElementById("div1");
//                div.innerHTML = "JS成功修改了内容"
                //将JS对象转成JQ对象
                $(div).html("转成JQ对象来修改内容")
            }
            
            $(function(){
                //给按钮绑定事件
                $("#btn2").click(function(){
                    //找到div1
//                    $("#div1").html("JQ方式成功修改了内容");
                    //将JQ对象转成JS对象来调用
                    var $div = $("#div1");
//                    var jsDiv = $div.get(0);
                    var jsDiv = $div[0];
                    jsDiv.innerHTML="jq转成JS对象成功";
                });
            });

JQ 的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)
1. 导入 JQ 相关的文件
2. 文档加载完成事件: $ ( function ) : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素
6. 显示和隐藏 img.style.display
使用 JQuery 完成页面定时弹出广告（定时器）:
- setInterval clearInterval
- setTimeout clearTimeout
- 显示: img.style.display = "block"
- 隐藏: img.style.display = "none"
- img 对象
  - style属性: style对象
使用JQuery完成表格的隔行换色
- 获得所有的行
  - table.rows[]
- 修改行的颜色
  - row.bgColor ="red"
  - row.style.backgroundColor = "black"
  - row.style.background = "red"
  - "background-color:red"
  - "background : red"
使用 JQuery 完成复选框的全选效果
- checked 属性
- 如何获取所有复选框:
  - document.getElementsByName get Elements By Name 数据库里
使用JQuery完成省市联动效果
- JS中的数组: ["城市"]
- new Array()
- DOM树操作:
  - 创建节点: document.createElement
  - 创建文本节点: document.createTextNode
  - 添加节点: appendChild（）
使用JQuery完成下列列表左右选择
- select下拉列表
- multiple 允许多选
- ondblclick : 双击事件
- for 循环遍历,一边遍历一边移除出现的问题
使用JQuery完成表单的校验(扩展)，事件:
- 获得焦点事件: onfocus
- 失去焦点事件: onblur
- 按键抬起事件: onkeyup
- 鼠标移入: onmouseenter
- 鼠标移出: onmouseout
- JS 引入外部文件 : script
使用JQuery完成页面定时弹出广告，当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告
- 定时器: setTimeout
- 显示和隐藏: style.display = " block / none "

【JQ中的动画效果】

show : 显示

hide : 隐藏

slideDown: 向下滑动

slideUp: 向上滑动

fadeIn：淡入

fadeOut：淡出

animate : 自定义动画

举例：定时弹出广告

<script>
            //显示广告
            function showAd(){
                $("#img1").slideDown(2000);
                setTimeout("hideAd()",3000);
            }
            //隐藏广告
            function hideAd(){
                $("#img1").slideUp(2000);
            }
            
            $(function(){
                setTimeout("showAd()",3000);
            });
        </script>

JQuery中的选择器，让我们能够更加精确找到我们要操作的元素，

基本选择器：

基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class 和标签名来查找DOM元素。这个非常重要，下面的内容都是以此为基础，逐级提高的。
1).ID选择器 : #ID的名称“$(“#id”)”，获取id指定的元素，id是全局唯一的，所以它只有一个成员。
2).类选择器: 以 . 开头 .类名：“$(“.class”)”，获取class指定的元素，不同的元素可以具有相同的class属性，所以它可能具有多个成员。
3).元素选择器: 标签的名称：“$(“element”)”，获取element（元素名，比如div、table等）指定的元素，它可能具有多个成员。
4).通配符选择器: *：“$(“*”)”，获取所有元素，相当于document。
5).“$(“selector1,selector2,…,selectorN”)”，将每个选择器匹配到的元素合并后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。

    <script>
            //文档加载事件,页面初始化的操作
            $(function(){
                //初始化操作: 给按钮绑定事件
                $("#btn1").click(function(){
                    $("#two").css("background-color","palegreen");                    
                });
                
                //找出mini类的所有元素
                $("#btn2").click(function(){
                    $(".mini").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("div").css("background-color","palegreen");                    
                });
                $("#btn4").click(function(){
                    $("*").css("background-color","palegreen");
                    
                });
                /*选择器分组*/
                
                //找出mini类 和 span元素
                $("#btn5").click(function(){
                    $(".mini,span").css("background-color","palegreen");
                });
            });
        </script>

JQ中的层级选择器
- 子元素选择器: 选择器1 > 选择器2 , 找出来的是所有子节点，儿子（只包含第一层子元素），“$(“parent > child”)”
- 后代选择器: 选择器1 选择器2 ，找出来的是选择器1下面的所有选择器2 ，“$(“ancestor descendant”)”
- 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个下一层子元素，“$(“pre + next”)”
- 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的，“$(“pre ~ siblings”)”

<script>
            //文档加载事件,页面初始化的操作
            $(function(){
                //初始化操作: 给按钮绑定事件
                //找出body下面的子div   
                $("#btn1").click(function(){
                    $("body > div").css("background-color","palegreen");                    
                });
                //找出body下面的所有div
                $("#btn2").click(function(){
                    $("body div").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("#one+div").css("background-color","palegreen");                    
                });
                $("#btn4").click(function(){
                    $("#two~div").css("background-color","palegreen");                    
                });
                
            });
        </script>

JQ 中的过滤选择器

(1). 基本过滤选择器
a) “:first”，选取第一个元素，别忘记它也是被放在一个集合里哦！因为JQuery它是DOM对象的一个集合。如，“$("tr:first")”返回所有tr元素的第一个tr元素，它仍然被保存在集合中。
b) “:last”，选取最后一个元素。如，“$("tr:last")”返回所有tr元素的最后一个tr元素，它仍然被保存在集合中。
c) “:not(selector)”，去除所有与给定选择器匹配的元素。如，“$("input:not(:checked)")”返回所有input元素，但去除被选中的元素（单选框、多选框）。
d) “:even”，选取所有元素中偶数的元素。因为JQuery对象是一个集合，这里的偶数指的就是集合的索引，索引从0开始。
e) “:odd”，选取所有元素中奇数的元素，索引从0开始。
f) “:eq(index)”，选取指定索引的元素，索引从0开始。
g) “:gt(index)”，选取索引大于指定index的元素，索引从0开始。
h) “:lt(index)”，选取索引小于指定index的元素，索引从0开始。
i) “:header”，选取所有的标题元素，如hq、h2等。
j) “:animated”，选取当前正在执行的所有动画元素。

        <script>
            $(function(){
                /<script>
            //文档加载事件,页面初始化的操作
            $(function(){                
                //初始化操作: 给按钮绑定事件
                //过滤出所有div中第一个元素
                $("#btn1").click(function(){
                    $("div:first").css("background-color","palegreen");                    
                });                
                //过滤出所有div中偶数位的div
                $("#btn2").click(function(){
                    $("div:even").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("div:odd").css("background-color","palegreen");                    
                });
                $("#btn4").click(function(){
                    $("div:gt(2)").css("background-color","palegreen");                    
                });            
            });
        </script>

(2).JQ 中的属性过滤选择器

通过元素的属性来选取相应的元素。
a) “[attribute]”，选取拥有此属性的元素。
b) “[attribute=value]”，选取指定属性值为value的所有元素。
c) “[attribute !=value]”，选取属性值不为value的所有元素。
d) “[attribute ^= value]”，选取属性值以value开始的所有元素。
e) “[attribute $= value]”，选取属性值以value结束的所有元素。
f) “[attribute *= value]”，选取属性值包含value的所有元素。
g) “[selector1] [selector2]…[selectorN]”，复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合。

// 选择器[href]  : 单个属性
        $(function(){
                //找到有name属性的input
                $("#btn1").click(function(){
                    $("input[name]").attr("checked",true);
                });
                $("#btn2").click(function(){
                    $("input[name='accept']").attr("checked",true);
                });
                $("#btn3").click(function(){
                    $("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
                });
            });

(3).JQ中的表单过滤器

a) “:input”，选取所有<input>、<textarea>、<select >和<button>元素。
b) “:text”，选取所有的文本框元素。
c) “:password”，选取所有的密码框元素。
d) “:radio”，选取所有的单选框元素。
e) “:checkbox”，选取所有的多选框元素。
f) “:submit”，选取所有的提交按钮元素。
g) “:image”，选取所有的图像按钮元素。
h) “:reset”，选取所有重置按钮元素。
i) “:button”，选取所有按钮元素。
j) “:file”，选取所有文件上传域元素。
k) “:hidden”，选取所有不可见元素。

(4).选取表单对象元素属性的过滤选择器。

“:enabled”，选取所有可用元素。
“:disabled”，选取所有不可用元素。
“:checked”，选取所有被选中的元素，如单选框、复选框。
“:selected”，选取所有被选中项元素，如下拉列表框、列表框。

option:selected

<script>
  //1.文档加载事件    
  $(function(){
    $(":text").css("background-color","pink");
  });
</script>

(5). 内容过滤选择器
它是对元素和文本内容的操作。
a) “:contains(text)”，选取包含text文本内容的元素。
b) “:empty”，选取不包含子元素或者文本节点的空元素。
c) “:has(selector)”，选取含有选择器所匹配的元素的元素。
d) “:parent”，选取含有子元素或文本节点的元素。（它是一个父节点）

(6). 可见性过滤选择器
根据元素的可见与不可见状态来选取元素。
“:hidden”，选取所有不可见元素。
“:visible”，选择所有可见元素。
可见选择器：hidden 不仅包含样式属性 display 为 none 的元素，也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素。

(7).子元素过滤选择器
一看名字便是，它是对某一元素的子元素进行选取的。
a) “:nth-child(index/even/odd)”，选取索引为index的元素、索引为偶数的元素、索引为奇数的元素。
l nth-child(even/odd)：能选取每个父元素下的索引值为偶(奇)数的元素。
l nth-child(2)：能选取每个父元素下的索引值为 2 的元素。
l nth-child(3n)：能选取每个父元素下的索引值是 3 的倍数的元素。
l nth-child(3n + 1)：能选取每个父元素下的索引值是 3n + 1的元素。
b) “:first-child”，选取第一个子元素。
c) “:last-child”，选取最后一个子元素。
d) “:only-child”，选取唯一子元素，它的父元素只有它这一个子元素。

使用JQ完成表格的隔行换色

    $(function(){
                //获得所有的行 :   元素选择器
                $("tbody > tr:even").css("background-color","#CCCCCC");
                //修改基数行
                $("tbody > tr:odd").css("background-color","#FFF38F");
//                $("tbody > tr").css("background-color","#FFF38F");
                
                
            });

使用JQuery完成表单的全选全不选功能
使用JQ完成省市联动效果，添加节点 : appendChild (JS)
1. append : 添加子元素到末尾
2. appendTo : 给自己找一个爹,将自己添加到别人家里
3. prepend : 在子元素前面添加
4. after : 在自己的后面添加一个兄弟

$(function(){
                $("#province").change(function(){
//                    alert(this.value);
                    //得到城市信息
                    var cities = provinces[this.value];
                    //清空城市select中的option
                    /*var $city = $("#city");
                    //将JQ对象转成JS对象
                    var citySelect = $city.get(0)
                    citySelect.options.length = 0;*/
                    
                    $("#city").empty();  //采用JQ的方式清空
                    //遍历城市数据
                    $(cities).each(function(i,n){
                        $("#city").append("<option>"+n+"</option>");
                    });
                });
            });

使用JQ完成下拉列表左右选择


        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <script>
            $(function(){
                $("#a1").click(function(){
                    //找到被选中的那一项
                    //将被选中项添加到右边
                    $("#rightSelect").append($("#leftSelect option:selected"));
                });
                
                //将左边所有商品移动到右边
                $("#a2").click(function(){
                    $("#rightSelect").append($("#leftSelect option"));
                });
            });
        </script>

总结：

常用函数:
    属性prop()    properties : 如果传入一个参数  就是获取
    prop("src","../img/1.jpg");  :     设置图片路径
    attr : 操作一些自定义的属性  <img  abc='123' />
    prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性
    css() ; 修改css样式
    addClass()  : 添加一个 class 样式
    removeClass() : 移除
    blur : 绑定失去焦点
    focus: 绑定获得焦点事件
    click:  点击
    dblclick：    双击
    change：更改
    append    :  给自己添加儿子
    appendTo :  把自己添加到别人家

    prepend :  在自己子节点最前面添加子节点

    after  : 在自己后面添加一个兄弟

    before: 在自己前面添加一个兄弟   

    $("数组对象").each(function(index,data))

    $.each(arr,function(index,data))

使用JQ完成表单的校验
- trigger : 触发事件，但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为，输入框获得焦点
- triggerHandler : 仅仅只会触发事件所对应的函数
- is()

1. 首先给必填项,添加尾部添加一个小红点
2. 获取用户输入的信息,做相应的校验
3. 事件: 获得焦点, 失去焦点, 按键抬起
4. 表单提交的事件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <script type="text/javascript">7
            
            $(function(){      //  页面初始化
                //必填添加小红点
                    $(".bitian").after("<font class='high'> *</font>");
                    
                    //  必填绑定事件   $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){});  失去焦点。获得焦点，
                    $(".bitian").blur(function(){
                        
                        //用户当前输入的值
                        //var value = this.value;    两种方式都可以得到当前值
                        var value = $(this).val();             
                         //清空上一次的提示信息
                        $(this).parent().find(".formtips").remove();
                        
                        //判断当前的值是哪一项输入的值                        
                        if($(this).is("#username")){                            
                            // 校验用户名：
                            if(value.length < 6){
                                $(this).parent().append("<span class='formtips onError'>用户名太短了</span>");    
                            }else{
                                $(this).parent().append("<span class='formtips onSuccess'>用户正确</span>");    
                            }
                        }                        
                        if($(this).is("#password")){
                            
                        //校验密码
                        if(value.length < 3){
                            $(this).parent().append("<span class='formtips onError'>密码太短了</span>");    
                        }else{
                            $(this).parent().append("<span class='formtips onSuccess'>密码可用</span>");    
                        }
                        }
                        
                        //链式调用，自动校验
                    }).focus(function(){
                        $(this).triggerHandler("blur");  //触发上面定义的 blur 函数
                    }).keyup(function(){
                        $(this).triggerHandler("blur");   
                    });
                    
                    //给表单绑定提交事件
                    $("form").submit(function(){
                        //提交的时候，触发必填项的校验逻辑
                        $(".bitian").trigger("focus"); 
                        //判断错误信息是否包含0
                        var length = $(".onError").length ;
                        if(length > 0){
                            return false ;
                        }else
                        return true;                        
                    });                    
            });
            
        </script>        
        <title></title>
    </head>
    <body>
        <form action="表单校验.html" method="post">
        <div>
            用户名:<input type="text" class="bitian" id="username"/>
        </div>
        <div>
            密码:<input type="password" class="bitian" id="password"/>
        </div>
        <div>
            手机号:<input type="tel" />
        </div>
        <div>
            <input type="submit" value="提交"/>
        </div>
        </form>
    </body>
</html>

著作权所有，转载请注明出处。

superleedev

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2.WEB前端-JQuery

Jquery 什么是 JQuery : jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaS...
复制链接

扫一扫

专栏目录