day49-JQuery

目录

• JQuery
  • JQuery对象
  • JQuery基础语法
  • 查找标签
    • 基本选择器
    • 层级选择器
    • 基本筛选器
    • 属性选择器
    • 表单筛选器
  • 筛选器方法
    • • 下一个元素
      • 上一个元素
      • 父亲元素
      • 儿子和兄弟元素
      • 查找
      • 筛选
      • 补充
  • 操作标签
    • 样式操作
      • 样式类
      • CSS
    • 位置操作
    • 尺寸
    • 文本操作
      • HTML代码
      • 文本值
      • 值
    • 属性操作
      • attr
      • prop
    • 文档处理
  • 事件
    • 绑定事件语法
    • 常用事件
    • 移除事件
    • 阻止后续事件执行
    • 阻止事件冒泡
    • 页面载入
    • 事件委托
• 菜单显隐

JQuery

轻量级的JS框架

可以下载使用，也可以使用网上的CDN（内容分发网络）

支持链式表达式，多个操作可以写在一行，更加简简洁

支持事件、样式、动画，简化了js操作css的代码

支持Ajax操作，简化了AJAX操作

跨浏览器兼容

JQuery对象

JQuery对象就是通过JQuery包装DOM对象产生的的对象，可以使用JQuery里的方法

JQuery基础语法

$(selector).action()

查找标签

基本选择器

1. id选择器

   $("#id")
   

2. 标签选择器

   $("tagName")
   

3. class选择器

   $(".className")
   

4. 配合使用

   $("div.c1")  //找到含有c1类的div标签
   

5. 所有元素选择器

   $("*")
   

6. 组合选择器

   $("#id, .className, tagName")
   

层级选择器

$("x y");  //后代
$("x > y")  //儿子
$("x + y")	//毗邻
$("x ~ y")	//弟弟

基本筛选器

:first			//第一个
:last			//最后一个
:eq(index)		//索引
:even			//所有索引值为偶数的元素，索引从0开始
:odd			//所有索引值为奇数的元素，索引从0开始
:gt(index)		//所有索引大于给定索引值的元素
:lt(index)		//所有索引小于给定索引值的元素
:not(元素选择器)	 //移除所有满足not条件的标签
:has(元素选择器)	 //后代有满足条件的标签的标签

$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

属性选择器

//tagName可选
tagName[attribute]
tagName[attribute = value]
tagName[attribute != value]

表单筛选器

:text      //找到所有的文本输入框（即用过type属性查找）
:password
:file
:radio
:checkbox

:submit
:reset
:button

表单对象属性：

:enabled
:disabled
:checked    //会找到checkbox和option
:selected   //只找到option

筛选器方法

下一个元素

$Ele.next()					//下一个标签
$Ele.nextAll()				//同级下面所有标签
$Ele.nextUntil(元素选择器)	 //同级下面所有,跳过指定条件的标签，继续新一轮的判断（即找到下一个$Eel再							  匹配）

上一个元素

$Ele.prev()					//上一个标签
$Ele.privAll()				//同级上面所有同种标签
$Ele.privUntil(元素选择器)	 //同级上面所有，跳过指定条件的标签，继续新一轮的判断（即找到下一个$Eel再							  匹配）

父亲元素

$Ele.parent()
$Ele.parents()
$Ele.parentsUntil()

儿子和兄弟元素

$Ele.children()
$Ele.siblings()

查找

$Ele.find()  //查找指定元素的指定后代，等价于$('div p')

筛选

$Ele.filter()  //用逗号隔开多个筛选条件

补充

.first()   //获取匹配结果的第一个元素
.last()	   //获取匹配结果的最后一个元素
.not()	   //从匹配结果中移除与指定表达式匹配的元素
.has()	   //去除不含有指定后代的元素
.eq()	   //按索引取出元素

操作标签

样式操作

样式类

.addClass();		// 添加指定的CSS类名。
.removeClass();		// 移除指定的CSS类名。
.hasClass();		// 判断样式存不存在
.toggleClass();		// 切换CSS类名，如果有就移除，如果没有就添加。

CSS

$Ele.css(attr,value)   //等价于 tag.style.color = value

位置操作

.offset()           // 获取匹配元素在当前窗口的相对偏移或设置元素位置
.position()			// 获取匹配元素相对父元素的偏移
.scrollTop()		// 获取匹配元素相对滚动条顶部的偏移
.scrollLeft()		// 获取匹配元素相对滚动条左侧的偏移

尺寸

height()		//内部文本高度
width()
innerHeight()	//上下内边距加上内部文本高度
innerWidth()
outerHeight()	//上下边框的距离
outerWidth()

文本操作

HTML代码

.html()			// 取得第一个匹配元素的html内容
.html(val)		// 设置所有匹配元素的html内容

文本值

text()			// 取得所有匹配元素的内容
text(val)		// 设置所有匹配元素的内容

值

val()					// 取得第一个匹配元素的当前值
val(val)				// 设置所有匹配元素的值
val([val1, val2])		// 设置多选的checkbox、多选select的值

属性操作

attr

//针对标签上有的能看到的显示属性和自定义属性使用，不要对checkbox和radio使用
attr(attrName)						// 返回第一个匹配元素的属性值
attr(attrName, attrValue)			// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})				// 为所有匹配元素设置多个属性值
removeAttr()						// 从每一个匹配的元素中删除一个属性

prop

//对于返回的布尔值的比如checkbox、radio和option是否被选中使用
prop() 					// 获取属性
removeProp() 			// 移除属性

文档处理

$(A).append(B)									// 把B追加到A
$(A).appendTo(B)								// 把A追加到B

$(A).prepend(B)									// 把B前置到A
$(A).prependTo(B)								// 把A前置到B

$(A).after(B)									// 把B放到A的后面
$(A).insertAfter(B)								// 把A放到B的后面

$(A).before(B)									// 把B放到A的前面
$(A).insertBefore(B)							// 把A放到B的前面

remove()										// 从DOM中删除所有匹配的元素。
empty()											// 删除匹配的元素集合中所有的子节点。

//克隆
//克隆默认不克隆标签的绑定的事件，给克隆添加参数clone(true)可克隆绑定事件
clone()						

事件

绑定事件语法

1. $Ele.eventName(function(){})
   

2. $Ele.on("eventName",function(){})   //推荐
   

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

<script>
    $('span').hover(
        function () {  // 鼠标悬浮上去的时候触发      如果 你只写了一个函数  那么悬浮和移开 只写同一个
            alert('老板你好 我是23号技师 很高兴为您服务')
        },
        // function () {  // 鼠标移开的时候触发
        //     alert('老板慢走 下次记得选我哟~~~ 23号 么么哒')
        // }
    )
</script>

移除事件

$Ele.off(eventName,$subEle,funcName)		//后两个参数可选

阻止后续事件执行

1. 给函数设置返回值

   return false
   

2. 在函数最后加

   e.preventDefault()
   

阻止事件冒泡

e.stopPropagation()

页面载入

//方式一
$(document).ready(function(){
// 在这里写你的JS代码...
})


//方式二，推荐使用，js的window.onload存在函数覆盖现象
$(function(){
// 你在这里写你的代码
})

事件委托

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

菜单显隐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>


<div id="ld">
    <div class="menu">
        <div class="title">菜单一</div>
        <div hidden>111</div>
        <div hidden>222</div>
        <div hidden>333</div>

    </div>
    <div class="menu">
        <div class="title">菜单二</div>
        <div hidden>444</div>
        <div hidden>555</div>
        <div hidden>666</div>

    </div>

    <div class="menu">
        <div class="title">菜单三</div>
        <div hidden>777</div>
        <div hidden>888</div>
        <div hidden>999</div>

    </div>
</div>




<style>
    .hide {
        display:none
    }
    #ld {
        float: left;
        width: 20%;
        background-color: rgba(155,155,155,0.3);

    }
    .menu {
        font-size: 32px;
        text-align: center;
        border: #ac2925 2px solid;
        width: 100%;
    }

    div div div {
        border: green 1px solid;
    }
</style>
<script>

    $('.title').click(function () {
        $(this).nextAll().attr("hidden",false).parent().siblings().children().nextAll().attr('hidden','hidden')
    })

</script>

</body>
</html>