jQure和bootstrap框架

目录

内容概要

  • jQuery查找标签
  • jQuery节点操作
  • jQuery事件绑定
  • Bootstrap页面框架

jQuery查找标签

  1. 基本选择器

    $('#id') id选择器
$('.c1') 类选择器
$('div') 标签选择器

  2. 组合选择器

    $('div#d1')   有id为d1的div
$('span.c1')  有样式类名有c1的是span标签
$('div, span, p') 标签名为 div的标签或 span标签 或 p 标签
$('#d1,.c1,span') 标签id为 d1的标签 或者 样式类名有c1的标签 或 span标签

  3. 层级标签

    $('div p')  div标签下的所有 p标签
$('div>p')  查找div的子标签的p标签
$('div+p')  查找找div的毗邻标签
$('div~p')  查找div的弟弟标签

  4. 属性标签

    $('[username]') 查找含有username属性标签
$('[username]="jason"') 查找username=jason属性标签
$('input[username]="jason"') 查找input标签中username=jason 的标签

  5. 基本筛选器

    <span>span1</span>
<span>span2</span>
<div>div
    <p> div>p
        div>p>h1
    <h1>嘿嘿</h1>
    </p>
    <p>
        div>p
    </p>
</div>
<span>span3</span>
<span>span4</span>




:first  // 第一个
$('div p:first')
let $a = $('div p')
$a.first()


    :last  最后一个
let $a = $('div p')
$a.last()


    





:has(元素选择器) 选取所有包含一个或多个标签再其内的标签(指的是从后代元素找)

    ul>li{$$$}*8
<div>
    <ul>
        <ul>
        <li>001</li>
        <li class="d1">002</li>
        <li>003</li>
        <li>004</li>
        <li class="d1">005</li>
        <li class="d1">006</li>
        <li class="d1">007</li>
        <li>008</li>
    </ul>
    </ul>
</div>

    :eq(index)    索引取那个元素


    :even         匹配所有索引值为偶数的元素


    :odd          匹配索引为偶数的奇数的元素


    :gt(index)      匹配索引值大于index的元素


    :lt(index)     匹配所有小于index的元素


    :not(元素选择器) 移除所有满足not条件的标签
$('li:not(.d1)') 找样式类名不是d1的li标签


    :has(元素选择器)  选取所有包含一个或多个标签再其中的标签(指的是从后代元素找)
    
$('ul:has(.d1)')
找后代的样式类名有 d1的ul标签

  6. 表单选择器

    $(':text')


    $(':password')
$(':ridro')
$(':checked')
$(':selected')

    :checked 不仅会把checked查询出来也会把selected查询出来 这可以算是一个小bug

    而selected 只会把自己查询出来

  7. 筛选器的方法

     $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")
	 $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们

  8. 操作标签

    1.class操作
	 addClass()							classList.add()
    removeClass() 						classList.remove()
    hasClass() 							classList.contains()
    toggleClass()						classList.toggle()
2.位置操作
	 $(window).scrollTop()
3.文本操作
	 text()					innerText
 	 html()					innerHTML
  	 val()					value
    jQuery对象[0].files	  files[0]
4.创建标签
	document.createElement()  $('<a>')
5.属性操作
	attr()/removeAttr()					 xxxAttribute()
	attr针对动态变化的属性获取会失真
 		prop('checked') prop('selected')
6.文档处理
	$(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()// 删除匹配的元素集合中所有的子节点。

jQuery事件

JS绑定事件
标签.on事件名=function(){}
jQuery绑定事件
jQuery对象.事件名(function(){})
方式二
jQuery对象.on('事件名称',function(){})
ps:默认就用方式1 不行就用方式2
ps:补充
    clone属性
    clone(true)  默认不克隆事件 加true就可以

<button>点击</button>

<script>
    $('button').click(function (){
        alert('和嘿嘿')
    })

</script>


<button>点击</button>

<script>
    // $('button').click(function (){
    //     alert('和嘿嘿')
    // })

    $('button').on('click',function () {
        prompt('芜湖起飞')
    })

</script>



一次性绑定多个事件

<body>
<button>点我</button>
<button>点我</button>
<button>点我</button>
<button>点我</button>
<button>点我</button>

<script>
    // JS写法
    // let buttonList = document.getElementsByTagName('button')
    // for(let i in buttonList){
    //             buttonList[i].onclick = function (){
    //     alert('呵呵呵')
    // }
    // }
    // jQuery 写法
    $('button').click(function (){
        alert('呵呵呵')
    })


</script>

实时检测

<input type="text">

<script>
    $('input').on('input',function (){
        console.log(this.value)
        console.log($(this).val())
    })

</script>
这个时候只能用 .on了 直接写事件名就绑定不上了


<a href="#" id="d1">点我</a>
<br>
<br>
<br>
<br>
<a href="#" id="d2">点他</a>
<script>

    // $("#d1").hover(function(){
    //     alert('我是d1')
    // $(this).stop(true,true).animate({width:'150px'},800);
    // },function(){
    // $(this).stop(true,true).animate({width:'100px'},800);
    // });
    //
    // $('#d2').hover(function (){
    //     alert('我是d2')
    //      $(this).stop(true,true).animate({width:'150px'},800);
    // },function(){
    // $(this).stop(true,true).animate({width:'100px'},800);
    // });

        $("#d1").hover(function(){
        alert('我是d1')
    $(this).stop(true,true);
    },function(){
    $(this).stop(true,true);
    });

    $('#d2').hover(function (){
        alert('我是d2')
         $(this).stop(true,true);
    },function(){
    $(this).stop(true,true);
    });
</script>

其实hover事件是可以写两个函数一个鼠标放上去触发一次，鼠标移开又一次
当你写一个函数的时候两次都执行那一个函数 当你用逗号隔开那么那鼠标离开
就执行那你写的第二个函数
https://blog.csdn.net/wkj001/article/details/100578923

克隆事件

<button>点击有惊喜</button>

<script>
    $('button').click(function (){
        $('body').append($(this).clone())
    })


</script>

这样克隆出来的 是没有主 的功能的

<button>点击有惊喜</button>

<script>
    $('button').click(function (){
        $('body').append($(this).clone(true))
    })


</script>

事件相关补充

  1. 取消后续事件

    事件函数的最后 return false即可

    <form action="">
 <p>
     username:
     <input type="text">
 </p>
 <input type="submit"> </input>
</form>
 <script>
     $(':submit').click(function (){
         alert('嘿嘿嘿')
     })
 </script>


    """
正常是先执行你添加的事件再执行自己默认的事件
"""

    <form action="">
 <p>
     username:
     <input type="text">
 </p>
 <input type="submit"> </input>
</form>
 <script>
     $(':submit').click(function (){
         alert('嘿嘿嘿')
         return false
     })
 </script>


    """添加个 
return false 就可以不让它执行自己默认的
"""

  2. 阻止事件冒泡

    事件函数的最后return false即可

    <div>div
    <p> div>p<span>div>p>span</span></p>
    <script>
        $('div').click(function (){
            alert('我是div')
        })
        $('p').click(function (){
            alert('我是 p')
        })
        $('span').click(function (){
            alert('我是span')
        })
    </script>

</div>


    <div>div
    <p> div>p<span>div>p>span</span></p>
    <script>
        $('div').click(function (){
            alert('我是div')
        })
        $('p').click(function (){
            alert('我是 p')
            return false
        })
        $('span').click(function (){
            alert('我是span')
            return false
        })
    </script>

</div>

  3. 等待页面加载完毕再执行代码

    $(function(){})            缩写
$(document).redy(function(){})  完整写法

  4. 事件委托

    主要针对动态创建的标签也可以使用绑定的事件

    $('body').on('click','button',function(){})

    将body内所有点击事件委托给button标签事件

    

<button >点击</button>
<script>
    $('body').on('click', 'button', function (){
        alert('呵呵呵')
    })

</script>   

let bEle = ('<button>')
$bEle.text('点他')
$(body).append($bEle)

    这写动态加载的button也可以拥有这个事件

    body内单击button的事件都是这个

jQuery动画效果(了解)

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

Bootstrap页面框架

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能

版本有很多 使用V3即可

文件结构
	bootstrap.css
 	bootstrap.js
	ps:js部分是需要依赖于jQuery
  
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

pycharm自动提示问题
	最好本地导入几次

核心部分讲解

使用bootstrap其实只需要操作标签的样式类即可

布局容器
	class = "container"				有留白
 	class = "container-fluid"		 没有留白
栅格系统
	class = "row"					一行均分12份
		class = "col-md-8"			 划分一行的12份
屏幕参数
	col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
	col-md-offset-3

重要样式

1.表格样式
	<table class="table table-hover table-striped">
	颜色
 	 <tr class="success">
2.表单标签
	class = "form-control"
3.按钮组
	class = "btn btn-primary btn-block"

组件

1.图标
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
	https://fontawesome.com.cn/
2.导航条
	class="navbar navbar-inverse"
3.其他
posted @ 2022-12-07 22:25  可否  阅读(39)  评论(0)    收藏  举报