Jquary初识

最新推荐文章于 2023-01-30 20:34:14 发布

朕葱哥

最新推荐文章于 2023-01-30 20:34:14 发布

阅读量225

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_43243728/article/details/102965226

版权

学习专栏收录该内容

23 篇文章 1 订阅

订阅专栏

Jquery基础知识

基本概念：
Jquery是一个js内库，能够帮我们轻松实现一些原本可能比较麻烦的功能。

JQ实际就是一个JS文件，加载到页面就可以直接使用了。

也可以使用网络上提供的。适合在线使用

<scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

使用cdn的好处:

1. 省事

2. 速度快

缺点：无法调试。

语法：
$（选择器）.action（）；

$：定义了这个是一个JQ的代码。

选择器：（和css类似）按照一定的规则选择DOM元素。

————

<body>
<p id="id1" οnclick="a()">第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
    var p=document.getElementById("id1");
     functiona(){
     p.style.color="red";
     }

————

<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
    var p=document.getElementsByTagName("p");
    for(var i in p){
        p[i].addEventListener("click",a);
    }

——————

$("p").click(red);
     function red(){
     this.style.color="red";
     }

比如上面几个代码，都实现的同一个功能，明显CSS比较简答，但是最简单的还是Jquary。只需三行就搞定了
选择器
（1）元素选择器：

根据表签名来获取元素。

<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>

    $("p").click(red);
     functionred(){
     this.style.color="red";
     }

比如$（“p”）：表示的获取所有的段落

（2）id选择器：

   $(“#p1”)：表示选择id=“p1”的元素

<body>
<p>第一个段落</p>
<p id="p2">第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
    $("#p2").click(red);
     functionred(){
     this.style.color="red";
     }
</script>

（3）class选择器： $(".top2").click(red);

<p class="top2">第一个段落</p>
<p class="top2">第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
    $(".top2").click(red);
     functionred(){
     this.style.color="red";
     }

（4）后代选择器： $("div p").click(red);

<div>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
</div>
    <p>第四个段落</p>
</body>
<script>
    $("div p").click(red);
    function red(){
        this.style.color ="red";
    }

（5）$("p:first").click(red)：表示选择P标签的第一个元素，相当于css中的伪类选择器。
（6）属性选择器： $("p[name]").click(red);

<p name="first">第一个段落</p>
    <p name="qwe">第二个段落</p>
    <p name="asd">第三个段落</p>
    <p>第四个段落</p>
</body>
<script>
    $("p[name]").click(red);
    function red(){
        this.style.color ="red";
    }

（7）$("p[name='asd']").click(red)：只选择：name=asd的

事件：
Jq中注册事件的方法也是调用jq对象的方法，

比如单击事件：

鼠标移入事件

$("#div1").mouseenter()而且方法名就是js中的事件名

之前，我们所有的js是放在<body>之后的，如果放到body之前呢？

实验证明放到body之前，是会出错的，获取的元素为空，因为代码是从上往下走的，还没有加载完成，所以在Jquary中的解决方法如下：

$(document).ready(function(){



});

在其中的匿名函数里写你想要的东西，就可以解决这个问题了。

动画
显示、隐藏
Hide（）：隐藏

将高度、宽度、透明度变为0.

$("#div1").hide(600);       （注意：这个600是毫秒时间，变化的速度，可要可无）

Show（）：显示

$("#div1").show(600);将高度、宽度、透明度变为初始的css设置的格式。

Toggle（）：

如果display为none的时候，点击一下就变成block；

反之则变成none。

$("#div1").toggle(600);

淡入淡出
fadeIn():淡入

$("#div1").fadeIn(600);  //将隐藏的样式通过改变其透明度（透明度从0到1），让他显示出来。

Fadeout：淡出

$("#div1").fadeOut(600);//将显示出的样式通过改变其透明度（透明度从1到0）让他隐藏起来。

fadeToggle：淡入淡出的切换

$("#div1").fadeToggle(600); //如果样式显示，则点击它，就隐藏；反之，出现。

fadeTo：（）：固定其透明度。$("#div1").fadeTo(600,0.5);       0.5为透明度

滑动
Slideup（）：上滑

$("#div1").slideUp(600);//将设置的高度从初始值变为0，最后隐藏它。

Slidedown（）：下滑

$("#div1").slideDown(600);//显示它，然后将设置的高度从0变为初始值

Slidetoggle（）：上滑下滑切换$("#div1").slideToggle(600);

如果是隐藏，点击它，则出现，反之隐藏。

Animate：移动，推动

  $("button").click(function () {
/*$("#div1").animate({left:'600px',top:'200px'});*/
$("#div1").animate({left:'300px',width:'200px',height:'200'});
});

同时实现多个属性的方法

$("#div1").animate({
    left:'200px',
    top:"200px",
    width:"+=300px",
    height:"+=300px",
    opacity:"0.5"
})

预定义值
改变预定义值来实现内容的显示或隐藏

 <style>
        #div1{
            width:100px;
            height:100px;
            background-color:darkgray;
            position:absolute;
        }
    </style>
</head>
<body>
<button>开始动画</button>
<div id="div1"></div>
</body>
<script>

    $("button").click(function () {
        $("#div1").animate({
            height:'toggle'
        });
    })