JavaScript 11.08

JavaScript 第九天

1.1 jQuer 简介

JavaScript是前端浏览器的脚本语言，是原生语言。
JavaScript有很多功能代码 大牛们提前写好了 （使用的就是JavaScript）这套代码命名为 jQuery
也就是说 jQuery是使用JavaScript写好的第三方库
​
学习jQuery 就是学习别人写了哪些功能代码 如何使用  上层调用 ，如果想知道大牛怎么写的 就叫做 底层原理

1.2 jQuery 安装


第一种方式 网络链接
<script type="text/javascript"  src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
​
第二种范本 本地链接
A 在js文件夹上面右键新建 js文件
B 命名为 jq 选择模板 jquery-3.4.1-min.js
C 在html中 通过 script标签的 src引入
<script type="text/javascript" src="js/jq.js"></script>
​
https://jquery.cuishifeng.cn/

1.3 jQuery 核心和选择器


使用原生js完成点击按钮改变背景颜色
​
<body>
        
        <button id="foo">改变颜色</button>
        
        <script type="text/javascript" src="js/jq.js"></script>
        <script type="text/javascript">
            
            var  btn =   document.querySelector("#foo");
            btn.onclick = function(){
                
                document.body.style.backgroundColor = "red";
                
            }
            
        </script>
    </body>
​
我们发现 使用js进行操作的时候 首先我们需要将内容获取。
jQuery核心 就是在jQuery中如果获取页面标签
​
JavaScript方式                                                   jQuery
document.querySelector("#foo");                                  $("")
document.querySelectorAll("选择器");
​
<body>
        
        <button id="foo">改变颜色</button>
        
        <script type="text/javascript" src="js/jq.js"></script>
        <script type="text/javascript">
            
            $("#foo").click(  function(){ 
                
                $("body").css( "backgroundColor" , "blue"  );
                
            } );
            
        </script>
    </body>
​
​

1.4 jQuery 中的css


我们使用原生的js代码给页面标签添加样式
​
foo.style.backgroundColor = "red";
foo.style.width = "666px";
​
在jQuery中 可以使用 css的函数进行样式的设定
​
    <body>
​
        <button id="foo">改变颜色</button>
​
        <ul>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
        </ul>
​
​
        <script type="text/javascript" src="js/jq.js"></script>
        <script type="text/javascript">
            $("#foo").click(function() {
                $("li:lt(1)").css({
                        "color": "red"  ,
                        "background-color": "blue",
                        "width":"120px",
                        "height":"666px"
                    });
            });
        </script>
    </body>
​

1.5 jQuery 中的事件


在JavaScript中 事件的添加是这个样子的：
    
foo.onclick = function(){
    
    
}  
​
在jQuery中 事件的添加是这个样子的：
    
$("#foo").click(  function(){}  );    
​
基本上就是 js的事件 干掉on
    
jQuery还有一种写法
<body>
​
        <button id="foo">改变颜色</button>
​
        <ul>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
        </ul>
​
​
        <script type="text/javascript" src="js/jq.js"></script>
        <script type="text/javascript">
            
           
        
            var a = prompt("请输入你想要的效果");
            
            $("#foo").on( a   ,function(){
                $("li:lt(1)").css({
                        "color": "red"  ,
                        "background-color": "blue",
                        "width":"120px",
                        "height":"666px"
                    });
            } );
            
        </script>
    </body>

1.6 jQuery 中的属性和筛选


<script type="text/javascript">
              
            foo.onclick = function(){
                var arr = document.querySelectorAll(".bar");
                for(var i=0;i<arr.length;i++){
                    arr[i].checked = true;
                }
            }
           
            
</script>
​
此时jQuery版本是这个样子的
​
        <button id="foo">改变颜色</button>
​
        <input type="checkbox" class="bar" />
        <input type="checkbox" class="bar" />
        <input type="checkbox" class="bar" />
        <input type="checkbox" class="bar" />
        <input type="checkbox" class="bar" />
        <input type="checkbox" class="bar" />
​
​
        <script type="text/javascript" src="js/jq.js"></script>
        <script type="text/javascript">
              
            $("#foo").click( function(){
                $(".bar").prop("checked" , true);
            });
            
        </script>
​
​
​
HTML代码/文本/值                                              JavaScript
​
    html([val|fn])                                           foo.innerHTML 
    text([val|fn])                                           foo.innerText
    val([val|fn|arr])                                        输入框.value
​
​
<head>
        <meta charset="utf-8" />
        <title></title>
​
        <style type="text/css">
            
            .s {
                background-color: red;
                color: green;
            }
            
            
        </style>
​
​
    </head>
    <body>
​
        <button class="s">天猫</button>
        <button>店铺</button>
        <button>宝贝</button>
​
        <script type="text/javascript" src="js/jq.js"></script>
        <script type="text/javascript">
             
             $("button").click( function(){
                 $(this).addClass("s").siblings().removeClass("s");
             });
            
        </script>
    </body>
​
​

1.7 jQuery 的效果


jQuery开发了一套强大的动画特效js代码 让我们不知不觉就完成动画。
​
<body>
​
       <ul>
        <li >宝马
           <ul>
              <li>M3</li>
              <li>M4</li>
              <li>M5</li>
           </ul>
        
        </li>
        <li >宝骏
           <ul>
                <li>730</li>
                <li>520</li>
                <li>310</li>
           </ul>
        </li>
        <li >保时捷
            <ul>
                <li>718</li>
                <li>911</li>
                <li>918</li>
            </ul>
        </li>
       </ul>
       
       <script type="text/javascript" src="js/jq.js"></script>
       <script type="text/javascript">
       
             $("li").click( function(e){ 
                 $(this).children().stop().slideToggle();
                 e.stopPropagation();
             } );
        
       </script>
       
    </body>
​
​
​

1.8 jQuery 文档处理


文档处理就是DOM操作的增删改
    <head>
        <meta charset="utf-8" />
        <title></title>
​
        <style type="text/css">
            select {
                width: 200px;
                height: 200px;
            }
        </style>
​
    </head>
    <body>
​
        <select multiple="multiple" id="left">
            <option value="">狮子头</option>
            <option value="">牛肉丸</option>
            <option value="">毛肚</option>
            <option value="">虾滑</option>
            <option value="">鱼豆腐</option>
        </select>
​
        <select multiple="multiple" id="right"></select>
        <div>
            <button>去右边</button>
            <button>全去右边</button>
            <button>去左边</button>
            <button>全去左边</button>
        </div>
​
        <script type="text/javascript" src="js/jq.js"></script>
        <script type="text/javascript">
            $("button:eq(0)").click(function() {
                $("#left  option:selected").appendTo("#right");
            })
            $("button:eq(1)").click(function() {
                $("#left  option").appendTo("#right");
            })
        </script>
​
    </body>
​
​
​
​
​
​
​
​
​
​
​
​

 

posted @ 2021-11-08 19:05  吴光熠  阅读(20)  评论(0)    收藏  举报