首页 > Web开发 > 详细

jQuery

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

jQuery

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

 

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

 

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

 

jQuery1个对象,也是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)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!