JQuery笔记

JQuery笔记

---

前言

提示：JQuery是一个轻量的JS框架：

jquery的特点：

1. 轻量级的js框架；
2. 丰富的DOM选择器；
3. 链式表达式；
4. 事件、样式、动画支持；
5. Ajax操作支持；
6. 跨浏览器兼容；
7. 插件扩展开发；
8. 可扩展性强。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、JQuery是什么？

1.jQuery是当前最流行的js库，本质就是一个js文件
2.其中封装了很多js的原生功能，让我们代码写起来更加简单
3.也可以理解为js框架

二、使用步骤

1.引入库

可以通过多种方法在网页中添加 jQuery。 
从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

下载 jQuery
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

1、引用网上的
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

2、引用本地的
<script src="文件夹/jquery-1.10.2.min.js"></script>

2、JQuery的核心 $符号

 js dom对象 与 jquery jquery 对象

1、js dom 获取元素
var dom = document.getElementById("dom1");//js对象
console.log(dom);

2、 jquery $ 获取元素
var jq = $("#dom1");//jQuery对象
console.log(jq);

3、jquery将js对象转换成jQuery对象
var jqdom = $(dom);
console.log(jqdom);

3、JQuery元素选择器

基本选择器	HTML	JQ
id选择器	<div id="a"></div>	var re = $("#a")
类选择器	<div class="a"></div>	var re = $(".a")
元素选择器	<div ></div>	var re = $("div") 获取页面中所有的div元素
通配符选择器		var re = $("*") 获取页面中所有元素

层级选择器	描述	html	JQ
子元素选择器	根据父元素匹配所有的子元素	<div id = "parent"> <p></p> </div>	1、$('#parent >p'); 2、$("#div").children('p')
后代选择器	获取后代所有指定元素	<div id = "parent"> <p> <p></p></p> </div>	1、var re = $('#parent p'); 2、$("parent").find('p')
兄弟选择器	1、获取指定元素的兄弟 2、获取指定元素后的所有兄弟元素	<div id = "parent"> </div><p></p><p></p>	1、var re = $("parent +p") 2、 $("parent ~p")

4、操作元素的属性

		属性分类：

• 固有属性：元素本身就有的属性（id,name,class,style…）

• 返回值是boolean的属性：checked,selected,disabled

• 自定义属性：用户自定义的属性

   			attr( )和prop( )区别：
   		1、如果是固有属性，attr()和prop均可获取
   		2、自定义~attr可获取，prop 不可获取
   		3、返回值是boolean的属性  设置了属性~attr返回具体的值  prop true
   								未设置了属性~attr返回undefined  prop false
   		
   		
   		
   		获取属性
   			attr(属性名)
   			prop(属性名)
   		设置属性
   			attr("属性名","属性值")
   			prop("属性名","属性值")
   		移除属性
   			removeAttr("属性名")
   			
   		总结：返回值是boolean的属性使用prop()
  

5、操作元素的样式

操作元素的样式

• attr(“class”)–获取元素的class属性值

• attr(“class”,“属性值”) --设置元素的样式

• addClass(“样式名”)–添加样式

• css()–添加具体的样式

   css("具体样式名","样式值");设置单个样式
   css({"具体样式名","样式值","具体样式名","样式值"});设置多个样式
  

• removeClass(“样式名”)–移除样式

 css()方法设置元素样式 
 <div id="blue" class="blue larger"></div>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Jquery的使用，而JQuery提供了大量能使我们快速便捷地处理数据的函数和方法。