jQuery基础

jQuery

  • 什么是jQuery: 是一个通过js语言写的框架,用于简化原生js代码,可以让程序员写的更少但实现的更多
  • jQuery优势:

    1. 简化js代码
    2. 可以像css一样获取元素
    3. 可以像css一样批量设置样式
    4. 可以解决部分兼容性问题

如何引入jQuery

  • 和引入一个普通的js文件一样

js对象和jq对象互相转换

  1. js转jq: var jq = $(js);
  2. jq转js: var js = jq[0];
  • jq对象实际上就是对数组的扩展

选择器

  1. 基础选择器
  • 标签名 $("div")
  • id $("#id")
  • class $(".class")
  • 分组 $("div,#id,.class")
  • 任意元素 $("*")
  1. 层级选择器
  • $("div span") 匹配div下所有的span
  • $("div>span") 匹配div下所有的span子元素
  • $("div+span") 匹配div后面的弟弟span
  • $("div~span") 匹配div后面的弟弟们span
  • 层级相关方法:

    1. $("#abc").siblings("div") 匹配id为abc元素的所有兄弟div元素
    2. $("#abc").prev("div") 匹配元素的哥哥元素
    3. $("#abc").prevAll() 匹配元素的哥哥们元素
    4. $("#abc").next() 匹配元素的弟弟
    5. $("#abc").nextAll() 匹配元素的弟弟们
    6. $("#abc").children() 匹配元素的孩子们
    7. $("#abc").parent() 匹配元素的父元素
  1. 过滤选择器
  • $("div:first") 匹配所有div中的第一个
  • $("div:last") 匹配所有div中的最后一个
  • $("div:even") 匹配所有div中下标为偶数
  • $("div:odd") 匹配所有div中下标为奇数
  • $("div:lt(n)") 匹配所有div中下标小于n的元素
  • $("div:gt(n)") 匹配所有div中下标大于n的元素
  • $("div:eq(n)") 下标等于n
  • $("div:not(.abc)") 匹配所有div中class值不等于abc
  1. 内容选择器
  • $("div:has(p)") 匹配所有包含p子元素的div
  • $("div:empty") 匹配所有空的div
  • $("div:parent") 匹配所有非空的div
  • $("div:contains('xxx')") 匹配包含xxx文本的div
  1. 可见选择器
  • $("div:hidden") 匹配所有隐藏的div
  • $("div:visible") 匹配所有显示的div
  • 隐藏显示相关的方法:

    1. $("#abc").hide() 让id为abc的元素隐藏
    2. $("#abc").show() 让id为abc的元素显示
    3. $("#abc").toggle() 让id为abc的元素隐藏显示切换
  1. 属性选择器
  • $("div[id]") 匹配包含id属性的div
  • $("div[id='xxx']") 匹配id属性值为xxx的div
  • $("div[id!='xxx']") 匹配id属性值不为xxx的div
  1. 子元素选择器
  • $("div:first-child") 是第一个 子元素 并且是div元素
  • $("div:last-child") 是最后一个子元素 并且是div元素
  • $("div:nth-child(n)") 是第n个子元素 并且是div
  1. 表单选择器
  • $(":input") 匹配表达中的任意控件
  • $(":password") 匹配密码框
  • $(":radio") 匹配单选
  • $(":checkbox") 匹配多选
  • $(":checked") 匹配选中的单选 多选和下拉选
  • $("input:checked") 匹配选中的单选和多选
  • $(":selected") 匹配选中的下拉选

选择器回顾

  1. 基础选择器
  • div
  • id

  • .class
  • div,#id
  • *
  1. 层级
  • div span
  • div>span
  • div+span
  • div~span
  • 方法:

    1. .siblings()
    2. .prev()
    3. .prevAll()
    4. .next()
    5. .nextAll()
    6. .parent();
    7. .children()
  1. 过滤选择器
  • div:first
  • div:last
  • div:even
  • div:odd
  • div:lt(n)
  • div:gt(n)
  • div:eq(n)
  • div:not(xxxx)
  1. 内容选择器
  • div:has(p)
  • div:empty
  • div:parent
  • div:contains('xxx')
  1. 可见
  • div:hidden
  • div:visible
  • 方法: .show() .hide() .toggle()
  1. 属性
  • div[id]
  • div[id='xxx']
  • div[id!='xxx']
  1. 子元素
  • div:first-child
  • div:last-child
  • div:nth-child(n)
  1. 表单
  • :input
  • :password
  • :radio
  • :checkbox
  • :checked
  • input:checked
  • :selected

创建和添加元素

  1. 创建:
    var d = $("<div id='xxx'>xxxx</div>");
  2. 添加:
    父元素.append(d); 添加到最后
    父元素.prepend(d); 添加到最前
  3. 插入:
    弟弟元素.before(新元素);
    哥哥元素.after(新元素);
  4. 删除:
    被删除的元素.remove();

获取和修改元素的文本内容

元素对象.text("xxxx"); 赋值
元素对象.text();  取值
  • 等效js中的innerText

获取和修改元素的html内容

元素对象.html("<h1>xxx</h1>"); 赋值
元素对象.html();  取值
  • 等效js中的innerHTML

获取和设置元素的css样式

元素对象.css("样式名","值"); 赋值
元素对象.css("样式名");  获取样式的值
元素对象.css({"width":"200px","height":"100px"}); 批量赋值

获取和设置元素的属性 attr=attribute属性

元素对象.attr("属性名","值");  赋值
元素对象.attr("属性名");  取值

课程回顾

  1. jQuery是一个js的框架,让程序员写的更少实现的跟多
  2. js对象和jq对象互相转换
  • js->jq: var jq = $(js);
  • jq->js: var js = jq[0];
  1. 选择器
  • 基础选择器:

    1. div
    2. id

    3. .class
    4. div,#id
    5. *
  • 层级

    1. div span
    2. div>span
    3. div+span
    4. div~span
    • 方法: .siblings() .prev() .prevAll() .next() .nextAll() children() parent()
  • 过滤

    1. div:first
    2. div:last
    3. div:even
    4. div:odd
    5. div:lt(n)
    6. div:gt(n)
    7. div:eq(n)
    8. div:not(#abc)
  • 内容

    1. div:has(p)
    2. div:empty
    3. div:parent()
    4. div:contains('xxx')
  • 可见

    1. div:hidden
    2. div:visible
    3. .show() .hide() .toggle()
  • 属性

    1. div[id]
    2. div[id='xxx']
    3. div[id!='xxx']
  • 子元素

    1. div:first-child
    2. div:last-child
    3. div:nth-child(n)
  • 表单

    1. :input
    2. :password
    3. :radio
    4. :checkbox
    5. :checked
    6. input:checked
    7. :selected
  1. 创建元素

    var d = $("<div></div>");
    父元素.append(d); 后面
    父元素.prepent(d); 前面
  2. 插入

    兄弟.before(d);
    兄弟.after(d); 
  3. 删除

    元素.remove();
  4. 文本 text()
  5. html html()
  6. css css("color","red"); css({"":"","":""})
  7. 属性 attr("属性名","值");
Last modification:July 8th, 2019 at 02:24 pm
如果觉得我的文章对你有用,请随意赞赏

2 comments

  1. 森纯博客

    涨知识了

    1. Kiyoshi
      @森纯博客

      最近忙的没时间搭理博客了

Leave a Comment