jQuery基础

HannyGn

已于 2024-03-17 16:10:21 修改

阅读量864

点赞数 30

分类专栏：前端文章标签： jquery 前端 javascript

于 2024-03-12 20:05:32 首次发布

本文链接：https://blog.csdn.net/GodnFrnXX/article/details/136661805

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery是JavaScript的第三方的模块组件(类库),可以利用jQuery来实现bootstrap的动态效果(目前bootstrapV5可以不依赖jQuery就能实现效果)
首先需要下载jQuery,存放到pycharm的web中的static目录下
引用方式和JavaScript一致,在body的尾部写入<script src=".../.../jQuery.min.js"></script>
然后引入<script type="text/JavaScript"></script>

实例运用
1.id选择器
例如需要寻找一个ID=city的div标签,并更改.
如果是JavaScript中应该是getelementbyid("city"),然后定义一个变量var,然后使用innertext来进行更改.
如果是使用jQuery则 $("#city").text("???");
即可以进行更改数据
2.样式选择器(类选择器)
例如一个span中class=a1
使用jQuery进行寻找是   $(".a1")
3.标签选择器
例如存在三个span
<span class="a1">1</span>
<span class="a2">2</span>
<span class="a3">3</span>
同时选中span标签则 $("span")
4.层级选择器
如存在很多层级的标签,例如存在
<h1 class="head">abc</h1>
<h1 class="b1">
   <div class="c1">
       <span class="a1">
               </span>
                   </div>
           </h1>
需要找到span标签,同时存在两个h1标签,span标签嵌套在第二个h1标签内,如果要寻找span,则
$(".b1 .c1 span")
5. 多选择器
<body>
<h1 class="head">abc</h1>
<h1 class="b1">
   <div class="c1">
       <span class="a1">
               </span>
                   </div>
           </h1>
<ul>
<li></li>
<li></li>
</ul>
</body>
如果需要同时找到div span和ul,则
$("#c1,#a1,ul")
注意,井号,并且二者之间是逗号隔开,代表不仅要找c1标签,还要寻找a1标签,还要寻找ul标签.
6.属性选择器
例如:
<input type='text' name="a1">
<input type='text' name="a2">
<input type='text' name="a3">
需要寻找input中name等于a1的标签
$("input[name='a1']")

间接的标签选择
<div>
   <div>a</div>
   <div id="a1">b</div>
   <div>c</div>
   <div>d</div>
</div>
$("#a1").prev() //寻找上一个兄弟标签的内容,这里寻找到的数据就是a
$("#a1").next() //寻找下一个兄弟标签的内容,这里寻找到的数据就是c
.next和.prev都可以继续嵌套,以寻找上上个或者下下个数据
例如:
$("#a1").next().next() 寻找到的就是d
$("#a1").siblings() //找到所有的兄弟标签,但是并不包括本身

寻找父子关系
<div>
   <div id="c1">
       <div>a</div>
       <div id="a1">
           <div id="b1">1</div>
               </div>
       <div>c</div>
       <div>d</div>
   </div>
   <div>
       <div>aa</div>
       <div id="a2">bb</div>
       <div>cc</div>
       <div>dd</div>
   </div>
</div>

$("#a1").parent() //寻找a1标签的父亲,即上层的div,id=c1
$("#a1").children() //寻找a1标签的儿子,即下层的div,id=b1
同样children和parent都可以嵌套
$("#a1").children().children()
如果需要特定的parent或者children,则再括号中填入class标签名字(".???"),或者填入id名称("#???"),或者直接("//标签类型,例如div,span")

$("#a1").find() 寻找所有的子孙

jQuery中
如果需要移除class效果,可以removeclass("??")
如果需要增加class效果,可以addclass("??")
如果需要判定class效果是否存在与标签内,则hasclass("??")

class类型中可以使用cursor:pointer //移动到标签中光标会变为手指,而并非指针

值的操作
例如存在一个div   <div id="a1">123</div>
如果要通过jQuery获取div中的内容,则
<script src="???/???/jQuery.min.js">
   $("#a1").text()
</script>
如果要通过jQuery更改div中的内容,则
<script src="???/???/jQuery.min.js">
   $("#a1").text(???)
</script>

如果是input这种需要用户输入的数据,则返回值便不是.text(),需要获取input需要.val()
例如:
<input id="a1" type="button" placeholder="用户名" οnclick="//自己定义的函数名称">
如果需要获取用户中的用户名,则再script中写入自己的函数名称{}
$("#a1").val() //获取了id为a1的输入值,如果想进一步获取数据并展示到本地,可以直接var一个变量,然后反馈到本地,例如var usersname=$("#a1").val()
当我们再次调用usersname的时候,便会返回输入的id为a1的input中的输入数值

如果需要添加新的标签,例如在body中有一个ul(id为b1),需要在ul中添加li
var list =$("<li>").text(???); //创建一个变量为list存贮li,li中的数据为???
$("#b1").appendchild(list); //在id等于b1的ul中添加孩子li,且孩子中的数据为变量list中的数据

如果需要彻底删除某个标签,则首先确定标签,例如:<div id="a1">123</div>
则 $("#a1").remove();

绑定事件
例如存在ul中li
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

!!!注意,一般不会直接写入$(this),因为如果在script中直接写$(this)需要等网页全部执行完成时才能运行script中的$(this)操作.所以一般是
$(function(){
   $(this)???
   })
在所有需要执行的函数操作,或者需要读取点击的操作前嵌套一个
$(function(){
//在这里面嵌套的写入需要的操作   }
)

HannyGn

关注

30
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
jQuery基础

如果是JavaScript中应该是getelementbyid("city"),然后定义一个变量var,然后使用innertext来进行更改.需要找到span标签,同时存在两个h1标签,span标签嵌套在第二个h1标签内,如果要寻找span,则。注意,井号,并且二者之间是逗号隔开,代表不仅要找c1标签,还要寻找a1标签,还要寻找ul标签.如果是使用jQuery则 $("#city").text("?使用jQuery进行寻找是 $(".a1")同时选中span标签则 $("span")
复制链接

扫一扫