jQuery简介

 简化了JS 
 
 类似于
 后端 JDBC（操作数据库的基本API）   dbutils（封装JDBC）     xxx.jar
 前端 JS                         jQuery                xxx.js

jQuery的官网https://jquery.com/

两种引入jquery-2.1.4.js文件的方式

 1.直接引用本地文件
     <script src="/day05/js/jquery-2.1.4.js"></script>
 
 2.使用cdn镜像加速
     <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"</script>

min.js和.js的区别

 jquery-2.1.4.js
     开发阶段
 jquery-2.1.4.min.js
     上线，部署到服务器

jquery.js是完整的未压缩的jQuery库，文件比较大，一般用于阅读学习源码或修改源码，一般不用于线上项目。 jquery.min.js是由完整版的jQuery库经过压缩得来，压缩后功能与未压缩的完全一样，只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。这个版本一般用于网站引用使用，减小文件体积，降低网站流量，提升访问速度等。

jQuery的基本结构

 在JS中是使用 dom对象
 在jQuery中是使用 jQuery对象
 
 jQuery()工厂函数$:将参数转换成jQUery对象
 jQuery对象才能调用jQUery的方法
 
 jQuery(对象).方法(function(){});
 
 jQuery就是$
 jQuery(doucument).ready(function(){})
 $(doucument).ready(function(){})
 最终可以简写为 $(function(){})

dom对象和jQuery对象

 JS和jQuery可以混用，因为jQuery底层就是JS
 但是 dom对象只能调用dom方法
     jQuery对象只能调用jQuery方法
     
 //dom对象转成jquery对象： 使用$()工厂函数
     var domobj=document.getElementById("divtest");
         var jqueryobj=$(domobj);
         juqeryobj.html("bbb")
         //html（）方法，（）里面没有参数就显示选中标签的内容
                             有参数就显示（）里面的内容
 //jquery对象转成dom对象
     var jqueryobj=$("#divtest");
     //var domobj=jqueryobj[0];
     var domobj=jqueyobj.get(0);
     domobj.innerHTML="bbb";

自动迭代循环

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script src="/day05/js/jquery-2.1.4.js"></script>
     <script>
         $(function(){
             $("#btnok").click(function(){
                 //js里面操作多个div,通过循环找到每一个然后操作数组将每一个都赋值
                 // var items=document.getElementsByTagName("div");
                 // for(var i=0; i<items.length;i++){
                 //     items[i].innerHTML="bbb";
                 // }
                 
                 //jQuery里面封装了方法可以自动迭代
                 // $("div").html("bbb")
 
                 //也可以自己定义循环体方法
                 //也可以带参数1个参数就是下标（从0开始的）
                 //           2个参数就是下标和对象
                 // $("div").each(function(i,obj){
                     // this.innerHTML="bbb";
                     //  $(this).html("ccc");
                     // console.log(i)//输出为0123
                     // console.log(this==obj)//输出为true;
                     //两种写法
                    //1.常用写法
                     // $("div").each(function(i){
                     //     $(this).html("b"+(i+1));
                     // })
                      //2.
                     // $.each($("div"),function(i){
                     //      $(this).html("ccc"+(i+1));
                     //  });
                     
                     // dom对象.属性=
                     //dom对象.setAttribute("属性名"，"属性值")
                     //dom对象.getAttribute("属性名")
             
                     // $("img").attr("src","/day05/img/class1-"+(i+1)+".jpg");
                     //通过自定义循环方法将每个图片通过attr赋值给img
                     //1.
                     // $("img").each(function(i){
                     //     $(this).attr("src","/day05/img/class1-"+(i+1)+".jpg");
                     // })
                     //2.
                 //     $.each($("img"),function(i){
                 //     $(this).attr("src","/day05/img/class1-"+(i+1)+".jpg");
                 // });
 
               //  })
             })
          })
     </script>
 </head>
 
 <body>
     <img /><br/>
     <img /><br/>
     <img /><br/>
     <img /><br/>
     <div>aaa</div>
     <div>aaa</div>
     <div>aaa</div>
     <div>aaa</div>
     <input  type="button" id="btnok" value="ok"/>
 </body>
 </html>

链式编程

 $(function(){
             //链式编程可以直接在后面.方法继续写
             // $("div").mouseover(function(){
             //     $(this).css("background","red")
             // }).mouseout(function(){
             //     $(this).css("background","white")
             // });
                 $("div").css("font-size","16px").css("color","red");
             })

选择器

 操作对象，找到指定的对象
     dom.getElementXxxxx

基本选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery基本选择器示例</title>
	<style type="text/css">
		#box {
			
			border: 2px solid #000;
			padding: 5px;
		}
	</style>
	<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$("h2").click(function () {   
				//标签选择器
				//$("h3").css("background","red");
				//类选择器
				//$(".title").css("background","red");
				//id选择器
				//$("#box").css("background","red");
				//所有标签
				//$("*").css("background","red");
				//交集选择器	标签名.class	标签名.#id	
				//$("h2.title").css("background","red");
				//并集选择器，集体声明
				$("h2.title,dd").css("background","red");
			});
		})
	</script>
</head>

<body>
	<div id="box"> id为box的div
		<h2 class="title">class为title的h2</h2>
		<h3 class="title">class为title的h3</h3>
		<h3>热门排行</h3>
		<dl>
			<dt><img src="data:images/ch04/case_1.gif" width="93" height="99" alt="斗地主" /></dt>
			<dd class="title">斗地主</dd>
			<dd>休闲游戏</dd>
			<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
		</dl>
	</div>
</body>

</html>

层次选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery层次选择器示例</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			line-height: 30px;
		}

		body {
			margin: 10px;
		}

		#menu {
			border: 2px solid #03C;
			padding: 10px;
		}

		a {
			text-decoration: none;
			margin-right: 5px;
		}

		span {
			font-weight: bold;
			padding: 3px;
		}

		h2 {
			margin: 10px 0;
		}
	</style>
	<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$("h2").click(function () {
				//后代选择器
				//$("#menu span").css("background","red");
				//子选择器
				//$("#menu>span").css("background","red");
				//匹配所有紧接在 prev 元素后的 next 元素
				//紧接的下一个兄弟节点
				//$("h2 + div").css("background","red");
				//匹配 prev 元素之后的所有 siblings 元素
				//$("h2 ~ dl").css("background","red");
				$("h2").siblings().css("background","red");
			});
		});
	</script>
</head>

<body>
	<div id="menu">
		<dl>
			<dt>北京周边旅游<span>特价</span></dt>
			<dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd>
		</dl>
		<h2>全部旅游产品分类</h2>
		<dl>
			<dt>北京周边旅游<span>特价</span></dt>
			<dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd>
		</dl>
		<dl>
			<dt>景点门票</dt>
			<dd><a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a></dd>
			<dd><a href="#">山水</a> <a href="#">双休</a></dd>
		</dl>
		<span>更多分类</span>
	</div>
</body>

</html>

属性选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery属性选择器示例</title>
	<style type="text/css">
		#box {
			
			border: 2px solid #000;
			padding: 5px;
		}
	</style>
	<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$("h2").click(function () {
				//有title属性的h2标签
				//$("h2[title]").css("background-color", "#09F");
				//class属性值是odds的标签
				//$("[class=odds]").css("background-color","#09F");
				//id属性值不是test的所有标签
				//$("div[class!=testnot]").css("background-color","#09F");
				//title属性值以h开头的标签
				//$("[title^=h]").css("background-color","#09F");
				//title属性值以jp结尾的标签
				//$("[title$=jp]").css("background-color","#09F");
				//title属性值包含s的标签
				//$("[title*=s]").css("background-color","#09F");
				//li标签+有class属性+title属性值包含y
				$("li[class][title*=y]").css("background-color","#09F");
			});
		});
	</script>
</head>

<body >
	<div class="test" title="yyy">aaaaa</div>
	<div id="box">
		<h2 class="odds" title="cartoonlist">动画列表</h2>
		<ul>
			<li class="odds" title="kn_jp">名侦探柯南</li>
			<li class="evens" title="hy_jp">火影忍者</li>
			<li class="odds" title="ss_jp">死神</li>
			<li class="evens" title="yj_jp">妖精的尾巴</li>
			<li  title="yh_jp">银魂</li>
			<li class="evens" title="hm_da">黑猫警长</li>
			<li class="odds" title="xl_ds">仙履奇缘</li>
		</ul>
		<h2>h2h2</h2>
	</div>
</body>

</html>

基本过滤选择器示例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery基本过滤选择器示例</title>
	<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$("h2").click(function () {
				//第一个li
				//$("li:first").css("background-color", "#09F");
				//最后一个li
				//$("li:last").css("background-color","#09F");
				//$("li").last().css("background-color","#09F");
				//class属性不是three的li
				//$("li:not(.three)").css("background-color","#09F");
				//所有偶数行的li
				//$("li:even").css("background-color","#09F");
				//所有奇数行的li
				//$("li:odd").css("background-color","#09F");
				//下标为1的li
				//$("li:eq(1)").css("background-color","#09F");
				//下标大于1的li
				//$("li:gt(1)").css("background-color","#09F");
				//下标小于1的li
				//$("li:lt(1)").css("background-color","#09F");
				//所有标题标签
				//$(":header").css("background-color","#09F");
				//没有id属性的div标签
				$("div:not([id])").css("background-color","#09F");
			});
		});
	</script>
</head>

<body>
	<div id="div1">111</div>
	<div >222</div>
	<h1>111</h1>
	<h2>网络小说</h2>
	<h3>333</h3>
	<ul>
		<li>王妃不好当</li>
		<li>致命交易</li>
		<li class="three">迦兰寺</li>
		<li>逆天之宠</li>
		<li>交错时光的爱恋</li>
		<li>张震鬼故事</li>
		<li>第一次亲密接触</li>
	</ul>
</body>

</html>

操作属性

js
    dom.属性
    dom.setAttribute()
    dom.getAttribute()
jquery
    juery.attr("属性名")
    juery.attr("属性名","属性值")
    操作布尔值的属性checked selected  disabled这些属性
    juery.prop("checked")
    juery.prop("checked",ture)

操作样式

js
    dom.style.样式属性="样式属性值"
    dom.className=    "类样式"

jQuery
    jquery.css("样式属性"，"样式属性值")
    jquery.addClass("类样式")

操作标签中的内容

js
    dom.innerHTML
    dom.innerText
    dom.value

jQuery
    jquery.html()
    jquery.text()
    jquery.val()

动态添加元素，删除元素

js
jquery
    创建元素：拼标签
    var html="标签字符串";

    $(html).appendTo($("#id"))

    删除元素
    $("#id").remove();

常用事件

js
    dom.onClick=function(){}
    dom.onmouseover=function(){}
    
jquery
    jquery.click(function(){});
        .mouseover()
        .mouserout()
        .ready()
        .blur()        失去焦点
        .foucus()    获取焦点

数据验证

关于jQuery的操作的更多相关文章

JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
jQuery HTML 操作
jQuery 包含很多供改变和操作 HTML 的强大函数. 改变 HTML 内容语法 $(selector).html(content) html() 函数改变所匹配的 HTML 元素的内容(inn ...
Jquery DOM 操作列表
jQuery 文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...
转：jQuery 常见操作实现方式
http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...
jQuery Ajax 操作函数及deferred对象
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数描述 jQuery.ajax() 执行异步 H ...
jQuery Ajax 操作函数
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数描述 jQuery.ajax() 执行异步 H ...
Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数
JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...

随机推荐

SSM(Spring,SpringMVC,Mybatis)框架整合项目
快速上手SSM(Spring,SpringMVC,Mybatis)框架整合项目环境要求: IDEA MySQL 8.0.25 Tomcat 9 Maven 3.6 数据库环境: 创建一个存放书籍数据 ...
12.MongoDB系列之副本集管理
1. 控制成员状态 1.1 把主节点变为从节点 rs.stepDown() 1.2 阻止选举如果需要对主节点维护,不想期间其他从节点选举为主节点,则可以 rs.freeze(10000) 维护完成后 ...
我的Vue之旅 06 超详细、仿 itch.io 主页设计（Mobile）
第二期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 仿 itch.io 平台主页. 我的主题 HapiGames 是仿 itch.io 的 in ...
一天五道Java面试题----第十天（简述Redis事务实现---------＞负载均衡算法、类型）
这里是参考B站上的大佬做的面试题笔记.大家也可以去看视频讲解!!! 文章目录 1.简述Redis事务实现 2.redis集群方案 3.redis主从复制的核心原理 4.CAP理论,BASE理论 5.负 ...
13-ORM-更新&删除
一.更改单个数据修改单个实体的某些字段 1.查: - 通过get()得到要修改的实体对象 2.改: - 通过对象属性的=的方式修改数据 3.保存 - 通过对象.save()保存数据二.批量 ...
SpringBoot Starter缘起
SpringBoot通过SpringBoot Starter零配置自动加载第三方模块,只需要引入模块的jar包不需要任何配置就可以启用模块,遵循约定大于配置的思想. 那么如何编写一个SpringBoo ...
DQL语句排序与分组
DQL语句排序与分组一.DQL-排序排序是计算机内经常进行的一种操作,其目的是将一组"无序"的记录序列调整为"有序"的记录序列.分内部排序和外部排序,若整个 ...
学习ASP.NET Core Blazor编程系列九——服务器端校验
学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
图解ReentrantLock底层公平锁和非公平锁实现原理
在面试或者日常开发当中,经常会遇到公平锁和非公平锁的概念. 两者最大的区别如下 1️⃣ 公平锁:N个线程去申请锁时,会按照先后顺序进入一个队列当中去排队,依次按照先后顺序获取锁.就像下图描述的上厕所的 ...
Java新特性（2）：Java 10以后
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 虽然到目前为止Java的版本更新还没有什么惊天动地的改变,但总是会冒出一些有趣的小玩意.前面列举了Java9和Java10的一些特色,现在接着来 ...

关于jQuery的操作