jq概述

  • js库
  • jquery的版本
    • 1.x 是最稳定的版本
    • 2.x 不支持IE678浏览器内核
    • 3.x 只支持最新的浏览器

jq引入与使用

  • 在线引入
  1. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  • 页面加载
  1. $(function(){
  2.     });
  • 获取dom
  1. var inputEle  = $("#inputId");
  • jQuery对象和js对象之间的转换

jq对象本质是一个伪数组，不是数组，但可以当做数组使用。

  1. inputEle[0] //转js对象
  2. $(inputEle) //转jq对象

选择器

基础选择器

  1. $("#id")
  2. $(".class")
  3. $("tagName")

层级选择器

  1. $("A B")   // 包含选择符
  2. $("A > B")  // 子选择符
  3. $("A + B")  // 相邻选择符（A后面必须立即是B，否则选不中）
  4. $("A ~ B")  // A后面的B兄弟
  5. $("#two").siblings("div") // A所有同级的B兄弟

属性选择器

  1. E[att]
  2. E[att="val"]  // 等于
  3. E[att~="val"] // att里面的存在值为val，因为att可能有多个并列属性
  4. E[att^="val"] // 以val开头
  5. E[att$="val"] // 以val结尾
  6. E[att*="val"] // 包含
  7. E[att|="val"] // 值为val，或者值是以val-开头的
  9. E[att][att]  //多条件

过滤选择器

就是对jquery数组中的索引进行操作

  1. :first 第一个元素
  2. :last  最后一个元素
  3. :not(选择器) 不是指定选择器元素
  4. :even  偶数
  5. :odd   奇数
  6. :eq(3) 索引值等于3的元素（重点）
  7. :lt(3) 索引值小于3的元素
  8. :gt(3) 索引值大于3的元素
  9. :header 所有的标题<h1> ---<h6>

表单选择器

  1. :enabled 表示表单可用
  2. :disable 表示表单不可用
  3. :checked 表示多选框被选中（重点）
  4. :seleted 表示下拉框被选中（重点）
  5. :input   表示所有input元素
  6. :text    表示所有type="text"的input元素
  7. // 其他表单元素也一样

操作dom

查/改

  • 文本值和value属性（重点）
  1. val();       
  2. val("nihao")
  3. text([value])
  4. html([value]);
  • 操作dom属性
  1. attr(name[,value]) 获得/设置属性的值
  2. prop(name[,value])获得/设置属性的值(checked，seected)如果是下拉框和复选框要设置属性必须用prop
  • 操作class
  1. addClass(value) 添加class属性，参数就是class属性的值
  2. removeClass(value) 删除class属性，参数就是class属性的值
  3. toggleClass(value) 如果你要有class属性，则删除，如果没有class属性，则添加
  4. css(name[,value])//一个参数是获取样式，两个参数设置样式

创建

  1. var newEle = $("<li id='gz' name='guangzhou'>广州</li>");
  2. $("#city").append(newEle);

插入

  1. append(element)  添加成最后一个子元素  父子（重点）
  2. prepend(element) 添加成第一个子元素    父子
  3. before(element)  添加到当前元素的前面  兄弟        
  4. after(element)  添加到当前元素的后面   兄弟

删除

  1. remove() 删除指定元素
  2. empty() 清空指定元素的所有子元素,元素身保

这短短的一生我们最终都会失去，不放大胆一点，爱一个人、攀一座山、追一个梦！