文章目录

  • 一文搞懂jQuery
  • 什么是jQuery?
  • jQuery怎么使用?
  • 一:基础选择器:
  • 总结
  • 二:层次选择器:
  • 三:筛选选择器:
  • 四:筛选方法
  • 五:内容过滤选择器
  • 六 :jQuery 里面的排他思想
  • 七:jQuery对象与DOM对象的区别与相互转换:


一文搞懂jQuery

什么是jQuery?

jQuery:javascript + query。
使用前期,jQuery侧重于快速找到页面上的各种节点。
使用后期,jQuer丰富了事件操作,ajax操作,动画效果,DOM操作等等。jQuery是对javascript封装的一个框架包,它简化了javacript的操作。

javascript代码:获得页面节点对象,ajax元素节点对象实现,事件操作,事件对象。

jQuery代码:无需考虑浏览器兼容问题,代码量少。

重点:(操作元素)

  • jquery方式操作属性(attribute):
  • $().attr(属性名称); //获得属性信息值
  • $().attr(属性名称,值); //设置属性的信息
  • $().removeAttr(属性名称); //删除属性
  • JS方式操作属性(attribute):
  • itnode.属性名称
  • itnode.属性名称= 值;
  • itnode.getAttribute(属性名称);
  • itnode.setAttribute(属性名称,值);

jQuery 中 attr() 和 prop() 方法的区别:具有 true 和 false 两个值的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

css样式操作

  • $().css(name,value); //设置
  • $().css(name); //获取

css()样式操作特点:

① 样式获取,jquery可以获取 行内、内部、外部的样式。dom方式只能获得行内样式② 复合属性样式需要拆分为"具体样式"才可以操作例如:

background 需要拆分为 background-color , background-image 等进行操作 border:
border-left-style ,border-left-width ,border-left-color 等

jQuery怎么使用?

一:基础选择器:

原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。

举个栗子:

jquery 查看version_jQuery

  • $(‘#id’)----->document.getElementById(‘id’);
  • jQuery: $(‘#callen’);
  • javascrip:document.getElementById(“callen”);
  • $(‘tag’)----->document.getElementsByTagName(‘tag’);
  • jQuery:$(‘a’);
  • javascrip:document.getElementsByTagName(‘a’);

  • $(‘.class’) class属性选择器:
  • $(‘.type1’)

  • $(‘*’) 通配符选择器

  • $(‘s1,s2,s3’) 联合选择器
  • $(‘.type1,#callen’);
总结

名称

用法

描述

ID选择器

$(‘#id’)

获取指定ID元素

全选选择器

$(‘*’)

匹配所有的元素

类选择器

$(‘.class’)

获取同一类class的元素

标签选择器

$(‘div’)

获取同类标签的所有元素

并集选择器

$(‘div,#id,li’)

选取多个元素

交集选择器

$(‘li.type1’)

交集元素

属性选择器

$(‘input[name=“username”]’)

获取标签下属性名匹配的元素

二:层次选择器:

  • ①后代选择器:$(s1 s2) 写法区别于并集选择器,规则:在S1内获取全部的S2节点

jquery 查看version_jQuery_02


  • ②子代选择器:$(S1 > S2) 规则:找S1的名字叫S2的儿子(孙子不算)

  • ③直接兄弟选择器:$(S1 + S2) 规则:在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

  • ④所有兄弟选择器:$(S1 ~ S2) 获取S1后面全部名字为S2的兄弟

三:筛选选择器:

语法

用法

描述

:first

$(‘tr:first’)

匹配找到的第一个tr元素

:last

$(‘tr:last’)

匹配找到的最后一个tr元素

:not(selector)

$(‘tr:not(’#id’)')

去除所有与给定选择器匹配的元素

:eq(index)

$(‘tr:eq(2)’)

匹配一个给定索引值的元素,从0开始计数

:gt(index)

$(‘tr:gt(2)’)

匹配所有大于给定索引值的元素,从0开始计数

:lt(index)

$(‘tr:li(2)’)

匹配所有小于给定索引值的元素,从0开始计数

:even

$(‘li:even’)

匹配所有索引值为偶数的元素,从0开始计数

:odd

$(‘li:odd’)

匹配所有索引值为奇数的元素,从0开始计数

四:筛选方法

语法

用法

说明

parent()

$(“li”) . parent();

查找li的父级

children(selector)

$(“ul”) . children(“li”);

相当于$(“ul > li”) , 找最近一级(找亲儿子)

find(selector)

$(“ul”) .f ind(“li”);

相当于$(“ul li”),后代选择器

siblings(selector)

$(“.first”).siblings(“li”);

查找兄弟节点,不包括自己本身

nextAll([expr])

$(“.first”) . nextAll();

查找当前元素之后所有的同辈元素

prevAll([expr])

$(“.last”) . prevAll();

查找当前元素之前所有的同辈元素

eq(index)

$(“li”) . eq(2);

相当于$(‘li:eq(2)’)

hasClass(class)

$(‘div’) . hasClass(“protected”)

检查当前的元素是否含有某个特定的类,如果有,则返回true

五:内容过滤选择器

语法

使用

说明

:contains

$(“div:contains(beijing)”)

包含内容选择器,获得节点内部必须通过标签包含指定的内容

:empty

$(“div:empty”)

获得空元素(内部没有任何元素/文本(空) )节点对象

:has

$(“div:has(#apple)”)

内部包含指定元素的选择器

:parent

$(“div:parent”)

寻找的节点必须作为父元素节点存在(必须是别人的父亲)

六 :jQuery 里面的排他思想

想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。

  • $(this).css(“color”,”red”);
  • $(this).siblings(). css(“color”,””);

案例:淘宝服饰精品案例分析

核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏。

需要得到当前小li 的索引号,就可以显示对应索引号的图片

jQuery 得到当前元素索引号 $(this).index()

中间对应的图片,可以通过 eq(index) 方法去选择

显示元素 show() 隐藏元素 hide()

七:jQuery对象与DOM对象的区别与相互转换:

  • jQuery对象:包装DOM对象后产生的对象,是jQuery独有的,可以使用jQuery中的方法。
    就取得value值的方式而言来看看jQuery对象与DOM对象的区别:

jquery 查看version_jQuery_03

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理,DOM对象也不能使用jQuery中的方法。

但是这两种对象之间是可以相互转换的:

  • jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
  • var list = $(“input”); //jQuery对象。
  • var list2 = list[0]; //DOM对象。
  • jQuery本身提供,通过.get(index)方法,得到相应的DOM对象。
  • var list=$(“input”); //jQuery对象。
  • var list2=list.get(0); //DOM对象。

  • 对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。
  • var list = document.getElementById(“name”); //DOM对象。
  • var list2 = $(list); //jQuery对象。

jquery 查看version_jquery_04