jQueryday01(基本介绍，语法结构，API 使用，选择器)

jQuery

• jQuery由美国人John Resig于2006年创建
• 它的设计思想是write less,do more

目前是比较流行的js库。其自身是不带有前端界面的。

jQuery能做什么

• 访问和操作DOM元素
• 控制页面样式
• 对页面事件进行处理
• 扩展新的jQuery插件
• 与Ajax技术完美结合

jQuery的优势

• 体积小，压缩后只有100KB左右
• 强大的选择器
• 出色的DOM封装
• 可靠的事件处理机制
• 出色的浏览器兼容性
• 使用隐式迭代简化编程
• 丰富的插件支持

jQuery版本

   

jQuery环境搭建

 

　　或者使用CDN镜像：

<script src="http://code.jquery.com/jquery-3.4.0.min.js"></script>

onload与jQuery ready方法比较*

 

 

jQuery语法结构

$(选择器).调用的方法() ;

$(selector).action()

　　$():将一个普通的dom节点可以通过工厂方法转换为jQuery对象

　　selector: 对应的jQuery能够支持的选择器

　　action: 调用的jQuery对象的相应方法

　　中文文档:

    　　https://jquery.cuishifeng.cn/

jQuery API 使用

addClass及removeClass(…)

　为节点增加一个类样式或者是移除类样式

//添加类样式
  $("p").addClass("p") ;

//移除类样式，如果写了参数，代表移除某个对应类样式，如果不写参数，那么就会将所有的类样式全部移除掉。
  $("p").removeClass("p") ;

 

css方法

css()方法使用时，可以写单个的一组属性，也可以写多个连续属性，通常使用“{key:value}”形式:

show()以及hide()方法

show():显示一个元素

hide():隐藏一个元素

当没有参数情况下，没有动画显示效果，如果带有参数(字符串[“slow””normal””fast”]|数值[毫秒])，就会带有动画效果。

jQuery的代码风格

隐式迭代

在jQuery中使用了选择器后，会将同样名称的节点，全部获取回来，开发者可以统一设置事件或者是对应样式等。

链式编程

在jQuery支持一个节点对象连续通过”.”的方式进行调用。

使用$替代jQuery

jQuery的$实际上就是”jQuery”对象。因此，写出以下代码效果是等同的。

jQuery操作DOM模型

 

jQuery通过选择器就可以获取到对应dom节点，以下代码，说明了js与jQuery的区别

$("#title").html( );   //jQuery代码
等同于
document.getElementById("title").innerHTML;    //js原生代码

jQuery对象与js对象转换

 

$(dom节点对象)  转换为jQuery对象

$(对象).get(0)   ///转换方式1
$(对象)[0]   ///转换方式2

jQuery对象与js对象有各自的API和调用方式，因此不能够相互混用！！

选择器

基本选择器

层次选择器

属性选择器

        

基本过滤选择器

 

可见性过滤选择器