jQuery和原生CSS的对比与使用

一、jQuery的概述

在引入jQuery的js文件后,他的调用有两种方式,一是直接用jQuery调用,二是简单的$符号调用,二者是全等的,调用的是同一个对象。
使用方式:
作为一个函数,我们可以通过函数的形式执行它,同样函数作为一种特殊的对象,我们也可以用.语法使用他身上的属性和方法。

方法的分类
一、局部方法$().xxx() 主要指对DOM以及动画的操作

二、全局方法$.xxx() 主要是ajax请求 例: $ .ajax();

注意点
jq的获取和操作的DOM对象,都是以数组形式存在的,不能直接使用原生DOM操作对象的属性和方法,需要对数组进行解析后才能使用
同理,
原生的DOM对象,也不能直接使用jq的DOM对象的属性和方法,也需要转成jq的DOM对象,才能使用
因此,
原生的DOM对象与jq的DOM对象不相等!!!

二、jq和css的对比记忆和使用

  1. 简单选择器
    在这里插入图片描述

ID选择器的失明现象。

ID在一个页面中只能出现一次,这是一个唯一标识符。在jQuery中就会存在问题。
  1. 进阶选择器
    在这里插入图片描述
    通配选择器:选择所有;对性能有极大的浪费所以不能在全局范围内使用,最好的方法就是在局部环境下使用;

例:
$(‘ul li a,ul li em,ul li strong’);

简化成通配选择器:

$(‘ul li *’)

  1. 层次选择器
    在这里插入图片描述
    每一个选择器后面都带了一个方法,传递的参数就是想要获取的标签或节点

  2. 属性选择器
    在这里插入图片描述

  3. 伪类选择器
    在这里插入图片描述
    04.29修改,上图xmind中最后一个分支是“选择对应下标”而不是下表,错字,以此订正。

  4. 内容过滤器
    在这里插入图片描述
    jQuery为了优化:has选择器性能,提供了一个方法.has()

    $ (‘ul:has(.red)’)==$ (‘ul’).has(’.red’)

  5. 可见性选择器
    在这里插入图片描述
    是否可见的判定因素为display:block & display :none

三、jQuery在选择器和过滤器的基础上提供了一些常用的方法

is方法和hasClass方法
.is()检测xxx元素下是否有某个类/标签/id ,返回值是布尔值
.hasClass()检测xxx元素下是否有某个类名, 返回值是布尔值,其实第二个方法就是在第一个方法的基础上改造而来===>就是is(’.’+class)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值