jQuery

时间：2019-06-07 15:11:43 阅读：77 评论：0 收藏：0 [点我收藏+]

jQuery

jQuery是一个快速、简洁的JavaScript框架，一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery 代码库（封装好了很多的方法）<===> Vue （MVVM）

MVC --> M-model(数据) ----> V-view视图--->C-control（控制器）--->M-model(数据)--->V-view

jQuery是1个对象，也是1个函数对象，有很多好用的属性和方法。JavaScript语言写出来的一个函数对象。

jQuery现在已经发布到第三个大版本，一般用第一个版本，因为兼容性最好。第三个版本是IE9以上才兼容。(功能没啥变化)

jQuery原理：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <h1></h1>
        <script type="text/javascript">
        //jQurey 原理
            (function(window){
                //selector 选择器
                var lc =function(selector){
                    var dom =document.querySelector(selector)
                    var result = {
                        dom : dom
                    }
                    //原型对象
                    var yxObj = {
                        //如果有参数就设置innerHtml的内容，没有就返回innerHtml的内容
                        html: function(content){
                            if(content){
                                this.dom.innerHTML = content 
                                return this
                            }else{
                                return this.dom.innerHTML
                            }
                            },
                            css:function(key,value){
                                this.dom.style[key] = value;
                            }
                        }
                        
                        
                        
                    
                    //设置result的原型对象是yxObj
                        
                        result.__proto__ = yxObj
                    return result
                }
                window.lc=lc
            })(window)
            
            //lc("h1").html("<span>老陈库</span>")
            //lc(‘h1‘).css(‘background‘,"purple")
            
            
            //链式原理：返回的值为当前的对象，返回this
            lc(‘h1‘).html("<span>老陈jq库</span>").css(‘background‘,"pink")
        </script>
    </body>
</html>

快速获取dom

语法：$(“选择器”)，按照css选择器进行选择即可

返回值：jQuery文档对象,注意这个jQuery对象跟原生的dom对象不是一个东西，这里面有jQuery封装好的方法。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>helloworld</h1>
        
        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //同一个对象
        console.log($)
        console.log(jQuery)
        //简单用法
        $("h1").css({
            background:"skyblue",
            fontSize:"50px",
            color:"#fff"
        }).html("zhongwu").css({
            border:"10px solid #000"
        })
        
        
        
        
        //1.快速获取document
        //var h2 = document.querySelector("h1")
        var h1 = $("h1")
        
        
        //h2.style.background = "skyblue"
        //h1[0].style.fontSize = "50px"
        //css方法快速更改样式
        h1.css("font-size","100px")
        h1.css({
                border:"1px solid #000",
                "box-shadow":"0px 5px 10px #ccc"
        })
        
        
            //2.快速设置文档样式
            //3.快速设置文档内容
            //4.快速将内容插入文档
            //5.快速的写JS的动画
            //6.快速html事件
            //7.快速的写ajax
    </script>
    
    </body>
</html>

快速设置文档样式

语法：$(“选择器”).css(“样式的属性”，“样式的值”)

一次性设置多个样式：

$(“选择器”).css({属性key：属性value,属性key:属性value......})

注意：如果属性key是由多个单词用-并联组成，那么必须用驼峰命名法，或者加引号来解决。

设置获取文档内容

语法：

$(“选择器”).html() ---->获取文档的html内容

$(“选择器”).text() ---->获取文档的text内容

$(“选择器”).val() ---->获取输入框的value值

$(“选择器”).html(“html内容”) ---->设置文档的HTML内容

$(“选择器”).text(“文本内容”) ---->设置文档的text内容

$(“选择器”).val(“value”) ---->设置输入框的value值

快速将内容插入文档

语法：

$(选择器).append("<h1>helloworld</h1>") ---->将参数里面的html追加到选择器对象的最后一个子元素上

$(‘.child‘).appendTo(‘.parent2‘) ---->将选择器的对象插入到参数的对象上

$(".child").insertBefore("ul") ---->在什么前面插入内容

$(‘.child‘).insertAfter("ul") ---->//在什么后面插入内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="parent" class="parent">
            
        </div>
        <div class="parent2">
            <h1>woaini</h1>
        </div>
        <input type="text" name="user" id="user" value="" />
        
        
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表5</li>
        </ul>
        
        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
                 //2.快速设置文档样式文档内容
                 
        $("#parent").html("<h1>woaini</h1>")
            console.log($("#parent").html())
            
            
            //3.快速更改文档内容
            $("#parent").text("helloworld")
            console.log($("#parent").text())
            
            //4.快速将内容插入文档
            $("#user").val("admin")
            console.log($("#user").val())
            
            $("ul li").css("background",‘skyblue‘).html(‘都是列表！！！！‘)
            
           //往选择器里面插入数据
           $(".parent").append("<h1>helloworld</h1>")
            
            //将选择器的对象插入到参数的对象上。
            $(".parent").appendTo(".parent2")
            
            //在什么前面插入内容
            $(".child").insertBefore("ul")
            
            
            //在什么后面插入内容
            $(‘.child‘).insertAfter("ul")
            
            
            
            //5.快速的写JS的动画
            //6.快速html事件
            //7.快速的写ajax
    </script>
    
    </body>
</html>

快速的写JS的动画

语法:

$(".parentt").slideToggle(5000) --->//滑动切换

$(".parentt").fadeToggle(5000) --->//淡入淡出切换

$(".parentt").fadeIn(5000,"linear",function(){console.log("动画完成")}) --->淡入进来

$(".parentt").fadeOut(5000) --->淡入出去

$(‘.parentt‘).animate({width:"900px"},5000,"linear",function(){console.log("动画已完成")})

推荐：添加类名的方式完成动画

$(‘.parentt‘).addClass("animate")

快速html事件

语法：

$(选择器).click(function(e){点击事件之后要执行的内容})

$(选择器).on(“事件的名称”，function(e){事件要执行的内容})

//文档加载完毕即执行事件，仅文档加载完毕，不用等待图片加载，可以将js代码放置到前后都行。

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

缩写：$(function(){})

快速的写ajax

jQuery

原文：https://www.cnblogs.com/406070989senlin/p/10988161.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)