Jquery知识点小结

原生js的入口函数与jquery版本的入口函数对比

原生的js 入口函数

<script>
    window.onload=function(){
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            console.log("这是原生JS的入口函数");
        }
    }
</script>

JQ版本的入口函数

<script src="../js/jquery-1.11.3.js"></script>
<script>
    // $(function(){})这就是入口函数
    $(function(){
        $("#btn").click(function(){
            console.log("这是jq版本的入口函数");
        })
    })
</script>

jquery选择器

选择器通俗点就是：选中到我们的dom节点 或者说 选中我们页面中的元素的工具；
不管是css选择器也好 还是jq选择器也好 都是为了选中我们页面中的元素。

基础选择器

我们通过，$(“选择器”)来选中我们的元素 得到的是一个jq对象

基本选择器（jq中）：

1. 标签选择器：$(“p”)选中所有的p标签
2. id选择器： $("#test1")选中id是test1的标签
3. 类选择器: $(".test2")选中类名是test2的标签
4. 交集选择器: $(“p.test3”)选中的就是类名为test3的p标签
5. 分组选择器: $(“h1,h2,h3”)选中的是我们所有的h1,h2,h3标签
6. 后代选择器: $(".test4 p")选中的是我们类名为test4的内容中的p标签
7. 通配符选择器:$("*")选中我们页面上所有标签
8. 儿子选择器: $(".test5>p")选中的是我们类名为test5的儿子p标签
9. 兄弟选择器: $(".test5+h1")选中的是我们类名为test5的后面一个兄弟h1 如果后面的兄弟不是h1 那么他就不起作用
10. N兄弟选择器:$(".test6~p")选中的是我们类名为test6的后面的所有的p标签

jq中标签选择器 jq对象.css(“你要修改的属性”,“属性值”) jq中的选择器和css里面的很像

子元素过滤器

1. :root 选中根标签 也就是html标签
2. :nth-child(2) 选中每家的第二个孩子 不论是男孩还是女孩
3. :first-child 选中每家的第一个孩子 不论男孩还是女孩 和:nth-child(1)一样
4. :last-child 选中每一家的最后一个孩子
5. :nth-last-child(2) 这表示选中倒数第二个孩子
6. :only-child 选中每家的独生子女
7. :nth-child(2n) 和 :nth-child(even) 一样 选中每家排行偶数的孩子 从1开始算
8. :nth-child(2n+1) 和 :nth-child(odd) 一样 选中每家排行奇数的孩子 从1开始算
9. :nth-of-type(2) 针对的是同类型的标签 选中每家第二个儿子
10. :last-of-type 选中某一个类型标签的最后一个
11. :nth-last-of-type(2)选中的就是某一类标签的倒数第二个
12. :only-of-type选中每家唯一的儿子
13. :nth-of-type(2n-1)和:nth-of-type(odd)是一样的 表示选中每家排行为奇数的儿子或者女儿 索引从1开始
14. :nth-of-type(2n)和:nth-of-type(even)是一样的 表示选中每家排行为偶数的儿子或者女儿

基础过滤选择器

1. li:eq(0) 表示选中第一个li eq里面加的是 索引 默认是0开始
2. li:first 表示选中第一个li
3. li:last 表示选中最后一个li
4. li:even 表示选中偶数个的li 注意:我们这里起使坐标是0
5. li:odd 表示选中奇数个的li
6. li:gt(2)表示索引大于2的
7. li:lt(2)表示索引小于2的
8. :header 表示选中所有的标题标题
9. li:not(:eq(1)) 选中除了第二个li(索引为1的li)之外的所有li

属性选择器

1. [attribute] h1[title] 就是选中具有title这个属性的h1标签
2. [attribute=value] h1[title=world] 这就是选中title属性值为world的标签
3. [attribute!=value] h1[title!=world] 这就是选中title属性值不为world的标签
4. [attribute^=value] h1[title^=hello] 这就是选中title属性值以hello开头的
5. [attribute$=value]h1[title$=hello] 这就是选中title属性值以jq结尾的
6. [attribute*=value] h1[title*=wangcai]这就是选中title属性值有wangcai的属性
7. [attribute][id] h1[title][id]这表示选中既有title属性的 又有id属性的

内容过滤选择器

1. :contains(text) $(“li:contains(Jquery)”)选中内容包含Jquery的li
2. li:has(a) 这表示 内容有a标签的
3. li:empty 这是选中内容为空的li标
4. li:not(:empty) 这是选中内容不为空的li标签
5. li:parent 这是匹配子元素或者文本元素的

可见性选择器

1. :visible 选中看得到得元素
2. :hidden 选中隐藏得元素

.val可以拿到Input输入框中的value值

表单相关的选择器

1. 选择所有可用的表单元素 input:enable
2. 选择所有不可用的表单元素 input:disable
3. 选择选中的单选框和复选框
   :checked
4. 选择选中的下拉列表项
   :selected

动画

show()显示目标元素
hide()隐藏目标元素
toggle()切换目标元素
本质：显示和隐藏动画:控制标签的宽度和高度(透明度)来实现

li:gt(2):not(:last)表示li里面索引大于2的且除了最后一个以外的所有li

slideup()以滑动的方式隐藏目标元素

slideDown()通过使用滑动效果 显示目标元素

slideToggle()通过使用滑动效果 在显示和隐藏状态之间进行切换

第一个参数:动画时间(速度)
第二个参数:动画执行完毕之后的回调函数
本质：展开和收起动画:控制标签的高度

==animate() 用来改变css里面的样式 但是其改变的过程是一个渐变的过程 所以看起来是动画效果

语法 jQ().animate(optionsObj,timer,callBack)
第一参数为对象，键值类要做什么动画
第二参数为时间
第三参数为回调函数

第一个参数 是我们要改变的属性和属性值 第二个参数 是改变的时间==

fadeTo() 用淡出的动画来隐藏一个元素 第一个参数为时间 毫秒 第二个参数为透明度

fadeIn让隐藏的元素显示

fadeOut让显示的元素隐藏

第一个参数:动画时间(速度)
第二个参数:动画执行完毕之后的回调函数
淡入淡出到指定的值fadeTo （参数1，参数2，参数3）参数1为时间 ，参数2为透明度的值，参数3为回调函数
本质:操作标签设置标签的透明度

stop()停止当前正在运行的动画

第一个参数:控制队列中的任务(是否清空) true|false
第二个参数:控制是否停止动画 true|false
没有参数: 停止当前的动画, 后面的任务继续执行
true true :立即完成当前的动画,后面的任务不再执行
true false:所有动画任务立刻停止
false false:停止当前的动画,后面的任务继续执行 默认的情况
false true :立即完成当前的动画,后面的任务继续执行

delay():延迟执行任务

attr()说白了就是以前的setAttribute和getAttribute的结合体

DOM节点的操作

操作元素节点

1. 添加 .append
2. 替换 replaceAll
   新元素.replaceAll(旧元素)
   replaceWith 旧元素.replaceWith(新元素)
3. 删除 remove
4. 清除 empty
5. 包裹(外部套)
   使用一个元素去包裹另一个元素，实际上就是就是给一个元素创造一个父级
   wrap wrapAll
   wrap是给每一个选中的元素都加上一个包裹的元素
   wrapAll是给选中的元素套一个大的元素 也就是套一个大框
6. 包裹(里面套)
   使用一个元素包裹住某个元素的内部
   wrapInner给内容套上一个元素
7. 插入(将新元素做兄弟插入)(插到目标元素的后面)
   insertAfter 把…插到后面
   insertBefore 把…插到前面
8. 插入(把新元素做为儿子插入)(在前面插儿子)
   prepend prependTo 他俩的功能一致 但是主体不一样
9. 插入(把新元素做为儿子插入)(在后面插儿子)
   append appendTo 他俩的功能一致 但是主体不一样

创建节点元素并插入

在jquery中获得input中输入的值：
let value=$(“input”).val();
创建一个标签：
let li= $("<标签名></标签名>")

``中间可以写变量 但是为了区分变量和字符串 你需要加一个${变量名}

.val()如果没有参数 则是获得到value值 如果有 则是给value赋值

static 表示 不定位

在jq中 js中 z-index 换转成zIndex 在编译的过程中 会把zIndex转成z-index

jquery属性操作

addClass方法

语法：$(“p”).addClass(‘属性名1 属性名2’); 给某个元素添加一个类名，可以是多个类名

removeClass方法

语法：$(“p”).addClass(‘属性名1 属性名2’); 给某个元素删除一个类名，可以是多个类名

offset()方法

语法： $(“元素名称”).offset() 获取该元素相对于当前可视窗口的位置top和left值；返回一个对象{top：29，left：29}

scrollTop()方法 滚动条滚动距离

语法：$(window).scrollTop() 获取滚动条滚动的距离参数可选规定以像素计的新位置。一般不设置，设置100，就是会跑到100的位置,一般设置为0；点击回到顶部
$(window).scrollLeft()参数可选规定以像素计的新位置。一般不设置滚动条监听事件：$(window).on(“scroll”,fn)

定时器

setTimeout 一次性定时器 setInterval 循环定时器

jquery的核心函数方法

1. $(this).index()方法 ：
   作用：获取索引，角标
2. get（）方法：和 eq()方法差不多 ，不过get方法返回的是DOM标签
   作用:获取指定索引对应的标签返回
3. eq（）方法
   作用:获取指定索引对应的标签并且包装成jQuery对象返回
   没有参数:返回一个空的jQ对象(不是this)

jquery中的事件类型

鼠标的移入和移出事件
mouseover：鼠标悬停
mouseout : 鼠标移出

常用的事件类型

blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
change( ) 用户改变域的内容 input, textarea, select
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window