jquery
jquery知识点总结
jq认识:
<!-- JQ版本的入口函数<script src="../js/jquery-1.11.3.js"></script><script>
// $(function(){})这就是我们的入口函数
$(function(){
$("#btn").click(function(){
console.log("这是jq版本的入口函数");
})
})</script> -->
关于选择器:
啥是选择器 -->
就是选中到我们的dom节点 或者说 选中我们页面中的元素的工具 -->
不管是你的css选择器也好 还是jq选择器也好 都是为了选中我们页面中的元素
基础选择器:
<!--
我们通过$("选择器")来选中我们的元素 得到的是一个jq对象
基本选择器(jq中):
标签选择器:$("p")选中所有的p标签
id选择器: $("#test1")选中id是test1的标签
类选择器: $(".test2")选中类名是test2的标签
交集选择器: $("p.test3")选中的就是类名为test3的p标签
分组选择器: $("h1,h2,h3")选中的是我们所有的h1,h2,h3标签
后代选择器: $(".test4 p")选中的是我们类名为test4的内容中的p标签
通配符选择器:$("*")选中我们页面上所有标签
儿子选择器: $(".test5>p")选中的是我们类名为test5的儿子p标签
兄弟选择器: $(".test5+h1")选中的是我们类名为test5的后面一个兄弟h1 如果后面的兄弟不是h1 那么他就不起作用
N兄弟选择器:$(".test6~p")选中的是我们类名为test6的后面的所有的p标签
-->
// jq中标签选择器 jq对象.css("你要修改的属性","属性值") jq中的选择器和css里面的很像
子元素过滤选择器:
:root 选中根标签 也就是html标签
:nth-child(2) 选中每家的第二个孩子 不论是男孩还是女孩
:first-child 选中每家的第一个孩子 不论男孩还是女孩 和:nth-child(1)一样
:last-child 选中每一家的最后一个孩子
:nth-last-child(2) 这表示选中倒数第二个孩子
:only-child 选中每家的独生子女
:nth-child(2n) 和 :nth-child(even) 一样 选中每家排行偶数的孩子 从1开始算
:nth-child(2n+1) 和 :nth-child(odd) 一样 选中每家排行奇数的孩子 从1开始算
:nth-of-type(2) 针对的是同类型的标签 选中每家第二个儿子
:last-of-type 选中某一个类型标签的最后一个
:nth-last-of-type(2)选中的就是某一类标签的倒数第二个
:only-of-type选中每家唯一的儿子
:nth-of-type(2n-1)和:nth-of-type(odd)是一样的 表示选中每家排行为奇数的儿子或者女儿 索引从1开始
:nth-of-type(2n)和:nth-of-type(even)是一样的 表示选中每家排行为偶数的儿子或者女儿
基础选择过滤器:
li:eq(0) 表示选中第一个li eq里面加的是 索引 默认是0开始
li:first 表示选中第一个li
li:last 表示选中最后一个li
li:even 表示选中偶数个的li 注意:我们这里起使坐标是0
li:odd 表示选中奇数个的li
li:gt(2)表示索引大于2的
li:lt(2)表示索引小于2的
:header 表示选中所有的标题标题标签
li:not(:eq(1)) 选中除了第二个li(索引为1的li)之外的所有li
属性选择器:
[attribute] h1[title] 就是选中具有title这个属性的h1标签
[attribute=value] h1[title=world] 这就是选中title属性值为world的标签
[attribute!=value] h1[title!=world] 这就是选中title属性值不为world的标签
[attribute^=value] h1[title^=hello] 这就是选中title属性值以hello开头的
[attribute = v a l u e ] h 1 [ t i t l e =value] h1[title =value]h1[title=hello] 这就是选中title属性值以jq结尾的
[attribute*=value] h1[title*=wangcai]这就是选中title属性值有wangcai的属性
[attribute][id] h1[title][id]这表示选中既有title属性的 又有id属性的
内容过滤器:
:contains(text) $(“li:contains(Jquery)”)选中内容包含Jquery的li
li:has(a) 这表示 内容有a标签的
li:empty 这是选中内容为空的li标签
li:not(:empty) 这是选中内容不为空的li标签
li:parent 这是匹配子元素或者文本元素的
可见性选择器:
:visible 选中看得到得元素
:hidden 选中隐藏得元素
.val()拿到Input中得value值
表单相关的选择器:
<!-- <script>
// 选择所有的表单元素 :input
$('button:eq(0)').click(function(){
$(":input").css("outline","3px solid red")
})
// 选择所有的文本框 :text
$('button:eq(1)').click(function(){
$(":text").css("outline","3px solid red")
})
// 选择所有的密码框 :password
$('button:eq(2)').click(function(){
$(":password").css("outline","3px solid red")
})
// 选择所有的单选框 :radio
$('button:eq(3)').click(function(){
$(":radio").css("outline","3px solid red")
})
// 选择复选框 :checkbox
$('button:eq(4)').click(function(){
$(":checkbox").css("outline","3px solid red")
})
// 选择所有的提交按钮
$('button:eq(5)').click(function(){
$(":submit").css("outline","3px solid red")
})
// 选择所有的图片按钮 :image
$('button:eq(6)').click(function(){
$(":image").css("outline","3px solid red")
})
// 选择重置按钮
$('button:eq(7)').click(function(){
$(":reset").css("outline","3px solid red")
})
// 选择所有得普通按钮
$('button:eq(8)').click(function(){
$(":button").css("outline","3px solid red")
})
// 选择所有得文件上传按钮
$('button:eq(9)').click(function(){
$(":file").css("outline","3px solid red")
})
</script> -->
<!--
选择所有可用的表单元素 input:enabled
选择所有不可用的表单元素 input:disabled
选择选中的单选框和复选框 :checked
选择选中的下拉列表项 :selected
-->
动画:
// 第一种 利用show 和hide去显示隐藏
// show()显示目标元素
// hide()隐藏目标元素
// 第二种 利用slideDown()显示
// slideDown()通过使用滑动效果 显示目标元素
// 第三种 也就是最简单的方法 slideToggle()
// slideToggle()通过使用滑动效果 在显示和隐藏状态之间进行切换
// animate() 用来改变css里面的样式 但是其改变的过程是一个渐变的过程 所以看起来是动画效果
// 第一个参数 是我们要改变的属性和属性值 第二个参数 是改变的时间
// attr()说白了就是以前的setAttribute和getAttribute的结合体
$(this).attr(“class”,“on”)//这就表示设置一个属性class值为on
动画:
// 选中兄弟元素 siblings()
// stop()停止当前正在运行的动画
// fadeTo() 用淡出的动画来隐藏一个元素 第一个参数为时间 毫秒 第二个参数为透明度
// slideup()以滑动的方式隐藏目标元素
// slideDown()以滑动方式显示目标元素
// hide() 如果没有参数的话 那么就是立马隐藏
// 如果有参数的话 是以收缩的形式隐藏 参数是时间
dom节点的操作:
// 创建DOM节点 并把它插入到某个元素的内部
// 在js中 creatElement 插入的话 appendChild
// 在JQ中呢?
<script>
// 1.创建和添加
// 当我点击按钮的时候 会往box里面加入一个ul 还有li...
$("#btn1").click(function () {
console.log("----创建元素节点,并插入到某个元素内部----");
let ul = $("<ul><li>xxxx</li></ul>"); //创建元素节点
$(".box").append(ul);
});
// 2.替换(replaceAll)
$("#btn2").click(function(){
// 想替换 肯定得有提前准备好的元素
let ul=$("<ul><li>React</li><li>Vue</li><li>Angular</li></ul>")
// 使用的是 replaceAll 新元素.replaceAll(旧元素)
// replaceWith 旧元素.replaceWith(新元素)
ul.replaceAll($("ol"));
confirm("切记 replaceAll 是 新元素.replaceAll(旧元素)")
})
// 2.替换(replaceWith)
$("#btn3").click(function(){
// 想替换 肯定得有提前准备好的元素
let ul=$("<ul><li>React</li><li>Vue</li><li>Angular</li></ul>")
// 使用的是 replaceAll 新元素.replaceAll(旧元素)
// replaceWith 旧元素.replaceWith(新元素)
$("ol").replaceWith(ul);
confirm("切记 replaceWith 是 旧元素.replaceWith(新元素)")
})
// 3.删除 remove
$("#btn4").click(function(){
// 删除java的那个li
// 删除标签 remove
$("ul>li:last-child").remove();
})
// 4.清除 empty
$("#btn5").click(function(){
// 清除只是让你这个标签的内容为空 但是并不是删除标签 标签还是存在的
$("ul>li:last-child").empty();
})
// 5.包裹(外部套)
// 使用一个元素去包裹另一个元素
// 说白了 就是给一个元素创造一个爸爸
// wrap wrapAll
$("#btn6").click(function(){
let div=$("<div style='border:1px solid red'></div>");
// wrap是给每一个选中的元素都加上一个包裹的元素
$("ul,ol").wrap(div);
})
$("#btn7").click(function(){
let div=$("<div style='border:1px solid red'></div>");
// wrapAll是给选中的元素套一个大的元素 说白了就是套一个大框
$("ul,ol").wrapAll(div);
})
// 6.包裹(里面套)
// 使用一个元素包裹住某个元素的内部
$("#btn8").click(function(){
// wrapInner给内容套上一个元素
let span=$("<span>123</span>")
$(".box").wrapInner(span);
})
// 7.插入(将新元素做兄弟插入)(插到目标元素的后面)
$("#btn9").click(function(){
let li=$("<li>我是新来的兄弟</li>");
// after insertAfter 他俩的功能一模一样
// after用法 目标元素.after(新元素)
// insertAfter
// $("ul>li:last-child").after(li)
li.insertAfter($("ul>li:last-child"));
// after 是 在...之后
// insertAfter 把...插到后面
})
// 7.插入(将新元素做兄弟插入)(插到目标元素的前面)
$("#btn10").click(function(){
let li=$("<li>我是新来的兄弟</li>");
// li.insertBefore($("ul>li:first-child"));
$("ul>li:first-child").before(li)
})
// 8.插入(把新元素做为儿子插入)(在前面插儿子)
$("#btn11").click(function(){
let li=$("<li>我是新来的儿子</li>");
// prepend prependTo 他俩的功能一致 但是主体不一样
// $("ul").prepend(li)
li.prependTo($("ul"));
})
// 8.插入(把新元素做为儿子插入)(在后面插儿子)
$("#btn12").click(function(){
let li=$("<li>我是新来的儿子</li>");
// append appendTo 他俩的功能一致 但是主体不一样
$("ul").append(li)
// li.appendTo($("ul"));
}) -->
创建元素节点:
<!-- <script>
$("#add").click(function(){
// 第一 想拿到值 拿到input输入框里面的值
// 第二 把拿到的值添加到一个li标签中 然后把其放到ul里面
// .value是你在DOM中拿到值得方法 document.getElementsByTagName("input")[0]这个是DOM对象
// let value =document.getElementsByTagName("input")[0].value;
// 在jq对象中 Input输入框得值是val();
let value=$("input").val();
// 引号里面是字符串 没法放变量 value是变量
// let li=$("<li></li>")
// ``中间可以写变量 但是为了区分变量和字符串 你需要加一个${变量名}
let li=$(`<li>${value}</li>`)
$("#list").prepend(li);
// 清空输入框里面得内容
// .val()如果没有参数 则是获得到value值 如果有 则是给value赋值
$("#text").val("456");
// 在js document.getElementsByTagName("input")[0].value;
// $("input").val() val()这是一个函数 如果你不写参数 他得作用就是获得到你input这个标签中value得属性值
// $("input").val("456") 给这个value赋值为456
})
// ``中间可以写变量 但是为了区分变量和字符串 你需要加一个${变量名}
${value}
</script> -->
鼠标事件:
.scroll:滚动事件
mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
mouseenter 事件只在鼠标移动到选取的元素上时触发。
mouseout 事件在鼠标离开任意一个子元素及选的元素时触发。
mouseleave 事件只在鼠标离开选取的的元素时触发。
click:单击事件。
dblclick:双击事件。
mousedown:按下鼠标键时触发。
mouseup:释放按下的鼠标键时触发。
mousemove:鼠标移动事件。
mouseover:移入事件。
mouseout:移出事件。
mouseenter:移入事件。
mouseleave:移出事件。
contextmenu:右键事件。
// 如何获取索引呢? 目标元素.index()
let li_index=$(this).index();
// html()是在标签内改变内容 text是改变文本内容 目标元素.text(内容)
$(“span”).text(li_index+1)
// attr()如果有两个参数 表示给属性赋值 addClass添加类 是在原有的基础上给class添加
// // 以前你用什么scolltop 做一个减法
// // $(window).height() 获得一屏的高度 clienHeight
// let ad_top = ($(window).height() - $(".ad").height()) / 2;
// // ad_top就是距离页面顶端的距离 也就是我们css属性里的top 就是距离坐标系body上面x轴的距离
// $(".ad").animate({ top: ad_top }, 1000);
// // 滚动事件 window页面滚动
// $(window).scroll(function () {
// // 往下滚动多少 你这个小广告就滑动多少
// // 你要拿到滚动上去的高度 $(window).scrollTop()
// // 滚动的距离+原本的ad_top 才是我们滚动后广告距离坐标轴的位置
// let ad_top =($(window).height() - $(".ad").height()) / 2 + $(window).scrollTop();
// $(".ad").stop().animate({ top: ad_top }, 1000);
// });
$("#nav").fadeIn(500)
// fadeIn让隐藏的元素显示
$("#nav").fadeOut(500)
// fadeOut让显示的元素隐藏
$("html").animate({scrollTop:0},500)
// 如果你只是想回到顶部 你可以这样用 但是如果想又动画 那么用animate
// $(window).scrollTop(0);
// 获取导航条向上的偏移量 offset().top;
// static 表示 不定位