jQuery学习归纳总结

最新推荐文章于 2023-09-08 17:29:16 发布

小黄果

最新推荐文章于 2023-09-08 17:29:16 发布

阅读量590

点赞数

分类专栏：前端 jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/sen_03/article/details/109293164

版权

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.47元/天解锁文章

小黄果

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习归纳总结

jQuery学习总结归纳常用版本：jQuery-1.12.4.js（未压缩） jQuery-1.12.4.min.js（已压缩）// 引入jQuery<script src = 'jQuery-1.12.4.js'></script>一.jQuery与DOM1.DOM与jQuery相比：（1）获取元素名字太长（2）代码冗余（for）（3）onclick注册事件存在覆盖问题，addEventListener()注册事件不存在覆盖问题，但有兼容性问题（4）没有动画效果
复制链接

扫一扫

专栏目录