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

一、jQuery查找标签

1.各种选择器

1.基本选择器

    $('#id')           id选择器

    $('.c1')           类(class)选择器

    $('tagName')       标签选择器

2.组合选择器

    $('div.c1')        查找有c1 class类的div标签

    $('div#d1')        查找id是d1的div标签

    $('div,span,p')		 查找div或者span或者p标签

 	$('#d1,.c1,span')	 查找id是d1的或者class含有c1的或者span标签

3.层级选择器

    $('div p')          查找div里面的所有的后代p标签

    $('div>p')          查找div里面的所有的儿子p标签

    $('div+p')          查找div里面的所有的毗邻p标签

    $('div~p')          查找div里面的所有的兄弟p标签

4.属性选择器

    $('[username]')     查找含有username属性名的标签

    $('input[username = 'jia']')     查找含有username属性名值等于jia的标签输入框

5.基本筛选器(了解)

    :first                 第一个

    :last                  最后一个

    :eq(index)             索引等于index那个值

    :even                  匹配所有索引值为偶数的元素(从0开始)

    :odd                   匹配所有索引值为奇数的元素(从0开始)

    :gt(index)             索引大于index那个值(从0开始)

    :lt(index)             索引小于index那个值(从0开始)

    :not(元素选择器)        移除所有满足not条件的标签

    :has(元素选择器)        选取所有包含一个或者多个标签之内的标签

2.表单筛选器

:text

:password

:file

:radio

:checkbox

:submit

:reset

:button

代码练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

</head>

<body>

    <form action="">

      <p>username:  <input type="text" class="c" disabled value="明天要学习jango啦"></p>

      <p>password:  <input type="password" class="c" value="明天要学习jango啦"></p>

      <p>data:  <input type="date" class="c"></p>

      <p>data1:  <input type="email" class="c"></p>

      <p>data2:  <input type="radio" class="c"></p>

      <p>data3:  <input type="checkbox" class="c"></p>

      <p>data4:  <input type="submit" class="c"></p>

      <p>data5:  <input type="reset" class="c"></p>

      <p>data6:  <input type="button" class="c"></p>

      <select name="" id="">

        <option value="">111</option>

        <option value="" selected>222</option>

        <option value="">333</option>

      </select>

    </form>

</body>

</html>

$(':text')

jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]

$(':radio')

jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]

$(':password')

jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]

$(':checked')

jQuery.fn.init(3) [input.c, input.c, option, prevObject: jQuery.fn.init(1)]

disabled:就是这个标签只能看不能进行点击，输入等操作

selected和checked的区别：

checked在寻找的时候把selected也包含在内，selected在寻找的时候只能找到它自己，如果不要找到:selected那可以在前面设置一下标签过滤掉:selected

3.筛选器方法

1.下一个元素

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")

2.上一个元素

$("#id").prev()

$("#id").prevAll()

$("#id").prevUntil("#i2")

3.父元素

$("#id").parent()

$("#id").parents()     //查找当前元素的所有的父辈元素

$("#id").parentUntil("#i2")   // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

4.儿子和兄弟元素

$("#id").children()

$("#id").siblings()

html:

<body>

   <span>span</span>

      <span>span</span>

      <div id="d1">div

          <p>div>p

              <a href="">div>p>a</a>

          </p>

          <span>div>span</span>

          <p>div>p

              <span id="d2">div>p>span</span>

          </p>

      </div>

      <span>span</span>

      <span>span</span>

</body>

let $pEle = $('#d1')

undefined

$pEle.next()

jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]

$pEle.parent()

jQuery.fn.init [body, prevObject: jQuery.fn.init(1)]

$pEle.children()

jQuery.fn.init(3) [p, span, p, prevObject: jQuery.fn.init(1)]

二、jQuery操作标签

1.操作类js与jQuery的区别

js：

classList.add()

classList.remove()

classList.contains()

classList.toggle()

jQuery:

addClass()         添加元素

removeClass()      移除某个类的属性

hasClass()          验证是否包含某个属性

toggleClass()        有删无添加

2.位置操作

offset()             获取匹配当前窗口元素的位置

position()           获取匹配元素相对父元素的偏移量

scrollTop()          获取匹配元素相对滚动条的偏移量

scrollLeft()         获取匹配元素相对滚动条左侧的偏移量

offset()方法允许我们检索一个元素相对于文档的当前位置，而position()是相对于父级元素的位移

3.文本操作

js:

innerText      操作文本

innerHTML      操作文件与标签

values

files[0]

jQuery:

text()          操作文本内容

html()          操作文本内容与标签

val()           获取匹配元素的值

val(val)        设置所有匹配元素的值

jQuery对象[0].files

4.创建标签

document.createElement()

jQuery:

    $('<a>')

5.jQuery获取标签

$('div').text()

'div\n          div>p   好好学习，努力提高\n              div>p>a\n          \n          div>span  以后可能会特别怀念现在这段时光\n          div>p\n              div>p>span  一群人并行，热血有梦想的青年\n          \n      '

$('div').html()

'div\n          <p>div&gt;p   好好学习，努力提高\n              <a href="">div&gt;p&gt;a</a>\n          </p>\n          <span>div&gt;span  以后可能会特别怀念现在这段时光</span>\n          <p>div&gt;p\n              <span id="d2">div&gt;p&gt;span  一群人并行，热血有梦想的青年</span>\n          </p>\n      '

6.属性操作

js版本

setAttribute()

getAttribute()

removeAttribute()

jQuery:

attr(name,value)   设置属性

removeAttr(name)    移除属性

7.文档处理

$(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()// 删除匹配的元素集合中所有的子节点。

三、事件

常用事件：

click(function () {})

hover(function () {})

blur(function () {})

fours(function () {})

change(function () {})

keyup(function () {})

js绑定事件：

标签对象.on事件名 = function(){

    事件代码

}

btnEle.onclick = function(){alert(123)}

jQuery绑定事件：

方式1：

jQuery对象.事件名 = function(){

    事件代码

}

$btnEle.onclick = function(){alert(123)}

方式2：

jQuery对象.on(事件名,function(){

    事件代码

})

$btnEle.on(click,function(){alert(123)})

四、克隆事件

默认情况下只会克隆它的标签，不会克隆它的点击事件，所以只能第一个点击进行克隆，而后面克隆出来的不能进行点击克隆。但是如果想要更完美的克隆就是原封不动的全部克隆出来，就在clone()的括号里设置true

<button style="border: 1px solid cornflowerblue">小布丁</button>

    <script>

      $('button').click(function () {

           $('body').append($(this).clone(true))

      })

</script>

五、事件相关补充

1.取消后续事件    事件函数的最后return false即可

2.阻止事件冒泡    事件函数的最后return false即可

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

$(function(){})                缩略写法

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

4.事件委托    主要针对动态创建的标签也可以使用绑定的事件    $('body').on('click','button',function(){})

将body内所有的单击事件委托给button标签执行

六、hover事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

      .c1{

        border: 2px solid black;

        background-color: coral;

      }

    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

</head>

<body>

<p>在我上面干嘛1</p>  <!--所有p标签都有下面鼠标悬浮上去或移走的提示-->

<p>在我上面干嘛2</p>

<p>在我上面干嘛3</p>

<script>

  $('p').hover(function (){

      alert('来了老弟')

  },

    function (){

        alert('慢走哦~')

    }

  )

</script>

</body>

</html>

七、jQuery动画效果

<style>

      div {

      position: relative;

      display: inline-block;

      border: 2px solid cornflowerblue;

      margin-left: 100px;

      border-radius: 15%;

    }

    div>i {

      display: inline-block;

      color: peru;

      position: absolute;

      right: -16px;

      top: -5px;

      opacity: 1;

    }

    </style>

</head>

<body>

   <div id="d1">觉得我棒的话，请给我点赞</div>

   <script>

     $("#d1").on("click",function () {

       var newI = document.createElement('i')

       newI.innerText="+10"

       $(this).append(newI)

       $(this).children('i').animate({

         opacity:0

       },100000)

     })

   </script>

</body>

// 基本

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页面框架

1.引入与应用

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>

2.核心部分讲解

使用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

3.重要样式

1.表格样式

	<table class="table table-hover table-striped">

	颜色

 	 <tr class="success">

2.表单标签

	class = "form-control"

3.按钮组

	class = "btn btn-primary btn-block"

4.组件

1.图标

	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

	https://fontawesome.com.cn/

2.导航条

	class="navbar navbar-inverse"

3.其他

巴特西

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

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

一、jQuery查找标签

1.各种选择器

2.表单筛选器

代码练习

disabled:就是这个标签只能看不能进行点击，输入等操作

3.筛选器方法

1.下一个元素

2.上一个元素

3.父元素

4.儿子和兄弟元素

二、jQuery操作标签

1.操作类js与jQuery的区别

2.位置操作

offset()方法允许我们检索一个元素相对于文档的当前位置，而position()是相对于父级元素的位移

3.文本操作

4.创建标签

5.jQuery获取标签

6.属性操作

7.文档处理

三、事件

四、克隆事件

五、事件相关补充

六、hover事件

七、jQuery动画效果

八、Bootstrap页面框架

1.引入与应用

2.核心部分讲解

3.重要样式

4.组件

最新文章

热门文章