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:

输入空格，会变成红色：