JQ学习笔记快速掌握知识点

Jquery学习笔记一

所谓前端js框架，并不是什么很高深的东西，无非是把定义好的JS方法集中放在JS文件，在前端页面引入这些js文件（框架）并直接使用。而Jquery 就是前端框架其中之一。

Jquery版本的改变

Jquery版本分为：1.x;2.x;3.x,其中1,x版本兼容ie678,使用的人比较多，2.x不兼容ie678,使用者较少，3.x不兼容ie678，使用的人较多，适合用新的插件，不兼容老版本的JS插件。

1.快速入门
Jquery对象:
var div1 =$ ("#div1");
alert(div1.html());
$是方法名，#id选择器 html()类似JS中innerHTML属性，获取文本内容
引入Jquery 框架：
<script src=“js/jquery-3.3.1.min.js”>

JQuery对象与JS对象的区别与转换

1：jq对象操作更加方便：数组对象赋值不用遍历赋值，可以直接html()带参数赋值
2：jq和js对象方法不通用
3：两者相互转换
jq–>js: jq对象[索引] jq对象.get(索引)
js–>jq $(JS对象)

JQ选择器

1、基本选择器
id 选择器 类选择器 元素选择器
$("#div") $(".one") $(“div”)
2、层级选择器
所有子标签选择器 A B 子标签选择器 A > B
3、属性选择器
$(“input[title=‘vlaue’]”)
4、过滤选择器
$(“div:first”) $(“div:last”) $(“div:not(.one)”) $(“div:odd”) $(“div:even”)
$(“div:gt(3)”) $(“div:eq(3)”) $(“div:lt(3)”) $(“div:header”)
5、表单选择器
$(“input:enabled”) $(“input:disenabled”) $(“checkbox:checked”)
$("#job:selected")

JQ DOM操作

一、JQ DOM内容操作
例子：
<input id=“myinput” type=“test” name=“username” value=“张三” /><br/>
<div id=“mydiv”><p><a href="#">标题标签 </a></p></div>

操作解释
1、 var value =$("#myinput").val() 获取input的值 $("#myinput").val(“aaa”) 改变值

2、var s = $("#mydiv").html() 获取<p><a href="#">标题标签 </a></p>\

 $("#mydiv").html("aaa")改变标签体内容<div id="mydiv">aaa</div>

3、var s = $("#mydiv").text() 获取标题标签

$("#mydiv").text("aaa") 改变标文本内容 <div id="mydiv"><p><a href="#">aaa </a></p></div>

二、JQ DOM属性操作
通用属性操作
固有属性
prop() removeProp()
自定义属性
attr() removeAttr()
class类属性
addClass() ; 添加属性
removeClass(）; 删除属性
toggleClass() ;切换样式
toggleClass(“one”)判断对象上是否存在class=“one”,如果存在就删除，不存在就添加
css()
三、JQ DOM的CRUD操作
父子关系：
append(); 对象1.append(对象2) 将对象2添加到对象1之后,两个对象是父子关系
prepend();
appendTo();
prependTo();
兄弟关系：
after(); 对象1.after(对象2) 将对象2添加到对象1之后，两个对象是兄弟关系
before();
insertAfter();
insertbefore();
remove(); 删除当前节点
empty();清空后代，保存当前节点