JQuery

此框架就是对JavaScript中DOM部分的内容进行了封装,可以提高开发效率.

如何使用jQuery框架?

jQuery框架实际上就是一个普通的js文件, 在html页面中引入即可

jQuery中获取到的元素对象,和原生JavaScript中获取的元素对象不是同一种对象, 彼此的方法不能混着调用 ,比如同样是获取文本框的值 , js中是对象.value , 而jq中对象.val()

jq对象和js对象互相转换, 因为有的时候获取到的对象可能是js对象但是需要调用jq对象的方法这时需要将js对象转成jq对象

• js转jq: let jq = $(js);
• jq转js: let js = jq[0]; jq对象是一个数组 里面装着js对象

jQuery选择器

基础选择器

• 标签名 $(“div”)
• id选择器 $(“#id”)
• class选择器 $(“.class”)
• 分组选择器 $(“div,#id,.class”)
• 任意元素选择器 $(“*”)

层级选择器

• $(“div span”) 子孙后代选择器
• $(“div>span”) 子元素选择器

• 层级相关的方法

  • $(“#abc”).next(“div”) 匹配id为abc元素的弟弟元素
  • $(“#abc”).nextAll() 匹配id为abc元素的弟弟们元素
  • $(“#abc”).prev() 匹配id为abc元素的哥哥元素
  • $(“#abc”).prevAll() 匹配id为abc元素的哥哥们元素
  • $(“#abc”).siblings() 匹配id为abc元素的兄弟们元素
  • $(“#abc”).parent() 匹配id为abc元素的父元素
  • $(“#abc”).children(“div”) 匹配id为abc元素的子元素们

过滤选择器

• $(“div:first”) 匹配所有div里面的第一个
• $(“div:last”) 匹配所有div里面的最后一个
• $(“div:eq(n)”) 匹配所有div里面下标为n的div
• $(“div:lt(n)”) 匹配所有div中下标小于n的div
• $(“div:gt(n)”) 匹配所有div中下标大于n的div
• $(“div:not(.abc)”) 匹配所有div中class值不等于abc的元素
• $(“div:even”) 匹配所有div中下标为偶数的div
• $(“div:odd”) 匹配所有div中下标为奇数的div

内容选择器

• $(“div:has(p)”) 匹配包含p子元素的div
• $(“div:empty”) 匹配空的div
• $(“div:parent”) 匹配非空的div
• $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div

可见选择器

• $(“div:visible”) 匹配所有显示的div
• $(“div:hidden”) 匹配所有隐藏的div

• 显示和隐藏相关的方法

  • $(“#abc”).show() 让id为abc的元素 显示
  • $(“#abc”).hide() 让id为abc的元素隐藏
  • $(“#abc”).toggle() 让id为abc的元素显示和隐藏状态切换

属性选择器

• $(“div[属性名]”) 匹配包含xxx属性的div
• $(“div[属性名=’xxx’]”) 包含某个属性等于某个值的div
• $(“div[属性名!=’xxx’]”) 包含某个属性不等于某个值的div

子元素选择器

• $(“div:first-child”) 匹配是div并且是子元素并且是第一个子元素
• $(“div:last-child”) 匹配是div并且是子元素并且是最后一个子元素
• $(“div:nth-child(n)”) 匹配是div并且是子元素并且是第n个子元素 n从1开始

表单选择器

• $(“:input”) 匹配表单中所有控件
• $(“:password”) 匹配所有密码框
• $(“:radio”) 匹配所有单选
• $(“:checkbox”) 匹配所有多选
• $(“:checked”) 匹配所有选中的单选/多选和下拉选
• $(“input:chekced”) 匹配所有选中的单选和多选
• $(“:selected”) 匹配选中的下拉选

修改页面内容相关

创建及添加元素对象

• 创建元素对象

  let d = $("<div id='d1'>xxxx</div>");

• 把创建出来的新元素添加到页面中
  元素对象.append(新元素); //添加到最后面
  元素对象.prepend(新元素); //添加到最前面

• 插入元素
  元素对象.before(新元素); //插入元素到某个元素的前面
  元素对象.after(新元素); //插入元素到某个元素的后面

• 删除元素
  元素对象.remove();

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

• 元素对象.text(“xxx”); 修改
• 元素对象.text(); 获取

获取和修改元素的html内容

• 元素对象.html(“标签内容”); //修改
• 元素对象.html(); //获取

获取和修改元素的css样式

• 元素对象.css(“样式名”,”值”); //修改样式的值
• 元素对象.css(“样式名”); //获取样式的值
• 元素对象.css({“样式1名”:”值”,”样式2名”:”值”}); //批量赋值

获取和修改元素的属性

• 元素对象.attr(“属性名”,”值”); 修改
• 元素对象.attr(“属性名”); 获取