jquery

最新推荐文章于 2023-07-07 14:28:52 发布

小布很生气

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量207

点赞数

分类专栏： python，HTM

本文链接：https://blog.youkuaiyun.com/weixin_42100915/article/details/80526661

版权

python，HTM 专栏收录该内容

9 篇文章

订阅专栏

jquery库
兼容各种浏览器，提供AJAX交互

=============必须先引入：
<script src="juqery"></script>
juQuery对象 $号

加载完成页面后加载
完整：
$(document).ready(function(){
// 加载页面后执行的内容
})
简写：
$(function(){
// 加载页面后执行的内容
})

===============基本选择器(拿到的是数组和js一样)
$("*") 所有标签
$("#id") id名
$(".class") 标签class名
$("标签名") 标签名
$(".class,p,div") 多选

=================层级选择器
$(".outer div") class名为outer 下所有div标签(后代)
$(".outer>div") 下的div(子代)
$(".outer+div") 相邻的向下查找一个不可以间隔
$(".outer~div") 向下查找div标签可以间隔

===============基本筛选器
$("li:first") li标签下的第一个
$("li:eq(2)") li标签下的第三个从零开始
$("li:even") li标签的所有奇数行
$("li:odd") 偶数行
$("li:gt(1)") 大于2的标签行
$("li:lt(1)") 小于2的行

===============属性选择器
$("[id='div1']") id为div1的标签
$("[属性='值'][id]") 自己定义属性为值的，可以结合id匹配

===============表单选择器
$("[type='text']") ---->$(":text") type值等于text的
只适用input标签

========筛选器
$("li").eq(1) 索引下标查找
$("li").first() 第一个
$("li").last() 最后一个

$(".outer").childern("p") 在class名为outer下找p标签（子代）
$(".outer").find("p") 后代所有

$("li").eq(2).next() 下面一个标签
$("li").eq(1).nextAll() 下面所有
$("li").eq(1).nextUntil("结束位置") 中间的（不包括两边）

$("li").eq(2).prev() 上面一个
$("li").eq(2).prevAll() 上面所有
$("li").eq(2).prevUntil("结束位置") 中间的

$(".outer").parent() 父级内所有内容
$(".outer").parents() 一直向上找到最外层
$(".outer").parentsUntil("结束位置") 中间的

$(".outer").siblings() 除了自己内的其他所有

判断标签是否
$("div").hasClass("div1") 返回布尔值存在返回true 不存在返回false

++++++++++++ 创建对象
var $variable == jQuery 对象（加$符号表示为jQuery对象）
var variable == DOM 对象

$variable[0] 转为DOM对象
（$("img").html(); $("img")[0].innerHTML())

======-=--=-=-=====属性操作：
（自己定义的属性建议使用 attr，语言固有属性使用prop）
$("" ).attr("属性名","对应的内容") // 可以修改
$("").prop("") // prop后两个值为设定一个值为查找
找不到返回undefined
$("").removeAttr() 删除属性
$("").removeProp() 删除属性

$("").addClass(class:name) 添加class名字追加
$("").removeClass([:]) 删除classname

$("").html() 找到标签下所有内容包括标签
html("<h1>1111</h1>") 替换标签内所有内容浏览器会渲染
$("").text() 找到标签下文本内容
text("<h1>1111</h1>") 替换文本内容浏览器不会渲染

$("").val() 只针对固有属性是value的（表单标签input，select，option）

$("").css("color","red") 添加css样式
$("").css("":"","":"") 添加多个样式

============= 循环操作
拿到的标签都是数组
方式1
arr=[11,22,33]
$.each(arr,function(x,y){
console.log(x) // x为下标
console.log(y) // y为值
})
方式2
$("").each(function(){
$(this) // 当前遍历的标签
})

******** 创建标签
var $ele=$("<h1></h1>")

======== 添加内容删除内容
内部插入：
$("").append("<h1></h1>") 添加到标签下（父级添加子级）
$("添加的内容").appendTo(父级)

$("").prepend("添加的内容") 添加到标签上（父级添加子级）
$("内容").prepend("父级")

外部插入：
$("父级").after(内容) 同级插入下
$内容.insertAfter(父级)
$("").before() 同级插入到上面
$内容.insertBefore(父级)

替换：
$("原标签").replaceWith(新标签)

删除与清空：
$("").empty() // 标签内容清空
$("").remove() // 连同标签内容全部删除

复制：
$(".c1").clone() // 返回对象

======== 偏移量
相对于视口：
$("").offset().top 距离上面
$("").offset().left

相对于已经定位的父标签的偏移量：
$("").position().top 距离已定位的父级上面
$("").position().left

滚动条：
监听屏幕(只要滑轮动就会执行)
window.οnscrοll=function(){
$(window).scrollTop() 距body的位置不加参数为当前的位置
上下调节
}
$("").scorllLeft() 左右调节

大小：
$("").height() 盒子高度不包括内外边距
$("").width() 宽度

$("").innerHeight() 包括padding 内边距
$("").outerHeight() 包括边框
$("").outerHeight(true) 包括margin 外边距

********* 事件绑定
简写：
$("button").click(function(){ //点击事件
//写入点击事件
})
完整：
$("botton").bind("click",function(){

})
简写：
$("botton").click(function() {

})
取消绑定：
$("").unbind("click")

动态绑定事件：事件委托
$("ul").on("click","li",function() {

})

========== 动画事件（事件后都可以添加后调函数callback(完成后执行的函数))
显示隐藏：加参数为时间（毫秒）
$("").show(1000) 显示
$("").hide() 隐藏
$("").toggle() 来回切换

滑动：
$("").slideDown(1000) 出现
$("").slideUp() 隐藏
$("").slideToggle() 来回切换

淡入淡出：
$("").fadeIn(1000) 显示
$("").fadeOut() 隐藏
$("").fadeTO(1000,0.4) 显示到设定的值

=============扩展方法
自定义方法：
$.extend(object) // 添加一个静态方法
$.fn.extend(object) // 为jQuery实例添加方法

$.extend({
名字:function(){
// 要完成的事件
}
})
调用 $.名字();

$.fn.extend({
名字:function(){ //获得对象为JS对象
$(this)// 要完成的事件
}
})

调用 $("p").名字();