jQuery学习归纳总结

jQuery学习归纳总结

常用版本:jQuery-1.12.4.js(未压缩) jQuery-1.12.4.min.js(已压缩)

//	引入jQuery
<script src = 'jQuery-1.12.4.js'></script>

一.jQuery与DOM

1.DOM与jQuery相比:

(1)获取元素名字太长
(2)代码冗余(for)
(3)onclick注册事件存在覆盖问题,addEventListener()注册事件不存在覆盖问题,但有兼容性问题
(4)没有动画效果,如果需要,就必须手动封装

2.dom对象与jQuery对象的转换

dom对象和jQuery对象不能混用,转换
(1)dom对象转成jQuery对象

$(dom对象)

(2)jQuery对象转成dom对象
① 通过中括号[]
② get()方法

3.this的使用

this是个dom对象,所以this要使用jQuery的方法,一定要先转成jQuery对象 $(this)

二.$符号

$的来源:jQuery
类型:函数
作用:根据参数的不同,作用不同
1.选择器:可以获取元素 $(‘div’)
2.函数:入口函数的作用 $(function(){})
3.dom对象:将dom对象转成jQuery对象 $(document)
4.HTML字符串:创建节点 $(‘HTML字符串’)

多库共存:jQuery释放$符号的控制权

// 释放$符号,并且把$符号的能力给C
var c = $.noConflict();

三.选择器

1.CSS选择器(将js中的选择器放入jQuery的$里面)

(1)id选择器 $(’#ZhangSan’)
(2)标签选择器 $(‘li’)
(3)类选择器 $(’.rendering’)
(4)并集选择器 $(’.xiaoming, #ZhangSan’)
(5)交集选择器 $(’.xiaoming.handsome’)
(6)子代选择器 $(’.xiaoming>ol>li’)
(7)后代选择器 $(‘xiaoming li’)

2.过滤选择器

(1):odd 从获取到的元素中过滤出下标为奇数的元素
(2):even 从获取到的元素中过滤出下标为偶数的元素
(3):first 从获取到的元素中过滤出第一个元素
(4):lase 从获取到的元素中过滤出最后一个元素
(5):eq 从获取到的元素中过滤出指定下标的元素

$('li:odd')
$('li:even')
$('li:first')
$('li:last')
$('li:eq(4)')		// 获取到里li里面的第5个元素
3.筛选选择器

(1)children()
jq提供的children()方法,可以获取元素内的所有子元素,支持传参,参数为选择器,可以根据选择器筛选出指定的子元素

$(this).children('ul').show();
$(this).chileren('ul').hide();

(2)find() 找后代元素

$(this).find('li')

(3)sibilings() 获取当前元素的所有兄弟元素,不包含自己

// 排他,突出等
$(this).css('opacity', 1);
$(this).sibings().css('opacity', 5);
// 简化上面俩行代码,链式编程
$(this).css('opacity', 1).sibings().css('opacity', 5)

(4)next()和nextAll()
下一个兄弟元素和后面所有兄弟元素
(5)prev()和prevAll()
上一个兄弟元素和前面所有兄弟元素
(6)parent() 查找父元素
(7)eq() 查找指定下标元素

// 获取li的第三个元素
$('li').eq(2);	// 相当于$('li:eq(2)');

四.样式操作和属性操作

1.css()操作

(1)获取样式

css(name)	// 只能获取第一个

(2)设置样式
① css(name, value):
参数:name:样式名 value:样式值
② css(obj)
参数:包含多个样式的对象

// 给li标签设置样式
$('li').css('fontSize', '50px');
$('li').css('color':'red', 'fontSize':'50px');
2.class操作

添加类选择器:addClass()
移除类选择器:removeClass()
判断是否有该选择器:hasClass()
切换类名(有就移除,没有就添加):toggleClass()

3.属性attr操作

获取属性:attr(name)
设置单个属性:attr(name, value)
设置多个属性(参数为对象):attr(obj)
移除属性:removeAttr(name)

$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr({
   attribute:value, attribute:value ...})

prop方法和attr方法
① 对于表单元素的checked,selected,disable属性,使用prop操作
② 除了表单元素的三个属性使用prop方法外,其它都可以使用attr方法
③ 对于自定义属性,使用attr方法(abc, index)
④ 对固有属性,使用prop方法(title, id, style, checkd, selected, disable)

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>全选案例</title>
  <style>
      <style>
    * {
    
      padding: 0;
      margin: 0;
    }
    
    tbody tr 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值