• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

目录操作样式操作位置操作文本值操作属性操作文档处理事件操作常见事件克隆案例挂起事件hover () listen输入输入值事件阻止后续事件事件委托动画效果引导框架布局容器网格系统表格样式表单样式按钮图片组件JS效果

标签操作

样式操作

class属性操作

JQuery语法

相当于DOM

形容

addClass()

classList.add()

添加类属性值

removeClass()

classList.remove()

移除类属性值

hasClass()

classList.contains()

查询是否有类属性值

toggleClass()

classList.toggle()

如果已有属性值,则删除它;如果没有这样的属性值,那么添加;

css操作

jQuery中操作css样式的语法更简单。

标签。css (attribute,value)//相当于DOM: tag对象中的。风格。属性=值

例如,将第一个P标签的颜色设置为红色。

$('p:first ')。css('颜色','红色')

//等效于DOM:document . getelementsbytagname(' p ')[0]中的。style.color=' red '

位置操作

方法

形容

scrollTop()

获取匹配元素距滚动条顶部的偏移量。

scrollLeft()

获取匹配元素距滚动条左侧的偏移量。

位置()

获取匹配元素相对于父元素的偏移量。

偏移量()

获取当前窗口中匹配元素的相对偏移量或设置元素位置。

常用操作

$(窗口)。scrollTop() //获取滚动条从顶部的偏移量

从顶部实时监控距离:

$(窗口)。scroll(function () {

if($(窗口)。scrollTop() 600){

Alert('已经600多了,受不了了')

}

})

文本值操作

JQuery语法

形容

相当于DOM

文本()

仅获取文本

内部文本

html()

获取文本和标签

innerHTML

瓦尔()

获取标签的值。

价值

如果你没有在括号里写一个值,你就得到它;如果一个值写在括号里,它就是一个设置。

属性操作

h>方法 描述 attr(属性名) 返回第一个匹配元素的属性值 attr(属性名, 属性值) 为所有匹配元素设置一个属性值 attr({属性1: 值1, 属性2:值2}) 为所有匹配元素设置多个属性值 removeAttr(属性名) 从每一个匹配的元素中删除一个属性 prop(属性名) 动态返回第一个匹配元素的布尔值 prop(属性名,属性值) 动态为所有匹配元素设置一个属性值

attr在对一些动态属性时,不建议使用,比如单选框、复选框,网页选择更改时,attr获取的属性值并不会更改。

所以再对一些动态属性时,可以使用prop动态获取和设置。

文档处理

方法 描述
$(A).append(B) 把B追加到A内容的末尾
$(A).prepend(B) 把B放在A内容的最前面
$(A).after(B) 让B跟在A后
$(A).before(B) 把B放到A的前面
$(A).empty() 清空A的内容
$(A).clone() 克隆A,参数为true会同时克隆事件

事件操作

常见事件

事件 描述
click() 单击事件
dbclick() 双击事件
hover() 鼠标指针悬停事件和鼠标指针离开事件
focus() 聚焦事件
blur() 失焦事件

绑定方式

// 第一种
$().click(function(){
    
})
// 第二种
$().on('click',function(){
    
})

克隆案例

<button id="d1">克隆按钮</button>
<script>
    $('#d1').click(function () {
    // $('body').append($(this).clone())  // 不克隆事件
    $('body').append($(this).clone(true))  // 克隆事件
})
</script>

悬浮事件hover()

hover()有两次触发条件:鼠标悬浮和鼠标移开,如果要使这两个事件有不同操作,需要写两个函数。

$('p').hover(
    function () {  // 悬浮触发
        this.style.color = 'red'
    },
    function () {  // 移走触发
        this.style.color = 'black'
    }
)

监听input输入值事件

<input type="text" id="i1">
<script>
    $('#i1').on('input',function () {
        console.log($(this).val())
    })
</script>

阻止后续事件

如果给已经有事件的标签绑定事件,那么会依次执行;比如form表单中的重置按钮已经有了一个重置的事件。

如果想要取消后续事件的执行,可以使用两种方式阻止:

方式一:函数返回false

$('#d1').click(function () {
    alert(123)
    return false  //  取消当前标签对象后续事件的执行
})

方式二:使用特殊方法

$('#d1').click(function (e) {
    alert(123)
    e.preventDefault()
})

事件冒泡概念

在多个标签嵌套的并且都有相同事件的情况下,会出现逐级汇报的现象,称为事件冒泡。

事件委托

针对动态创建的标签,提前写好的事件默认是无法生效的。比如我先给所有p标签设置了单击事件,打开网页后添加的p标签都是没有单击事件的。

这时候就需要用到事件委托:把一个标签里的一个事件都委托给子标签。

// 将body内所有的点击事件交给p标签处理
$('body').on('click', 'p', function (){
    $(this).css('color','red')
})

动画效果

动画(speed单位毫秒) 描述
hide(speed) 以左上角为终点消失
show(speed) 以左上角为起点出现
slideUp(speed) 以顶部为终点收起
slideDown(speed) 以顶部为起点展开
fadeIn(speed) 淡入
fadeOut(speed) 淡出
animate() 自定义动画

自定义动画实现点赞效果:

点赞动画示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

bootstrap框架

bootstrap框架内部提供了很多好看的标签样式和功能,我们只需要在编写时给标签加上class属性值就可以使用样式了。

在使用bootstrap框架之前,需要导入css、js,如果要使用动态效果还需要jQuery。

详情:全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

布局容器

class值 作用
container 固定宽度并在页面居中,两边留有空白
container-fluid 宽度占满页面

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

class值 作用
row 默认开设一行均分12份
col-md-1 占一行的1/12
col-md-2 占一行的2/12
... ...
col-md-12 占一行的12/12
偏移量
col-md-offset-1 向右偏移1/12
col-md-offset-2 向右偏移2/12
... ..
col-md-offset-12 向右偏移12/12
其他设备
col-xs- 超小屏幕 手机 (<768px)
col-sm- 小屏幕 平板 (≥768px)
col-md- 中等屏幕 桌面显示器 (≥992px)
col-lg- 大屏幕 大桌面显示器 (≥1200px)

表格样式

链接:表格样式官网说明

class值 作用
table 美化表格
table-hover 每一行对鼠标悬停状态作出响应
table-striped 每一行增加斑马条纹样式
table-bordered 为表格和其中的每个单元格增加边框
table-condensed 表格更加紧凑
状态类 通过这些状态类可以为行或单元格设置颜色
active 鼠标悬停在行或单元格上时所设置的颜色
success 标识成功或积极的动作(浅绿)
info 标识普通的提示信息或动作(浅蓝)
warning 标识警告或需要用户注意(淡黄)
danger 标识危险或潜在的带来负面影响的动作(淡红)

表单样式

链接:表单样式官网说明

class值 作用
form-control 设置宽度为100%并美化

按钮

链接:按钮详细说明

class值 作用
btn 按钮样式
颜色
btn-default 默认样式
btn-primary 蓝色(首选项)
btn-success 绿色(成功)
btn-info 浅蓝(一般信息)
btn-warning 黄色(警告)
btn-danger 红色(危险)
尺寸
btn-lg 大按钮
btn-sm 小按钮
btn-xs 超小尺寸
btn-block 拉伸至父元素100%的宽度,并变为了块级元素

图片

链接:图片详细说明

class值 作用
img-rounded 图片四个角变圆滑
img-circle 图片border-radius设为50%
img-thumbnail 图片有个边框

组件

链接:组件

更多图标:http://www.fontawesome.com.cn/

JS效果

链接:JS效果

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now