JQuery小结

蔚落 2022-04-25 08:52 185阅读 0赞

**目录**

JQuery

栗子壹

栗子贰

【JQuery】——点击下拉；滑动下拉菜单

【JavaScript】——滑动下拉

JQuery 和DOM之间的关系更加灵活：

1、相互转化：

2、DOM操作被封装好

--------------------

# JQuery #

官方解释：是JavaScript的代码库，也是它的框架

JQuery=$ 是在 $(document).ready(function()\{\}下开始应用JQuery封装好的方法，来执行命令。

先通过两个简单的例子来认识一下JQuery；

--------------------

# 栗子壹 #

要求：点击按钮，实现alert弹窗：

【JQuery】

**HTML:** <input type="button" value="点击"/>

**JQuery：**

$(document).ready(function () \{

$("\#ok").click(function ()\{  
                 alert("hello");  
                 \});

\});

【JavaScript】

**HTML：**<input type="button" value="点击" οnclick="myFunction()"/>

**javaScript:**

function myFunction()  
\{  
    alert("你好，我是一个警告框！");  
\}

Jquery，使用了已经封装好的click时间，不需要在html中声明οnclick=""事件，这样已经减少了动态操作jquery和html之间的粘性，但怎么体现JQuery比JavaScript更加的快速？

# 栗子贰 #

## 【JQuery】——点击下拉；滑动下拉菜单 ##

![20190602212432378.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    
        <style type="text/css">
            /*//小圆点 list-style
            //缩紧清除 padding  margin
            //背景控制： class="main" 背景图片提醒立体效果backgroun-image norepeat;或者，background-repeat = repeat-x
            //li设定背景色*/
            ul,li {
                list-style:none;
                padding:0px;
                margin:0px;
            }
            .main, .hmain {
                background: url('button1.jpg') no-repeat;
                width: 100px;
            }
            li {
                background-color:#f7ebf5;
                width:100px;
            }
            a {
                text-decoration:none ;
                padding-left:20px;
                /*充满所占的区域*/
                display:block;
                display:inline-block;
                padding-top:2px;
                padding-bottom:2px;
    
            }
            .main a,.hmain a{
                color: black;
                background: url('icon2.gif') no-repeat;
                background-position: 5px center;
            }
            .main li a,.hmain li a{
                color: gray;
                background-image: none;
            }
            .main ul,.hmain ul{
                /*子菜单项全部隐藏*/
                display: none;
            }
            .hmain {
                float:left;
            }
        </style>
        <script type="text/javascript" src ="jquery.js"></script>
        <script type="text/javascript">
            //竖向的菜单动态下拉设置
            $(document).ready(function(){
                //页面中的DOM已经装载完成了，执行的代码
                $(".main > a").click(function(){
                    var node = $(this).next("ul");
                    //方法一：
                    //if(node.css("display") == "none") {
                    //    node.css("display", "block");
                    //} else {
                    //    node.css("display", "none");
                    //}
                    //方法二三：
                    //node.show();
                    //node.hide();
                    //node.toggle();
                    //方法四：
                    node.slideToggle();
                    changeIcon($(this));
                });
    
                //横向菜单鼠标移动动态显示
                $(".hmain").hover(function () {
                    $(this).children("ul").slideDown();
                    changeIcon($(this).children("a"));
                },function () {
                    $(this).children("ul").slideUp();
                    changeIcon($(this).children("a"));                
                });
            }); 
    
            //修改下拉框的图标---这是用JavaScript实现的
            function changeIcon(mainNode) {
                if (mainNode) {
                    if (mainNode.css("background-image").indexOf("icon2.gif") >=0){
                        mainNode.css("background-image", "url( 'icon1.gif' )");
                    } else {
                        mainNode.css("background-image","url( 'icon2.gif' )");
                    }
                }                
            }
            
        </script>
    </head>
    <body>略</body>

## 【JavaScript】——滑动下拉 ##

![2019060221164910.gif][]

<head>
        <meta charset="utf-8" />
        <title></title>
    
        <script src="jquery.js"></script>
        <style  type="text/css">
            ul {
                list-style: none;
            }
            li {
                width: 200px;
                height: 35px;
                float: left;
                background: yellow;
                overflow: hidden;
                line-height: 35px;
                text-align: center;
            }
        </style>
       <script>
            window.onload = function () { //在浏览器设置窗口
                var li = document.getElementsByTagName("li");//返回带有指定标签名的对象集合
                for (var i = 0; i < li.length; i++) {
                    li[i].onmouseover = function () {
                        console.log(this);//这里的this指的是Windows
                        this.style.overflow = "visible";
                    }
                    //鼠标移动上去，内容不会被修剪，会呈现在元素框之外
                    li[i].onmouseout = function () {
                        this.style.overflow = "hidden";
                        //鼠标移除去，内容会被修剪，并且其他内容是不可见的
                    }
                }
            }
        </script>
    </head>

JQuery可以和CSS进行无缝连接，可以对CSS样式里的所有选择器进行获取操作：比如基本选择题：  id \#id；类 class；标签 tag； 通用\*，还可以通过方法：  .val（）  .text（） .html()  .css() .attr()进行获取操作，

JavaScript是通过DOM获得指定的标签名，转化成dom 进行for循环遍历，执行。

--------------------

# **JQuery 和DOM之间的关系更加灵活：** #

## 1、相互转化： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70][]

## 2、DOM操作被封装好 ##

*   区分：dom->jquery: $(dom对象 jquery对象不是万能)
 *   jquery->dom  ：1个对象的时候 jquery.\[0\];多个对象的时候可以使用.Get()

Next()  prev（）silblings() nestALL()… children()…

这些都是为了定位获得定位元素，为了获得定位元素的地方，都可以使用选择器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1][]

***JQuery存在并受到欢迎，一定是有原因的！***

[20190602212432378.gif]: /images/20220125/74bdf4ef7d0247db90a4d042d84367f9.png
[2019060221164910.gif]: /images/20220125/cfbece43e86d42599c0463eec46c230b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70]: /images/20220125/4bd0d5abf9694f5a903f61c0ec7d74ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1]: /images/20220125/d44042a902304137b6f76e04b2a64a75.png