jQuery的简单实用的25个知识点
1.$符号
$符号是jQuery的简称
$符号是jQuery中的顶级对象 相当于原生js中的window
通过$可以将元素封装成对象从而调用jQuery中的方法
jQuery对象是以伪数组的形式存储的
$("div").hide(); //将div包装成jQuery对象 调用hide方法
2.Dom对象 jQuery对象
Dom对象是通过原生js获取的元素对象
注意: Dom对象不能使用jQuery中的方法 jQuery不能使用原生js中的方法
3.Dom对象 jQuery对象的转换
将Dom转化为jQuery对象 使用$直接获取就行了
将jQuery转化为Dom对象是通过索引就可以了
$("div")[0] // 通过中括号索引值的方法
$("div").get(0) // 通过get方法
4.jQuery的选择器
1.选择器的写法
$("选择器") //选择器的写法和原生js的一样
2.修改css的样式
$("选择器").css("属性","属性值")
5.jQuery中的隐式迭代
隐式迭代: 通过$("选择器)获取的对象 在绑定事件或者修改css样式的时候 都会在内部进行了循环 给所有的元素进行绑定事件或者修改样式
<script type="text/javascript">
// 绑定事件
$("li").click(function(){
console.log($(this).index())
})
//给每一个li修改样式
$("li").css("background","red")
</script>
6.jQuery中的入口函数
入口函数的作用就是等dom结构渲染结束即可执行内部代码 不用等待所有的外部资源加载完成
$(function(){ }) $(document).ready(function(){ })
7.jQuery中的筛选器
注意:这都是在选择器中进行筛选的
$('li:first')：第一个元素
$('li:last')：最后一个元素
$('li:eq(2)')==》索引为2【查找指定索引的元素】
$('li:odd')==》索引为奇数
$('li:even')==》索引为偶数
注意：索引是从0开始的8.jQuery中筛选的方法
$("li").parent() //指的父级
//找的是下一级
$("li").children(选择器) //指的是子级的集合 如果说有参数的话就按照指定的找 如果没有的话 就是字迹的集合
//找的是内部所有
$("li").find()
$("li").siblings()//找的是所有的兄弟
$("li").nextAll() //后面的
$("li").prevAll() //前面的
$('div').hasClass('aaa') //判断师傅有这个类名 如果存在就返回true
9.jQuery中的操作css方法
//如果css中的参数是属性名和属性值用逗号分隔 属性名必须加上引号 如果数字可以不用单位和引号的话 $("li").css("width",200) //如果css中的参数是一个对象的话 必须要有中括号 每个属性里面要有中括号 $('div').css({ // 属性名 ：属性值， width : 200, height : 200, background : 'yellow', 'font-size' : '60px', });
10.jQuery中设置类的方法
$("li").addClass(类名) // 添加类
$("li").removeClass(类名) //删除类
$("li").toggleClass(类名) // 切换类
11.jQuery中动画效果
事件一旦没触发 就会执行 可能会出现排队的现象 所有使用stop()放在动画的前面可以阻止事件排队
slideDown() //显示 slideUp() // 隐藏 slideToggle() //切换 //里面的 参数可以设置 speed速度或者时间 也可以设置回调函数 //回调函数是在动画执行结束之后 在执行的 fadeIn() //淡入 fadeOut() //淡出 fadeToggle() //切换 fadeTo() //调整透明度 必须要设置持续时间以及透明度的参数 show() // 显示 hide() //隐藏 toggle() //切换 animate({ width:100 }) //必须要有要修改的样式属性 是一个对象
12.jQuery的属性操作
设置固有属性和自定义属性
$("div").prop("属性名") // 可以获取固有属性属性值
$("div").prop("属性名","新的属性值") //可以更改或者设置固有属性的属性值
$("div").attr("属性名") // 可以获取自定义属性属性值
$("div").attr("属性名","新的属性值") //可以更改或者设置自定义属性的属性值
了解:$(元素).data(name,value) 想被选中的元素附加数据
获取的时候 直接是$(元素).data(name)
13.jQuery内容文本值
$(元素).html() // 获取元素内容 $(元素).text() //获取元素的文本信息 $(元素).val()
//获取表单内的信息
14.jQuery中循环
//主要是遍历每一个元素 用于dom处理 $(元素).each(function(index,elm){ //index指的每次循环的索引值 elm指的每次循环出来的dom对象 }) //可以遍历任何对象 主要是用于数据处理方面 $.each(object,function(index,elm){ })
15.创建/删除/添加元素
//创建元素 $("li") = "<li>内容</li>" //添加元素 //内部添加 添加到元素内部 父.append(子) 子.appendTo(父) //外部添加 添加到元素内部 同级 $("li").before() 添加到元素的前面 $("li:).after() 添加到元素的后面 //删除元素 $("div").remove() //删除这个div $("div").empty() //清空元素的内部 $("div").html("") //清空元素的内部
16.jQuery中尺寸
//获取内容区的宽度或者高度 $("div").width() $("div").height() //获取内容区以及padding的总和 $("div").innerWidth() $("div").innerWidth() //获取内容区以及padding还有border的总和 $("div").outerWidth() $("div").outerWidth() //获取内容区以及padding还有border 以及margin的总和 $("div").outerWidth(true) $("div").outerWidth(true)
17.jQuery中的位置操作
//offset 获取盒子里文档之间距离 返回的是一个对象通过.top或者.left获取对应的值 可以通过赋值进行改变 $("div).offset().top //获取div到文档顶部的距离 //positon 获取的是到还有定位的父盒子的距离 可以通过赋值进行改变 $("div").position().top //获取div顶部到含有定位的父盒子的之间的距离
18.偏移操作
$(div).scrollTop() 获取元素滚动的距离
补充:结合着offset().top使用
19.事件注册的两种方式
//第一种 $("li").click(function(){ //元素对象后面直接绑定事件 }) //第二种 $("li").on("事件","子元素的选择器",function(){ //$(this)指的是子元素 }) $("li).on( {click:function(){ console.log("点击") }}, {,mouseenter:function(){ console.log("进入") }} )
优势:
1.使用on绑定事件可以给元素同时绑定多个事件类型
2.可以实现事件委托
3.使用on绑定的事件 即使是动态创建的元素也是有事件
20.解除事件(一次性事件)
$("li").off("click")
//如果off括号里面什么都不写的话 就是解除li的所有事件
$("ul").off("click","li")
//解除事件委派
$("li").one("click",function(){
//一次性事件
})
21.自动触发事件的三种方式
$("li").click()
$("li").trigger("click")
$("li").triggerHandler("click")
//区别在于triggerHandle() 不会触发元素默认的效果
22.事件对象
e = window.event || e //获取事件对象的兼容性写法 e.preventDefault() //阻止默认行为 e.stopPropagetion() //阻止冒泡
23.释放$符号
//使用$.noconflict(); 可以将$符号解绑 换成别的 let jq = $.noconflict(); //案例 <script> let jq = $.conflict(); </script>
24.jquery中的插件
自己看
补充点:
$(元素).index() //可以获取元素的索引值
