jQuery

哎喝娃哈哈
106 阅读2分钟

1、jquery概念：

jQuery是一个js类库，类库：其实就是一个js文件，别人提供的对象（属性和方法）：压缩版（正式上线项目）和未压缩的源代码版

目的： 简化js - DOM、事件、ajax

版本： 2.xx版本以上就不再支持老IE，做了向上兼容，1.11.3版本也能使用到最新的特性

常识题： jQuery有的人称呼叫做js库，而有的人称呼叫做js框架

称呼jQuery是一个库的人都是不够了解：jQuery由4个方面组成

1、jquery.js - 库：简化了js，大部分人只知道这一部分
2、jQuery.ui - 提供了页面的组件（组成页面一部分的部件） - 过时
3、jQuery.mobile - 移动端开发，不会学习，现在更流行uniapp
4、Qunit - 测试人员,用于测试javascript的工具

2、jQuery的使用步骤：

  1. 引入jQuery.js文件
  2. 使用jQuery的API去获取元素
  3. 使用jQuery的API去操作元素

3、jQuery如何获取元素：

1、*工厂函数：因为这个工厂可以做很多操作

$(); 或者 jQuery();

作用：

1、查找元素

语法：var 元素=$("jQuery选择器") - jQuery选择器是基于css选择器，但是比css选择器更加的强大
返回值：使用jQuery的工厂函数找到的元素，是一个jQuery对象集合，意味着不能使用以前的DOM方法去操作

1、jq找到的元素的特点：

	 1、隐式迭代 - 不用循环，直接做操作
	 2、具有链式操作 - 可以不断的使用.一步接一步的做下去
	 3、jq元素 和 dom元素 两者方法不换乱用，只能自己用自己的
	 转换：
	 jq -> dom：$("选择器")[i] - 只要加上下标就会变为DOM元素
			 绝对不要这么用，不希望把简单的变得麻烦
			 提出一点：千万不要对jq加下标，更不要循环

2、将dom -> jq：$(dom元素) - 有用：e.srcElement得到的都是一个dom元素，要转为jQuery元素才能使用对应的方法

	为什么一个方法可以实现多个操作
	function $(){
		arguments - 重载：判断传入的实参的不同执行不同的操作
	}

2、通过 节点之间的 关系：

  1. 父：$("xx").parent()
  2. 子：$("xx").children()
  3. 前一个兄弟：$("xx").prev();
  4. 后一个兄弟：$("xx").next();
  5. *除了自己的其他兄弟：$("xx").siblings();

注意: jQuery查找元素，返回值：jquery集合，可以直接做操作，切忌不要循环

4、操作元素

4.1内容：

html() - 底层就是dom的innerHTML - 能够识别标签
获取：$("xx").html();
设置：$("xx").html("新内容");

text() - 底层就是dom的innerText - 只能书写纯文本
获取：$("xx").text();
设置：$("xx").text("新内容");

val() - 底层就是dom的value - 单标签input、select&option
获取：$("xx").val();
设置：$("xx").val("新内容");

4.2属性：

attr() - 底层就是dom的getAttribute/setAttribute - 自定义属性也可以操作
获取：$("xx").attr("属性名")
设置：$("xx").attr("属性名","属性值");
删除：$("xx").removeAttr("属性名")

专门提供了操作class的API：

	1、追加class：$("xx").addClass("追加的class值")
	2、删除class：$("xx").removeClass();
		没传参数，清空所有class
		传递实参，删除你传递的class
	3、切换class：有此class和没有此class之间进行切换
			$("xx").toggleClass("active");//在有active和没有active之间进行切换

4.3样式：

css() - 设置时依然是内联样式（优先级高，不会影响到其他元素），获取时不关注内联/内部/外部样式表，只管当前生效的
获取：$("xx").css("属性名");
设置：$("xx").css({
	"属性名":"属性值",
	...
      });

获取的目的：往往都是用于判断比较
设置的目的：修改

创建&渲染

创建：var elem=$(`<开始标签 属性名='${属性值}'>${内容}</结束标签>`)

渲染：*父亲.append(elem);//后面，儿子
       父亲.prepend(elem);//前面，儿子
       兄弟.after(elem);//后面，兄弟
       兄弟.before(elem);//前面，兄弟

一句话创建并且渲染：父亲.append($(`<开始标签 属性名='${属性值}'>${内容}</结束标签>`));

删除：$("xx").remove();

克隆：$("xx").clone();

*获取元素下标：$("xx").index();

avatar
文章
阅读
粉丝