jQuery基础学习整理

最新推荐文章于 2024-05-06 00:06:17 发布

梦里赏风月

最新推荐文章于 2024-05-06 00:06:17 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/myl06/article/details/103950967

版权

Ajax基础

jquery介绍

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript
特效和HTML DOM 遍历和修改。

如何使用

下载jQuery库,直接在html中使用

<script src="jquery-3.4.1.min.js"></script>

jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
$符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
例子

$(this).hide() //隐藏当前元素

$("p").hide() // 隐藏所有 <p> 元素

$("p.test").hide() // 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() // 隐藏所有 id="test" 的元素

jQuery的入口函数，可以写成

$(document).ready(function(){
    // 执行代码
});
//或者
$(function(){
    // 执行代码
});

window.onload和$(document).ready()的区别是。window.onload在网页加载完毕后再执行，且只执行一次。
$(document).ready()只需等待dom加载完后即可执行，且可以多次执行。

jQuery实现输出一行字

$(function () {
	console.log('Hello World!');
})

jQuery选择器

jQuery选择器允许对 HTML 元素组或单个元素进行操作，是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

基本选择器

元素选择器

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id 选择器

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 选择器

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$(“p.intro”)	选取 class 为 intro 的p 元素
$(“p:first”)	选取第一个 p 元素
$(“ul li:first”)	选取第一个 ul 元素的第一个 li 元素
$(“ul li:first-child”)	选取每个 ul 元素的第一个 li 元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的 a 元素
$(“a[target!=’_blank’]”)	选取所有 target 属性值不等于 “_blank” 的 a 元素
$(":button")	选取所有 type=“button” 的 input 元素和 button 元素
$(“tr:even”)	选取偶数位置的 tr 元素
$(“tr:odd”)	选取奇数位置的 tr 元素

jQuery事件

1、页面对不同访问者的响应叫做事件。
2、实例：在元素上移动鼠标、选取单选按钮、点击元素
1、单击事件

$("p").click(function(){ 
// 动作触发后执行的代码!! 
});

2、双击事件

$("p").dblclick(function(){
 	$(this).hide(); 
})

3、鼠标进入

$("#p1").mouseenter(function(){ 
alert('您的鼠标移到了 id="p1" 的元素上!'); 
});

4、鼠标离开

$("#p1").mouseleave(function(){ 
alert("再见，您的鼠标离开了该段落。"); 
});

5、获取焦点

$("input").focus(function(){ 
$(this).css("background-color","#cccccc"); 
});

6、失去焦点

$("input").blur(function(){ 
$(this).css("background-color","#ffffff"); 
});

案例：实现手风琴效果


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		    *{
    margin: 0;
    padding: 0;
}
    #accordion{
    width: 500px;
}
    #accordion>div>p{
        width: 500px;
        text-align: center;
        border: 1px solid #ccc;
        background-color: red;
        font-size: 50px;
    }
    #accordion>div>p>img{
    width: 500px;
    height: 190px;
}   
    #accordion>div>div{
        width: 500px;
         
        background-size: 100%; 
        text-align: center;
        line-height: 80px;
        display: none;
        border:0.5px solid #ccc;

    }
	</style>
	<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="accordion">
    <div>
        <p>
            奋斗
        </p>
            <div>不要皱眉,即使在伤心的时刻,因为你从不知道有谁会醉心于你的笑容</div>
            <div>千万别说直到永远，因为你压根不知道永远有多远。</div>
    </div>
    <div>
        <p>
            努力
        </p>
            <div>你要努力，别因为生活，把自己变成一个low逼</div>
            <div>过去的靠现在忘记，将来的靠现在努力，现在才最重要。</div>
    </div>  
    <div>
        <p>
            加油
        </p>
            <div>如果放弃太早，你永远都不知道自己会错过什么。</div>
            <div>做一个有脑子的,别让说起你的人,只记得你是个没用的废人</div>
    </div>
          
</div>
</body>
<script type="text/javascript">

$("#accordion>div>p").click(function(){
    
    $(this).nextAll().slideToggle().end().parent().siblings().children("div").slideUp();
});


</script>
</html>

梦里赏风月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础学习整理

Ajax基础jquery介绍jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript特效和HTML DOM 遍历和修改。如何使用下载jQuery库,直接在html中使用<script src="...
复制链接

扫一扫