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页面框架的更多相关文章

  1. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  2. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  3. javascript创建节点的事件绑定

    javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...

  4. JQuery查找标签

    JQuery查找标签 一.基本标签 1 id选择器: $("#id(名称)") $("#cent") 2 标签选择器: $("tabName(便签名称 ...

  5. 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件

    jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...

  6. DOM标签操作与事件与jQuery查找标签

    目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...

  7. jquery总结04-DOM节点操作

    一般js操作节点 ①创建节点(元素文本)document.createElement  innerHTML ②添加属性 setAttribute ③加入文档 appendChild 操作繁琐还有兼容性 ...

  8. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  9. jQuery文本框(input textare)事件绑定方法教程

    jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...

  10. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

随机推荐

  1. 《ASP.NET Core技术内幕与项目实战》精简集-目录

    本系列是杨中科2022年最新作品<ASP.NET Core技术内幕与项目实战>及B站配套视频(强插点赞)的精简集,是一个读书笔记.总结和提炼了主要知识点,遵守代码优先原则,以利于快速复习和 ...

  2. 又拍云之 Keepalived 高可用部署

    在聊 Keepalived 之前,我们需要先简单了解一下 VRRP.VRRP(Virtual Router Redundancy Protocol)即虚拟路由冗余协议,是专门为了解决静态路由的高可用而 ...

  3. Swagger的介绍

    一.Swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 二.Swagger 的优势? 支持 API 自动生成同步的在线 ...

  4. 修改api-server支持的NodePort端口映射范围

    创建svc资源报错显示:provided port is not in the valid range. The range of valid ports is 30000-32767 k8s集群默认 ...

  5. 2022春每日一题：Day 41

    题目:I Hate It 一个基础的线段树模板,单点修改+区间查询 代码: #include <cstdio> #include <cstdlib> #include < ...

  6. C++一个吃豆人小游戏

    C++一个吃豆人小游戏 代码如下 #include <cstdio>#include <iostream>#include <ctime>#include < ...

  7. java - - spring：定时任务

    转载:https://www.cnblogs.com/lishupeng/p/7680644.html 开启定时任务: <beans xmlns="http://www.springf ...

  8. 移除元素-LeetCode27 双指针

    力扣链接:https://leetcode.cn/problems/remove-element/ 题目 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返 ...

  9. 【SQL基础】【记住重命名】高级查询：聚合函数（四舍五入）、分组过滤、排序、

    〇.概述 1.功能概述 高级查询:聚合函数(四舍五入).分组过滤.排序. 2.建表语句 drop table if exists user_profile; CREATE TABLE `user_pr ...

  10. 【CDH数仓】Day02：业务数仓搭建、Kerberos安全认证+Sentry权限管理、集群性能测试及资源管理、邮件报警、数据备份、节点添加删除、CDH的卸载

    五.业务数仓搭建 1.业务数据生成 建库建表gmall 需求:生成日期2019年2月10日数据.订单1000个.用户200个.商品sku300个.删除原始数据. CALL init_data('201 ...