You辉编程

2023-09-02 13:55| 来源: 网络整理| 查看: 265

一、BootStrap篇

1.入手声明 -直接到其官网上下载并引入bootstrap即可使用，这里主要介绍该怎么用。 2.一、BootStrap 按钮 button -class="btn" -颜色：class=btn-default,btn-primary,.btn-success,btn-warning,btn-danger -大小：class=btn-lg,btn-sm,btn-block 示例代码：

按钮

3.BootStrap网格的使用 -需要在.container选择器里面使用，eg:class="col-md-*"来均分，总共有12个格子； -eg:class="col-md-3" 表示在12个格子中占了3份；示例代码：

我占了3个格子我占了6个格子我占了3个格子我占了3个格子我占了6个格子我占了3个格子

4.BootStrap面板的使用Panel -panel用户页面按块组合 class="panel" panel-heading panel-body panel-footer 颜色样式：panel-default,panel-primary,panel-success,panel-info,panel-waring等

示例代码：

我是标题我是内容区我是注脚

5.BootStrap表格Table -class="table" 加边框：table-bordered 鼠标移入效果：table-hover 单元样式：class=active,.success,.warning,.danger,.info

示例代码：

用户年龄住址张三 22 Kunming

6.BootStrap Form表单 -role="from" 加强语法 -class="form-horizontal" 水平排列 -class="form-group" 表示一组 -class="control-label" label标签的样式 -class="form-control" form表单的元素 -颜色：class=has-warning,has-error,has-success

示例代码：

用户名密码

7.BootStrap 分页Pagination -class=pagination,disbled,active(当前页码) 示例代码：

8.BootStrap 轮播Carousel -class="carousel slide" 可以滑动 -class="carousel-inner" 图片区域 -class="carousel-indicators" 点区域 -class="carousel-control" 左右滑动的按钮区域

-结合合jQuery $('.carousel').carousel({ interval:1000 //1秒轮播一次 })

示例代码：

$('.carousel').carousel({ interval:1000 //1秒轮播一次 })

.BootStrap模态框 Modal -class=modal,modal-dialog" 表示创建一个模态框，需要所在盒子是id -class=modal-content,modal-header,modal-body,modal-footer

示例代码：

× modal-title 这是内容区域关闭提交 function showModal(){ $('#myModal').modal(); } function hidModal(){ $('#myModal').modal('hide'); } 二、jquery篇

1.入手声明 -直接到其官网上下载并引入jquery即可使用，这里主要介绍该怎么用。

2.jQuery主要选择器 -$('#myID') ID选择器 -$('div') 元素选择器 -$('.classname') 类选择器 -$('.classname1,.classname2,#id1') 组合选择器

示例代码：

点我 function doClick(){ $('#myID').html('我是ID选择器'); }

3.jquery的过滤选择器 -$('li:first') 去li的第一个、$('li:even') 取li的偶数个 -$("a[href='start.html']") -$("a[href^='/jqury']") -for表单选择器 $(':input') $(':text')

示例代码：

js java python c++ go 点击获取 function doClick(){ alert($('li:first').html()); $.each($('li:even'),function(){ alert($(this).html()); }) }

4.jquery常用事件 -ready() 页面加载完成时执行这个函数 -click() 元素点击事件 -focus() 获取焦点事件 -blur() 失去焦点事件 -change() 内容修改事件

示例代码：

$(document).ready(function(){ alert('页面已经加载完成'); })

.jquery常用函数 -html() 获取html的内容包含标签 -html("值") 设置html的内容 -text() 获取文本内容不包含标签 -text("值") 设置文本内容 -val() 获取值 -val(value) 设置值 -attr() 获取属性值或设置属性 -css() style中设置样式

示例代码：

name: function doClick(){ alert($('#myForm').text()); }

5.jquery操作HTML元素 -remove() 删除元素 -empty() 清空元素 -append() 在被选元素的结尾插入元素内容 -prepend() 在被选元素的开头插入元素内容 -after() 在被选元素之后插入内容 -before() 在被选元素之前插入元素内容

示例代码：

l id="myUL"> js java python c++ go 点我删除 function doClick(){ $('#myUL').remove(); }

6.jquery的ajax请求 -ajax() 发起请求 -get() 发起get请求 -post() 发起post请求 -load() 从服务器加载数据，并把返回的数据放置到指定元素中

示例代码：

div id="myDIV" onclick="doClick()">hello 点我 function doClick(){ $.ajax({ url:'http://localhos:xxx/xxx', success:function(data){ console.log(data); } }) $.get('http://localhos:xxx/xxx',function(data,status){ console.log(data,status); }) $.post('http://localhos:xxx/xxx',function(data,status){ console.log(data,status); }) $.('#myDIV').load('http://localhos:xxx/xxx'); }

7.jquery动态效果 -addClass 添加样式 -removeClass 删除样式

示例代码：

style> .active{ background-color: blue; } 1 2 3 4 5 $('document').ready(function(){ let aArr = $('#myUL > ul >a'); console.log(aArr.length) aArr.click(function(){ $.each(aArr,function(){ $(this).remove('active'); }) $(this).addClass('active'); }) })

8.jQuery异步加载更多内容

1 2 3 4 5 加载更多 function handleClickMore(){ $('#more').load('http://xxxxx/xxxx') }

【本文地址】

You辉编程

You辉编程

今日新闻

推荐新闻