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和调用方式,因此不能够相互混用!!

选择器

基本选择器

层次选择器

属性选择器

        

基本过滤选择器

 

可见性过滤选择器

 

 

原文地址:https://www.cnblogs.com/heureuxl/p/13642713.html