前端jQuery的介绍与用法

主流的JavaScript库:

jQuery Vue.js AngularJS React …

jQuery介绍:

jQuery是一个轻量级JS库,使用十分简单;
jQuery的核心是选择器,用于获取页面元素;
jQuery提供大量高效方法,开发速度大幅提升;

jQuery下载与使用:

jQuery官网:jquery.com
将jQuery的最新版本复制到Java工程(放入WebContent中新建的一个js文件夹)
在eclipse的html页面下插入 //jquery-3.3.1.js为目前下载使用的jQuery版本号

jQuery的基本选择器:

$(#“idname”) :ID选择器
$(".class"):CSS选择器
$(“a”):标签选择器
$(“a,idname”):组合选择器

jQuery的层叠选择器:

$(“ancestor descendant”):后代选择器,可选择父节点下的子节点or子节点的子节点等等所有包含的节点
$(“ancestor>descendant”):子选择器,只选择父节点的子节点
$(“prev~siblings”):兄弟选择器,选择同级的节点

jQuery属性选择器:

$(“selector[attribute=value]”):选中selector标签中属性值等于value的属性attribute组件``
$("selector[attribute=value]"):选中属性值以某值开头的组件:例如:$(“a[href^=‘http://mail.’]”): 则可获取href中以http://mail开头的所有邮箱
$("selector[attribute$=value]"): 选中属性值以某值结尾的组件
$(“selector[attribute*=value]”): 选中属性值包含某值的组件

jQuery位置选择器:

$(“selector:first”): 获取第一个selector元素
$(“selector:last”): 获取最后一个selector元素
$(“selector:even”): 获取偶位置的selector元素（从0开始）
$(“selector:odd”): 获取奇位置selector的元素（从0开始）
$(“selector:eq(n)”): 获取指定位置的selector元素（从0开始）

jQuery表单选择器:

表单选择器是获取表单元素的简化形式，例如：获取所有文本框
语法：
$(“selector:input”): 所有输入元素
$(“selector:text”): 获取文本框
$(“selector:password”): 密码框
$(“selector:submit”): 获取提交按钮
$(“selector:reset”): 获取重置按钮

jQuery操作元素属性:

$(“a[href*=‘163’]”).attr(“href”):获取所有a标签下的含有href超链接的属性,并返回第一个获得的href
$(“a[href*=‘163’]”).attr(“href”,“http://www.baidu.com”):当attr()中有多个属性值时,attr为设置操作,将a标签下所有含有163的超链接设置为http://www.baidu.com
$(“a[href*=‘163’]”).removeAttr(“href”):将a标签下所有含有163的超链接删除

jQuery操作元素的css样式:

css():获取或设置匹配元素的样式属性
例如:$(“a”).css(“color”,“red”); //将a标签下的颜色设置为红色
例如:var color = $("a").css("color");//获取a标签下的"color"属性,\ast \ast 如果有多个a标签,只返回第一个a标签的"color"属性\ast \ast 例如:$(“a”).css({“color”:“red”,“font-weight”:“bold”}); //在css()内传入一个JSON对象即花括号和里面的代码,则可一次性设置多个css属性
addClass():为每个匹配的元素添加指定的类名
例如:$(“li”).addClass(“类名”); //类名前面不需要加.
removeClass():从所有匹配的元素中删除全部或者指定的类

jQuery设置元素内容:

val():获取或设置输入项的值
例如:#(“input[name=‘uname’]”).val(“administrator”); //设置input中name等于uname的内容为administrator;当val()的括号中不输入内容时,为获取该input标签中name等于uname的内容
text():获取或设置元素的纯文本
例如:$("span.class").\ast \ast text\ast \ast ("aaa");//将文本内容设置为"aaa";html():获取或设置元素内部的HTML\ast \ast 例如:\ast \ast$(“span.class”).html(“aaa”); //将文本内容设置为加粗后的aaa
//text()和html()的区别为html()可以在括号内设置文字的加粗等效果,另一个不可以,括号内不加内容则为获取,一般使用text()

jQuery事件处理方法:

• on(“click”,function) 为选中的页面元素绑定单击事件
• click(function) 是绑定事件的简写形式
• 处理方法中提供了event参数包含了事件的相关信息

常用事件包括: 鼠标、键盘、表单、文档/窗口事件
例如:KaTeX parse error: Expected '}', got 'EOF' at end of input: …,function(){ //(this)是指当前时间产生的对象
$(this).css(“background-color”,“yellow”);
}); //将p标签的myclass属性在鼠标点击时显示黄色的背景
//与上面代码一样的效果,更加简洁
$(“p.myclass”).click(function(){
…
})
例如://将click换成keypress,为键盘一次按下弹起触发事件
//为输入框绑定键盘事件，一旦输入空格字变红
$(“input[name=‘uname’]”).keypress(function(event){
if( event.keyCode == 32 ){
$(this).css(“color”, “red”);
}
});