如何使用jQueryjQuery弹出框jQuery对div进行操作
Posted wskxy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用jQueryjQuery弹出框jQuery对div进行操作相关的知识，希望对你有一定的参考价值。
1.如何使用jQuery
jQuery是一个快速、简洁的javascript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。
使用jQuery前必须下载并引用jQuery的js文件，下载链接为http://jquery.com/
下载完成后引入jQuery文件
<script src="js/jQuery.js"></script>
为防止jquery程序中中文乱码，应在引入
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--防止乱码-->
</head>
2.jQuery弹出框
<script>
$(document).ready(function(){
alert("显示提示框，我的第一个jQuery程序");
});
</script>
3.jQuery对div进行操作
<script>
$(document).ready(function(){ //document表示加载body时触发的事件
$("p").click(function(){ //表示标签<p>的click事件
$(this).hide(); //隐藏这个标签加入参数可缓慢隐藏，如$(this).hide(1000); 一秒内缓慢隐藏
$(this).html("sda5"); //更改div内容
$(this).css("background-color","blue") //更改div的css 背景颜色
$(this).css("color","beige") //更改div的css 字体颜色
});
});
</script>
</head>
<body>
<p>sda1</p>
<p>sda2</p>
<p>sda3</p>
<p>sda4</p>
</body>
4.jQuery对class，id，type的操作
<head>
<script>
$(document).ready(function()
{
$(":button").click(function() //指定到type="button"，定义click事件
{
$(".test").hide(); //指定到class="test"，定义隐藏
});
$(":button").click(function() //指定到type="button"，定义click事件
{
$("#test").hide(); //指定到class="test"，定义隐藏
});
});
</script>
</head>
<body>
<p class="test">这个标签引用了类 test,触发事件会消失</p>
<a class="test">这个标签也引用了类 test,触发事件会消失</a>
<a id="test">这个标签也引用了id:test,触发事件会消失</a>
<p id="test">这个标签不引用</p>
<input type="button" value="clickme"/> <!--点击触发事件-->
</body>
5.jquery选择器
1)元素选择器
$("p") 选取所有 <p> 标签。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
2)属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href=\'#\']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!=\'#\']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=\'.jpg\']") 选取所有 href 值以 ".jpg" 结尾的元素。
3)CSS 选择器
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("p").css("background-color","red"); 选取所有<p>标签，并改变其css的background-color属性
以上是关于如何使用jQueryjQuery弹出框jQuery对div进行操作的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery 使用 bootstrap 5 弹出框？
用jquery如何点击button按钮调用后台方法查询数据返回到弹出框内