前端基础之jquery

Posted 2020-10-19 jingjing12

jQuery是什么？

　　jQuery是别人写好的类库，封装了很多js原生代码，可以直接在页面上引用，可以直接使用别人写好的方法，比较方便

jQuery的用法：

　　1.引用本地jQuery文件:<script src="jquery-3.2.1.min.js"></script>

　　　　　　　　　　　　<script >按照jQuery的规则写代码</script>

　　2.CDN方式：<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

　　　　　　　　<script >按照jQuery的规则写代码</script>

jQuery使用

1. 查找标签
　　　　规则：$("这里面写条件") $后面没有空格
　　　　　　 基本查找
　　　　　　 ID查找
　　　　　　$("#id值")
　　　　　　class名找

　　　　　　$(".class名")
　　　　　　$("标签名")

查找元素的相关练习：
找到本页面中id是i1的标签-------------------------------------------$("#i1")
找到本页面中所有的h2标签 ------------------------------------------$("h2")
找到本页面中所有的input标签 ---------------------------------------$("input")
找到本页面所有样式类中有c1的标签 ------------------------------------$(".c1")
找到本页面所有样式类中有btn-default的标签 ---------------------------$(".btn-default")
找到本页面所有样式类中有c1的标签和所有h2标签 --------------------------$(".c1,h2")
找到本页面所有样式类中有c1的标签和id是p3的标签 ------------------------$(".c1,#p3")
找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签 ---------------$(".c1,.btn")
找到本页面中form标签中的所有input标签 -------------------------------$("form input")
找到本页面中被包裹在label标签内的input标签 ---------------------------$("label > input")
找到本页面中紧挨在label标签后面的input标签 ---------------------------$("label+input")
找到本页面中id为p2的标签后面所有和它同级的li标签 -----------------------$("#p2~li")
找到id值为f1的标签下面的第一个input标签 ------------------------------$("#f1 input:first")
找到id值为my-checkbox的标签下面最后一个input标签 ---------------------$("#my-checkbox input:last")
找到id值为my-checkbox的标签下面没有被选中的那个input标签----------------$("#my-checkbox input:not(:checked)")
找到所有含有input标签的label标签 -------------------------------------$("label:has(input)")

4. :has

2. 修改标签的样式
原生JS:
获取样式类： classList
添加样式类名 classList.add(.cls)
移除样式类名 classList.remove(.cls)
JQuery版：
获取样式类
添加样式类名
移除样式类名

3. 修改标签

4. 创建标签/添加标签/删除标签

5. 事件

6. 动画

7. 插件

8.Ajax