jQuery介绍

jQuery是一个轻量级JS库，使用十分简单；

jQuery的核心是选择器，用于获取页面元素；

jQuery提供了大量高效的方法，开发速度大幅提升；

jQuery选择器

  • jQuery选择器用于选中需要操作的页面元素
  • 语法1：jQuery(选择器表达式)
  • 语法2：$(选择器表达式)
基本选择器
语法 说明
$("#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]") 选中属性值包含某值的组件
位置选择器(不常用)
语法 说明
$("selector:first") 获取第一个元素
$("selector:last") 获取最后一个元素
$("selector:even") 获取偶数位置的元素(从0开始)
$("selector:odd") 获取奇数位置的元素(从0开始)
$("selector:eq(n)") 获取指定位置的元素(从0开始)
表单选择器(不常用)
语法 说明
$("selector:input") 所有输入元素
$("selector:text") 获取文本框
$("selector:password") 获取密码框
$("selector:submit") 获取提交按钮
$("selector:reset") 获取重置按钮
...

操作元素属性

  • attr(name|properties|key) - 获取或设置元素属性

    $("a[href*='163']").attr("href", "http://www.163.com");将网易邮箱地址改为网易主页地址
  • removeAttr(name) - 移除元素属性

    $("a").removeAttr("href");将所有a标签的href属性移除

操作元素的CSS样式

  • css() - 获取或设置匹配元素的样式属性

    $("a").css("color", "red");将所有a标签的color样式设置为red

    $("a").css({"color":"red","font-weight":"bold"});传入JSON对象一次设置多个属性值
  • addClass() - 为每个匹配的元素添加指定的类名

    $("li").addClass("highlight myclass");为li标签增加两个css类
  • removeClass() - 从所有匹配的元素中删除全部或者指定的类

    $("p").removeClass("myclass");移除p标签的myclass类

设置元素内容

  • val() - 获取或设置输入项的值

    $("input[name='username']").val();获取文本框的值

    $("input[name='username']").val("请输入姓名");设置文本框的值
  • text() - 获取或设置元素的纯文本

    $("span").text("<b>你好啊！</b>");将span中的内容设置为<b>你好啊</b>(文本中的html标签进行转义)
  • html() - 获取或设置元素内部的HTML

    $("span").html("<b>你好啊！</b>");将span中的内容设置为你好啊！(文本中的html标签不进行转义)

jQuery事件处理方法

  • on("click", function) - 为选中的页面元素绑定单击事件
  • click(function) - 是绑定事件的简写形式
  • 处理方法中提供了event参数包含了事件的相关信息
jQuery常用事件
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
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>

【jQuery】jQuery基础的更多相关文章

  1. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  2. jQuery 插件基础

    jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...

  3. jquery插件开发基础入门

    jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...

  4. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  5. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  6. jQuery的基础语法实例

    jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...

  7. 新知识：JQuery语法基础与操作

     jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...

  8. jQuery之基础核心（demo)

    jQuery之基础核心     作者的热门手记 jQuery之基础核心(demo)   本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...

  9. 第一百六十三节，jQuery，基础核心

    jQuery,基础核心 一．代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所 ...

  10. 第一百六十九节，jQuery，基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

随机推荐

  1. git合并多次commit提交

    在开发项目工程中经常会遇到为了一个需求产生多次提交记录.有些是可以接受的,比如按照功能点不同进行的提交.但往往会存在这种,只为了一个小东西进行改动,比如多余文件的提交.书写不规范而不得不提交的情况.多 ...

  2. SSM框架之SpringMVC（2）参数绑定及自定义类型转换

    SpringMVC(2)参数绑定及自定义类型转换 1.请求参数的绑定 1.1. 请求参数的绑定说明 1.1.1.绑定机制 表单提交的数据都是k=v格式的 username=haha&passw ...

  3. Scss换肤

    项目中虽然没有一键换肤的要求,但是产品要求后期能换主题.在开发组件中涉及到主题的地方,要提取一些公用的变量,不要直接写死样式值.但是如果只是定义一些变量的话,只是完成控制颜色等值的提取.后期切换的话需 ...

  4. JAVA学习路线，实战开发

     Java基础课程内容包含:Java开发介绍.Java数组.Java面向对象.常用基础类.集合.IO流.多线程.异常.反射.  第一部分:Java开发介绍  1. DOS常用命令  2. JVM.JR ...

  5. MVC(基础二)

    原文链接:https://blog.csdn.net/wuzxc520/article/details/77880783 1.网站开发介绍 2.响应流程 3.MVC 介绍 4.文件夹含义

  6. 推荐一款可以直接下载浏览器sources资源的Chrome插件

    github地址:https://github.com/up209d/ResourcesSaverExt 经常在仿站的时候回遇到下载别人的图片.css.js等资源,发现要一个个的手动下载.直接使用仿站 ...

  7. 修改SQL Server中的计算机名

    安装SQL Server之后,如果修改计算机名会导致登录异常,或者某些功能不能用,例如配置Replication时会提示如下错误: SQL Server replication requires th ...

  8. HTML页面导入模板页面（Tomcat）

    找了个前端模板,多个HTML中有重复的部分,一改都改,所以对其进行重构,将重复的部分拿出来 看了很多方法,最简单的是jQuery,但是在我这没起作用,后来发现一个配置tomcat的ssi,让服务器帮我 ...

  9. win10系统使用Telnet命令时提示“telnet不是内部或外部命令”

    in10系统使用Telnet命令时提示“telnet不是内部或外部命令”问题的处理方案 win10系统使用的过程中很多用户会遇到使用Telnet命令时提示“telnet不是内部或外部命令”的问题,这样 ...

  10. IT兄弟连 Java语法教程 数组 深入数组 内存中的数组

    数组是一种引用数据类型,数组引用变量只是一个引用,数组元素和数组变量在内存里是分开存放的.下面将深入介绍数组在内存中的运行机制. 内存中的数组 数组引用变量只是一个引用,这个引用变量可以指向任何有效的 ...