jQuery
发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了【jQuery】jQuery基础，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
jQuery介绍
jQuery选择器
- jQuery选择器用于选中需要操作的页面元素@H_450_10@
- 语法1：jQuery(选择器表达式)@H_450_10@
- 语法2：$(选择器表达式)@H_450_10@
基本选择器
| $("#id") |
ID选择器，指定Id元素的对象 |
| $("标签") |
元素选择器，选择指定标签名的选择器 |
| $(".class") |
类选择器，选中拥有指定css类的元素 |
| $("S1,S2,SN") |
组合选择器，对元素进行组合 |
层叠选择器
| $("ancestor descendant") |
后代选择器 |
| $("ancestor>descendant") |
子选择器 |
| $("prev~siblings") |
兄弟选择器 |
| $("SELEctor[attribute=value]") |
选中属性值等于具体值的组件 |
| $("SELEctor[attribute^=value]") |
选中属性值以某值开头的组件 |
| $("SELEctor[attribute$=value]") |
选中属性值以某值结尾的组件 |
| $("SELEctor[attribute*=value]") |
选中属性值包含某值的组件 |
位置选择器(不常用)
表单选择器(不常用)
- attr(name|properties|key) - 获取或设置元素属性
$("a[href*=‘163‘]").attr("href","http://www.163.com");将网易邮箱地址改为网易主页地址@H_450_10@
- removeAttr(Name) - 移除元素属性
$("a").removeAttr("href");将所有a标签的href属性移除@H_450_10@
操作元素的CSS样式
- css() - 获取或设置匹配元素的样式属性
$("a").css("color","red");将所有a标签的color样式设置为red
$("a").css({"color":"red","font-weight":"bold"});传入JSON对象一次设置多个属性值@H_450_10@
- addClass() - 为每个匹配的元素添加指定的类名
$("li").addClass("highlight myclass");为li标签增加两个css类@H_450_10@
- removeClass() - 从所有匹配的元素中删除全部或者指定的类
$("p").removeClass("myclass");移除p标签的myclass类@H_450_10@
- val() - 获取或设置输入项的值
$("input[name=‘username‘]").val();获取文本框的值
$("input[name=‘username‘]").val("请输入姓名");设置文本框的值@H_450_10@
- text() - 获取或设置元素的纯文本
$("span").text("<b>你好啊！</b>");将span中的内容设置为<b>你好啊</b>(文本中的html标签进行转义)@H_450_10@
- html() - 获取或设置元素内部的HTML
$("span").html("<b>你好啊！</b>");将span中的内容设置为你好啊！(文本中的html标签不进行转义)@H_450_10@
jQuery事件处理方法
- on("click",function) - 为选中的页面元素绑定单击事件@H_450_10@
- click(function) - 是绑定事件的简写形式@H_450_10@
- 处理方法中提供了event参数包含了事件的相关信息@H_450_10@
jQuery常用事件
| click |
keypress |
submit |
load |
| dblclick |
keydown |
change |
resize |
@H_576_33@mouseenter
| keyup |
focus |
scroll |
@H_576_33@mouSELEave
|
blur |
unload |
@H_576_33@mouSEOver
|
|
|
实例
<!DOCTYPE html >
<html>
<head>
<Meta charset="UTF-8">
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery练习</title>
<style type="text/css">
.div1 {
float: left;
width: 50px;
line-height: 30px;
BACkground-color: lightgray;
margin-left: 10px;
text-align: center;
vertical-align: middle;
}
.div2 {
width: 300px;
height: 300px;
border: solid gray 1px;
margin-top: 60px;
color: red;
}
</style>
</head>
<body>
<h2>请选择背景颜色</h2>
<div>
<div id="blue" class="div1">蓝色</div>
<div id="green" class="div1">绿色</div>
</div>
<div class="div2" id="bg"></div>
<div>
输入颜色首字母： <input type="text" name="color">
</div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
alert("欢迎来到设置颜色的页面");
$("#blue").click(function(){
$("#bg").css("BACkground-color","blue");
$("#bg").text("蓝色背景");
});
$("#green").click(function(){
$("#bg").css({"BACkground-color":"green","font-weight":"bold"});
$("#bg").text("绿色背景");
});
$("input[type='text']").keypress(function(event){
if(event.keyCode == 66){
$("#bg").css("BACkground-color","blue");
$("#bg").text("");
}
if(event.keyCode == 71){
$("#bg").css("BACkground-color","green");
$("#bg").text("");
}
});
</script>
</body>
</html>
@H_
404_377@
大佬总结
以上是大佬教程为你收集整理的【jQuery】jQuery基础全部内容，希望文章能够帮你解决【jQuery】jQuery基础所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
