jQuery基础

最新推荐文章于 2020-03-08 20:21:46 发布

DUT_Walnut

最新推荐文章于 2020-03-08 20:21:46 发布

阅读量232

点赞数

分类专栏：小记录

本文链接：https://blog.csdn.net/DUT_Walnut/article/details/104445471

版权

小记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery基础

文章目录

jQuery基础

中文API文档 http://jquery.cuishifeng.cn/

jQuery是什么

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery安装

从jquery.com下载库

用HTML

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

jQuery语法

$(function(){
 
   // 开始写 jQuery 代码...
 
});

jQuery与js

	js	jQuery
函数覆盖	同种函数存在覆盖	不覆盖，顺序执行
执行时间	整个文档加载完毕后（包括图片）执行	dom树绘制完毕后执行
获取元素	document.getElementById(); "	$(“#id”); "

DOM对象无法操作JQ对象里面的属性和方法，JQ也无法直接操作DOM对象里的属性和方法

jQuery对象与DOM对象转换

$("#btn1").click(function(){
	//JQ对象转换成DOM对象的第一种方式
	//$("#span1")[0].innerHTML="呵呵哒！";
	//JQ对象转换成DOM对象的第二种方式
	$("#span1").get(0).innerHTML="呵呵哒！";
	});
fuction write(){
    //js的DOM操作
  document.getElementById("span1").innerHTML = "萌萌哒";
    var spanEle = document.getElementById("span1");
    //将DOM对象转换为JQ对象
    $(spanEle).html("爱你哦");
    
}

jQuery选择器

基本选择器

id选择器：$(“#id名称”);

元素选择器：$(“元素名称”);

类选择器：$(“.类名”);

通配符：*

多个选择器共用(并集) 以逗号并列

层次选择器

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

$("form input")

//结果
[ <input name="name" />, <input name="newsletter" /> ]

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

$("form > input")

//结果
[ <input name="name" />]

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

$("label + input")

//结果
[ <input name="name" />, <input name="newsletter" /> ]

prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素(兄弟)

$("form ~ input")

//结果
[ <input name="none" /> ]

基本过滤器

$('li:first');

//等价于
$('li').first()

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y5y3vuu4-1582358985659)(C:\Users\kacey\AppData\Local\Temp\1582355370918.png)]$

属性选择器

在这里插入图片描述

表单选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqFyv1mm-1582358985664)(C:\Users\kacey\AppData\Local\Temp\1582355485097.png)]$

属性操作

//val() 获得value值
$("input").val();
//val(...)给value属性设置值
$("input").val("hello world!");
//回调函数：设定文本框的值
$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});


//html()获得html代码，如果有标签，一并获得
$('p').html();
//html(...)设置html代码，如果有标签，将进行解析
$("p").html("Hello <b>world</b>!");
//回调函数：使用函数来设置所有匹配元素的内容
$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

//text()获得文本，如果有标签，忽略
$('p').text();
//text(...)设置文本，如果有标签，不进行解析，原样输出
//回调函数：使用函数来设置所有匹配元素的文本内容
$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

遍历函数：each

$(ele).each(fn);

迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

 <img/><img/>

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

如果想得到 jQuery对象，可以使用 $(this) 函数。

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>

<div></div>
<div></div>

$("img").each(function(){
  $(this).toggleClass("example");
});

$. e a c h ($ ele,fn);

$.each($("input:hidden"),function(index,docEle)){
       alert(index + "--" +docEle.value);
       });

回调函数fn: function (index, domEle)

参数1 遍历索引号
参数2 遍历当前对象 docEle==this(dom对象
)

可以使用 ‘return’ 来提前跳出 each() 循环。

$("button").click(function () { 
$("div").each(function (index, domEle) { 
  // domEle == this 
  $(domEle).css("backgroundColor", "yellow");  
  if ($(this).is("#stop")) { 
  $("span").text("Stopped at div index #" + index); 
  return false; 
  } 
});
});

文档处理之内部插入

A.append(B)把B插入A内部后面

向所有段落中追加一些HTML标记。

<p>I would like to say: </p>

$("p").append("<b>Hello</b>");

//结果为
[ <p>I would like to say: <b>Hello</b></p> ]

A.appendTo(B)把A插入B内部后面

<p>I would like to say: </p>
<div></div><div></div>

$("p").appendTo("div");

//结果为
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

新建段落追加div中并加上一个class

<div></div><div></div>

 $("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");

//结果
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

A.prepend(B)将B插入到A内部的前面

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

A.prependTo(B)将A插入到B内部的前面

事件

常见事件

blur([[data],fn]) 失去焦点
change([[data],fn]) 改变，select列表项改变
click([[data],fn]) 单击
dblclick([[data],fn]) 双击
~~error([[data],fn])~~ 1.8- 页面加载错误
focus([[data],fn]) 获得焦点
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn]) 键盘按下
keypress([[data],fn])键盘按
keyup([[data],fn])键盘弹起
mousedown([[data],fn]) 鼠标按下
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])鼠标移动
mouseout([[data],fn])鼠标移出
mouseover([[data],fn])鼠标移入
mouseup([[data],fn])鼠标弹起
resize([[data],fn])改变大小（窗口）
scroll([[data],fn]) 滚动（滚动条）
select([[data],fn]) 选中
submit([[data],fn])提交
~~unload([[data],fn])~~ 1.8- 页面卸载

事件切换

hover(over,out)

当鼠标移到元素上或移出元素时触发执行的事件函数

over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数

A.hover(fn1,fn2) 等效 A.mouseover(fn1).mouseout(fn2)

toggle([speed],[easing],[fn])

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

//对表格切换显示/隐藏
$('td).toggle();
  
//用600毫秒的时间将段落缓慢的切换显示状态
$("p").toggle("slow");

//用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。
$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

//switch参数描述:如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的
$('#foo').toggle(showOrHide);

//相当于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}

validation校验

下载地址

https://jqueryvalidation.org/

导入

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
		<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
		<!--引入国际化js文件-->
		<script type="text/javascript" src="../../js/messages_zh.js" ></script>

使用声明

<script type="text/javascript">
    $().ready(funvtion(){
              $("#formId").validate();
              });
</script>

简单例子

<script>
			$(function(){
				$("#checkForm").validate({
					rules:{
						username:{
							required:true,
							minlength:6
						},
						password:{
							required:true,
							digits:true,
							minlength:6
						}
					},
					messages:{
						username:{
							required:"用户名不能为空!",
							minlength:"用户名不得少于6位！"
						},
						password:{
							required:"密码不能为空!",
							digits:"密码必须是整数!",
							minlength:"密码不得少于6位!"
						}
					}
				});
			});
</script>