首页 > 其他分享 >前端JQuery

前端JQuery

时间：2022-12-07 22:23:54浏览次数：82  
标签：JQuery jQuery 样式 标签 前端 事件 div id

JQuery与DOM使用的不同区别

在声明一个jQuery对象变量的时候在变量名前面加上$:

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

JQuery和DOM对象的使用

$("#il").html();jQuery对象可以使用JQuery的方法
$("#il")[0].innerHTML;//DOM对象使用DOM的方法

JQuery基础语法

$(selector).action()

JQuery查找标签

1.基本选择器


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

2.组合选择器

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

3.层级选择器

$('div p') 查找div里面所有的
后代p标签
$('div>p') 查找div里面的儿子p标签
p标签
$('div+p') 查找div同级别下面

紧挨着的p标签
$('div~p') 查找div同级别下面所有的p标签

4.属性选择器

$('[username]')
查找含有username属性名的标签
$('[username = 'jason']') 
查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')

例子

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

5.基本筛选器

    :first //第一个
    :last // 最后一个
    :eq(index)//索引等于index的那个元素
    :even//匹配所有索引值为偶数的元素，从0开始计数
    :odd//匹配所有索引值为奇数的元素，从0开始计数
    :gt(index)// 匹配所有大于给定索引值的元素
    :lt(index)// 匹配所有小于给定索引值的元素
    :not(元素选择器)// 移除所有满足not条件的标签
    :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
   $('li:first')	优化               	$('li').first()

示例

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

6.表单筛选器

$(':text')
$(':password')
   
$(':checked')		checked与selected都会找到
$(':selected')		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();// 兄弟们

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

等价于$("div p")

$("div").find("p")

操作标签

1.class操作

获取标签的样式类列表

jQuery JS
addClass() classList.add()
removeClass() classList.remove()
hasClass() classList.contains()
toggleClass() classList.toggle()

2.位置操作

 $(window).scrollTop()

获取滚动条偏移量 还可以修改偏移量
image

3.文本操作

jQuery JS
text() innerText
html() innerHTML
val() value
jQuery对象[0].files files[0]

文档操作建议不要用jQuery。而是通过索引取出标签对象。

4.创建标签

document.createElement()  $('<a>')

标签不在页面上，在内存里，需要你动态添加到页面中：
image

5.属性操作

attr()/removeAttr()					 xxxAttribute()
attr针对动态变化的属性获取会失真
	prop('checked') prop('selected')

attr针对动态获取的属性会失真，比如修改单选框，无法及时正确反馈，用户是否已经勾选上了单选框。
image
prop可以判断动态变化的属性：
image

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的前面

7.清空标签

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

一个是连你也清掉 一个是你留着：
image

jQuery事件

事件绑定的两种方法

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

对于js的数组无法一键绑定事件：
image
jQuery可以数组批量挨个绑定事件：
查找button标签，得到一个列表，给列表所有的jQuery对象绑定click事件:
image

实时监听事件

示例：github登录文本框，没有点提交按钮，但是每次输入都会提示你的输入是否满足要求。
相当于：每次修改文本框内容都会发送请求。（跟针对HTML下拉框的文本域变化事件onchange有点像）
代码示例：
image
用表单筛选器:text查找到文本框，给input这个输入事件绑定一个函数。
哪个标签触发事件，this就是哪个标签对象，因为是标签对象，所以需要包一包$(this)（这个很容易忘）。
也可以用js代码实现：
image
注意:this是标签对象还是jq对象!

克隆事件 clone

示例：
image
每次点击按钮，在body中添加一个被克隆的button标签
请注意：clone是jq对象的方法 clone的对象都是假的（只有样子） 只有原先写button的具有click事件
如果想真正的克隆（具有事件）：
在clone里面添加true。
image

事件相关补充

1.取消后续事件

方式1

事件函数的最后return false即可'

有些标签本身含有功能，比如：
button submit 按下按钮会刷新页面
这时候再给这个标签绑定事件，谁会优先执行？
image
先执行click添加的事件 再执行按钮自己的提交事件
然而我们通常希望，只执行我们添加的事件，原来的事件被覆盖，不再执行,这就需要再时间绑定的匿名函数里加return false
image
可以取消后续事件 后续及时有自己绑定的更多事件也不执行了

方式2

事件函数都自带一个形参e:
preventdefault 取消默认（事件）
image

2.阻止事件冒泡

事件函数的最后return false即可

什么叫事件冒泡？以点击事件举例：
image
div > p > span 嵌套关系 这三个标签都绑定了点击事件。
思考一件事：
点了span是不是相当于点了p也点了div
标签会一层一层往上汇报（父标签有相同事件的情况下，会执行事件绑定的函数
image
）
取消冒泡只需要在每个事件的匿名函数中加：return false。即可以取消冒泡，有可以取消事件绑定，一箭双雕。

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

jQuery可以支持你在head写js代码:
image

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

4.事件委托(重要)

主要针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执

js\jQ动态加载的标签 默认是没有事件的 比如这个按钮：
image
所有需要事件委托，使用第二种JQ绑定事件的方法on(事件类型，选择器，匿名函数)：
将body里所有的点击事件委托给button（选择器）按钮
image
这样body内原生按钮、动态加载的按钮都会绑定事件

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])

卷轴效果：3000是时间单位毫秒
image
淡入淡出：0.4是透明度
image
点赞的动态效果：
image

Bootstrap页面框架

Bootstrap V3中文: https://v3.bootcss.com/
bootcdn: https://www.bootcdn.cn/twitter-bootstrap/
image

别人已经提前写好了一大堆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自动提示问题

使用cdn，pycharm不进行代码补全：
image
先下载一个本地Bootstrap的导入pycharm，加载一下，让pycharm熟悉一下。
image

bootstrap目录结构

下载的话文件目录有三个文件夹：

  1. css:只有这两个有用 其余用不到可以删掉
    image
  2. fonts:字体文件不要修改
  3. js: npms可删
    查看js代码文件可得知：
    image
    Bootstrap的js代码是基于jQuery的！

核心部分讲解

  1. 如果只想用bootstrap静态效果 只用导css
  2. 想用动态效果 需要导入jq和bootstrap-js代码文件
  3. bootstrap提前写好了很多样式 只要你写好了样式类名就可以直接用

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

布局容器

网页的左右两侧通常会进行留白处理，使网页看起来不太突兀。

class = "container"				有留白
class = "container-fluid"		 没有留白

留白和不留白的区别：
image

栅格系统（重要）

class = "row"					一行均分12份
	class = "col-md-8"			 划分一行的12份

留白之后还是可以调整网页布局
将布局容器继续精准划分区域 给div添加样式类row
image
这个div会均分成12份 （border 3px）
，image
在row里面在嵌套div，这些div可以通过样式类申明自己要用的'份数'，如上图两个div都要6份，对应下图的左右两个红色区域。
image
再要一行row（同级再创建一个div标签 使用样式类row）：
image
row里面写超过了12份会自动换行：
image
另外一种情况（多写了一份导致被迫换行）：
image

ps：col-md-13不存在 因为没写这样的样式类

屏幕参数 响应式布局

在电脑上设定好的布局，在手机显示很容发生变形，导致有内容无法显示出来。
是电脑的时候采取6:6布局 是手机的时候 采取红框中的2:10布局：
image
通过这种方式来适配 手机 电脑 平板 ，而适配都需要添加样式类的参数。
image

参数：col-md-6 col-xs-2 col-sm-3 col-lg-3

栅格偏移

有些时候我们只想用一部分栅格，并且需要调整栅格的位置
col-md-offset-3
只想用6份：
image
将这6份右移3份栅格的距离：
image

证明一个row是12份

在6份栅格里套一个row:
image
会基于这六份栅格，再进行12等分：
image

重要样式

1.表格样式

 table基本样式  table-hover悬浮样式  table-striped table-border表格边框样式
 disabled禁用
<table class="table table-hover table-striped table-border">
'text-center' 居中
颜色
 <tr class="success">

2.表单标签

添加表单样式forn-control
class = "form-control"

不能加form-control的标签：
image
修改颜色：
image

3.按钮组

btn-block按钮填充满整个区域
class = "btn btn-primary btn-block"

各种样式：
image
调大小：
image

组件

1.图标

bootstrap是给span标签加样式 变成图标 可以根据文本调色

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

更多图标的网站：https://fontawesome.com.cn/
这个网站的图标样式 不会与bootstrap冲突
image

2.导航条

写在最上面 且不要写在div c容器里面

class="navbar navbar-inverse" navbar-inverse反色导航条

想扩展导航条的功能 就找到相应的代码 多写一点
导航条固定 添加fixed定位！！

3.其他

  1. 分页
    image
  2. 巨幕
    搭建网站首页
    image
  3. 页头
    在巨幕上面加
  4. 缩略图
    image
    展示效果：
    image
    5.进度条
    动态效果的进度条
    堆叠效果的进度条
    后期可以通过js代码修改进度条的style属性以控制：
    image

Bootstrap JS插件

官方网站：https://v3.bootcss.com/javascript/

模态框

image
模态框是动态效果需要bootstrap 和jquery

轮播图

调整轮播图速度：应该在js代码里
添加图片只需添加标签：
image

标签：JQuery,jQuery,样式,标签,前端,事件,div,id
From： https://www.cnblogs.com/lvqingmei/p/16964729.html

相关文章

  • 事件 jQuery类库、Bootstrap页面框架
    目录jQuery查找标签基本选择器组合选择器层级选择器属性选择器基本筛选器表单筛选器筛选器方法链式的本质(jQuery一行代码走天下)操作标签class操作位置操作文本操作创建标......
  • jQuery和Bootstrap
    jQuery类库标签对象与jQuery对象jQuery查找标签操作标签jQuery事件jQuery动画效果Bootstarp页面框架组件jQuery类库'''基本'''1.兼容多浏览器......
  • 前端(完结)
    jQuery查找标签1.基本选择器 $('#d1') id选择器 $('.c1') class选择器 $('div') 标签选择器2.组合选择器 $('div#d1') 查找id是d1的div标签 $('span.c1') ......
  • jQuery 查找标签 事件 Bootstrap页面框架
    1.查找标签1.基本选择器: $('#d1'):id选择器 $('.c1'):class选择器 $('div'):标签选择器2.组合选择器: $('div#d1'):查找id为d1的div标签 $('div.c1'):查找c......
  • jQuery 查找标签 事件 Bootstrap页面框架
    jQuery查找标签基本筛选器 :first//第一个:last//最后一个:eq(index)//索引等于index的那个元素:even//匹配所有索引值为偶数的元素，从0开......
  • 前端开发：6、jQuery类库简介与基本使用
    jQuery类库目录jQuery类库一、简介二、jQuery查找对象1、选择器......
  • jQuery
    jQueryjQuery查找标签#基本选择器$("#id")#id选择器$("tagName")#标签选择器$(".className")#class选择器#组合选择器$("div.c1") #找到有c1class......
  • JQuery操作
    JQuery操作简介1.使用jQuery的好处1.加载速度更快2.选择器更多也更好用3.支持Ajax4.兼容更多浏览器5.代码量大大减少2.如何加载jQuery1.......
  • 关于JQuery validate表单校验插件对级联下拉框的校验问题
         今天在使用JQueryvalidate表单校验插件时，遇见了一个非常诡异的问题了。在此记录一下：     问题描述：               ......
  • web前端性能优化小结
                        web前端性能优化的14个技巧    平时接触的很多优化都是后台程序或数据库级别的，最近浏览了下《高性能网......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99