java web jquery_JavaWeb进阶--JQuery入门
主要内容：
JavaScript库：
JQuery库：
JQuery下载与安装：
下载好jquery-3.3.1.min.js和jquery-3.3.1.js文件后，将其复制到web工程的WebContent目录下新建的js文件夹：
jQuery选择器实验室：选择相应的标签使其高亮显示
测试代码：
lab.html:
jQuery实验室
.myclass {
font-style: italic;
color: darkblue;
}
/* 高亮css类 */
.highlight {
color: red;
font-size: 30px;
background: lightblue;
}
jQuery选择器实验室
选择
欢迎来到选择器实验室
搜索引擎：百度
style=”color: darkgreen” href=”http://www.so.com">360
电子邮箱：网易邮箱
style=”color: darkgreen” href=”http://mail.qq.com">QQ邮箱
中国名校：清华大学
北京大学
我是拥有myclass类的span标签
我是拥有myclass的p标签
用户名： 密码：
type=”password” name=”upsd” value=”123456” />
婚姻状况：
未婚
已婚
离异
丧偶
/*
id选择器使用”#id值”进行选择
css选择器使用”.css类名”进行选择
$(“.myclass”).addClass(“highlight”);
*/
document.getElementById(“btnSelect”).onclick = function(){
//接受传入的参数保存在selector里
var selector = document.getElementById(“txtSelector”).value;
//jquery的选择器方法
//选择器
//每次只高亮选择的元素，故先移除所有高亮，再在选中的给予高亮显示
//移除所有高亮
$(“*“).removeClass(“highlight”);
//高亮选择的元素
$(selector).addClass(“highlight”);
}
输出结果：
分别选择a span p 标签，输出结果：
JQuery选择器：
基本选择器：
输出结果：
ID选择器：
标签选择器：
类选择器：
组合选择器：中间使用 逗号 分隔开
层叠与属性选择器：
输出结果：
后代选择器：选中符合要求的所有后代，无论跨几代
子选择器：
兄弟选择器：选择左边元素之后的同级元素
所以并未选中
属性选择器：常常和正则表达式一起使用
输出结果：
位置选择器：
输出结果：
表单选择器：就是type的值
输出结果：
操作元素属性：
操作元素属性：
测试代码：
//获取href属性：传递一个参数
var href_attr = $(“a[href*=’163’]“).attr(“href”);
alert(href_attr);
//设置href属性：传递两个参数
$(“a[href*=’163’]“).attr(“href” , “http://www.163.com“);
href_attr = $(“a[href*=’163’]“).attr(“href”);
alert(href_attr);
//当选择多个元素的时候，默认是选择第一个
var attr = $(“a”).attr(“href”);
alert(attr);
输出结果：首先弹出更改前：
更改后：
多个元素会选择第一个：
移除属性：a不再是超链接
$(“a”).removeAttr(“href”);
操作元素的CSS样式：
输出结果：
获取a的css样式的color，如果会选择多个，默认返回第一个
var color = $(“a”).css(“color”);
alert(color);
设置a的css样式的color为red：
$(“a”).css(“color” , “red”);
测试代码：
//设置a的css的color样式为red
$(“a”).css(“color” , “red”);
//利用json表达式，设置多个属性值
$(“a”).css({“color” : “pink” , “font-weight” : “bold” , “font-style” : “italic”});
//为选中的元素增加css样式 空格分开可以增加多个类
$(“li”).addClass(“highlight myclass”);
//为选中的元素移除css样式
$(“p”).removeClass(“myclass”);
//获取a的css样式，如果存在多个，默认选择第一个
var color = $(“a”).css(“color”);
alert(color);
输出结果：
设置元素内容：
测试代码：
//val() 用于获取文本输入框的内容
//val(参数) 用于更改文本输入框的内容
$(“input[name=’uname’]“).val(“administrator”);
var v = $(“input[name=’uname’]“).val();
alert(v);
//text与html方法最大的区别在于对于文本中的html标签是否进行转义
//$(“span.myclass”).text(“锄禾日当午，汗滴禾下土“);
$(“span.myclass”).html(“锄禾日当午，汗滴禾下土“);
var vspan = $(“span.myclass”).text();
alert(“text:\n”+vspan);
var vspan1 = $(“span.myclass”).html();
alert(“html:\n”+vspan1);
输出结果：
JQuery事件处理方法：
测试代码：
//onload是指在页面所有资源加载完成后执行
window.onload = function(){
//alert(1);
}
//ready()则是在页面dom被浏览器解释完成后执行
$(document).ready(function(){
alert(“页面准备就绪”);
})
//简化形式
$(function(){
$(“p.myclass”).on(“click” , function(){
//$(this)是指当前事件产生的对象
$(this).css(“background-color” , “yellow”);
});
$(“span.myclass”).click(function(){
$(this).css(“background-color” , “lightgreen”);
})
$(“input[name=’uname’]“).keypress(function(event){
console.log(event);
if(event.keyCode == 32){
$(this).css(“color” , “red”);
}
})
})
输出结果：
分别店家span和p:
输入空格，会变成红色：
忘是亡心i
港控/mmm°
男娘i
￡神魔★判官ぃ
「爱情、让人受尽委屈。」
我会带着你远行
超、凢脫俗
![策略游戏设计日记[一]](https://image.dandelioncloud.cn/images/20230521/716f837882684a618ed4464805321291.png "策略游戏设计日记[一]")
还没有评论，来说两句吧...