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>
<script src="???/???/jQuery.min.js"></script>
<script>
$("li").click(function(){
var clicktext=$(this).text(); //$(this)意味着标记当前点击的标签,并获取当前点击的事件的text数值, 并覆盖给变量clicktext.
}
)
$(this)的意思就是现在所点击的任意标签,时间,作为传输回来的数据.
例如存在
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
当单击标签为a的li,传输回的数据标签就是<li>a</li>,如果需要进行下一步的动作,可以直接在$(this)后接.remove或者.add等等
例如需要删除单击后的数据标签,则可以在script中直接写入$(this).remove();
!!!注意,一般不会直接写入$(this),因为如果在script中直接写$(this)需要等网页全部执行完成时才能运行script中的$(this)操作.所以一般是
$(function(){
$(this)???
})
在所有需要执行的函数操作,或者需要读取点击的操作前嵌套一个
$(function(){
//在这里面嵌套的写入需要的操作 }
)