jquery和bottstrap
jquery
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。同时,jQuery兼容各种主流浏览器 。
代码示例:
HTML代码:
<div id="main"〉<a href="#myModal" role="button" class="btn btn-info" data-toggle="modal">添加工具</a><!--点击添加工具按钮,弹出下面模态窗口--><button class="btn btn-info" type="button" id="del">选择</button><!--点击该选择按钮,按钮能变颜色--><form action="" method="post" id="listForm"><table class="table"><thead><tr><td><input type="hidden" name="id1" id="id1" value="此处输出id1"/></td></tr></thead><tbody><tr><td><input class="tool_id" type="checkbox" id="id2" name="id2" value="此处输出id2"></td></tr></tbody></table></form> </div> <!--模态窗口,弹出一个添加窗口--> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">添加工具</h3></div><div class="modal-body"><form class="form-horizontal" action="<?php echo site_url("tool/insert");?>" method="post" id="detailForm"><div class="control-group"><label class="control-label" for="link_name">工具分类:</label><div class="controls"><select name="type_id"><option name="" value="" ></option></select></div></div><div class="control-group"><label class="control-label" for="link_url">工具名称:</label><div class="controls"><input type="text" name="name" id="name" value="" size="80" placeholder="工具名称"/></div></div><div class="control-group"><label class="control-label" for="userfile">工具地址:</label><div class="controls"><input type="text" name="url" id="url" value="" size="80" placeholder="工具地址"/></div></div><div class="control-group"><label class="control-label" for="userfile">工具用户名:</label><div class="controls"><input type="text" name="user_name" id="user_name" value="" size="80" placeholder="工具用户名"/></div></div><div class="control-group"><label class="control-label" for="userfile">工具密码:</label><div class="controls"><input type="text" name="user_password" id="user_password" value="" size="80" placeholder="工具密码"/></div></div><div class="control-group"><div class="controls"><button class="btn btn-info" type="submit" name="submit" id="submit">保存</button></div></div></form></div> </div>
jquery代码:
<script type="text/javascript"><!--$(document).ready(function () {/*操作*/$('.id2').hide();//复选框隐藏var time = 0;$('#del').click(function () {//绑定选择/删除按钮if(time == 0){$(this).removeClass("btn btn-info");//通过移除id=del的class来隐藏按钮的颜色 $(this).addClass("btn btn-warning");//通过添加id=del的class来实现改变按钮颜色 $(this).text("删除");//改变按钮上的字 $(".id2").show();//复选框显示 time++;}else{var oldboy = '';//声明oldboy变量 $('input[name="id2"]:checked').each(function() {oldboy += ',' + $(this).val() ;//得到name为id2的所有选中的id });$.get('后台处理地址', {oldboy: oldboy}, function(data) {//将oldboy送到后台处理代码中,并得到返回数据data data = eval("(" + data + ")");//将通过json返回的数据data进行解析if(data == 1){alert('删除成功!');window.location.reload();//刷新页面 }});}});});//--> </script>
选择器:
id:$('#id') class:$('.class') 标签选择器: $('标签名称')
基本选择器
后代选择器:$('.outer p') 子代选择器:$('.outer>p') 多元素选择器:$('.outer,#d1')
组合选择器
$("[属性名='值']")
属性选择器
$("[type='text']") == $(':text')
表单选择器
$('ul li').eq() $('ul li').first() $('ul li').last() $("").hasclass('c1')
筛选器
向下查找兄弟标签: $().next() $().nextAll() $().nextUntil('.c1') 向上查找兄弟标签: $().prev() $().prevAll() $().prevUntil('.c1') 查找所有兄弟标签: $().sibilings() 查找子标签: 子代查找: $().children('')后代查找: $().find('')查找父级标签: $().parent() $().parentUntil('')
导航查找方法
文本操作: $().html() $().text() $().val()属性操作: DOM: ele.属性名=值 ele.setAttribute('属性名','值')jquery: $().attr('属性名') $().attr('属性名','值')class属性操作: $().addClass('c1') $().removeClass('c1')
属性操作
创建节点: $('<标签名>')父节点.append(子节点)子节点.appendTo(父节点)
节点操作
bootstrap
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
bootstrap v3 官网:
http://v3.bootcss.com
Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
Bootstrap 代码
Bootstrap 允许您以两种方式显示代码:
- 第一种是 <code> 标签。如果您想要内联显示代码,那么您应该使用 <code> 标签。
- 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。
请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: < 和 >。
让我们来看看下面的实例:
实例
<p><code><header></code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素,请使用 <pre> 标签:</p>
<pre><article><h1>Article Heading</h1></article>
</pre>
实例展示如下图:
转载于:https://www.cnblogs.com/hugoyao/p/7777551.html
jquery和bottstrap相关推荐
- Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常
我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...
- Jquery DIV滚动至浏览器顶部后固定不动代码
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 效果例1 代码如下复制代码 <scr ...
- jquery.raty评星插件
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
- jquery autocomplete demo
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择. jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquer ...
- 在Ant-design-pro框架中引入jQuery和jQuery-ui步骤
1.安装jQuery和jQuery-ui npm i jquery s npm i jquery-ui s yarn install 2.在vue.config.js中进行配置 // webpack ...
- 火狐浏览器允许ajax,解决火狐浏览器发送jquery的ajax请求无效的问题
今天遇到这样一个问题: 页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效. 代码大致如下: //前面省略 ..... 生成成绩 查询成绩 ...... ...... fun ...
- jquery 监听的案例
jQuery 简介 jQuery 是一个 JavaScript 库. jQuery 使用 可以下载一个,也可以使用Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuer ...
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- 利用 jquery 获取某个元素下的所有图片并改变其属性
HTML代码 <div id="mochu"> <p>内容....<./p> <p><img src="xxxx.p ...
最新文章
- arm7汇编中怎么使用c中的变量_MDK-ARM armasm汇编器——内建变量和常量.pdf
- R语言基于自定义函数构建xgboost模型并使用LIME解释器进行模型预测结果解释:基于训练数据以及模型构建LIME解释器解释多个iris数据样本的预测结果、使用LIME解释器进行模型预测结果解释
- 网站推广方法众多,对此你了解多少?
- 多媒体广告的底线在哪里
- 安装最新Spree出现error:spree_core requires will_paginate (= 3.0.pre2, runtime)
- 高性能key-value数据库
- 云服务器配置出现的问题 2
- c语言值传递 地址传递 引用传递参数,C++参数传递(值传递,引用传递)
- 1964年诞生的第一代电子计算机,世界第一台电子计算机诞生的年份是?
- django-urls.py路由分发
- 闲话WPF之十三(WPF中的资源)
- 编写一个Applet在屏幕上画一组同心圆
- fir.im Weekly - 2016 开年技术干货分享
- 数值分析matlab实验报告,数值分析第一次作业matlab实验报告.doc
- C#_自动化测试3_controll IE
- ETL设计详解(数据抽取、清洗与转换)
- 企业成本核算程序是怎样?一般采用什么方法
- 小学英语语法口诀巧记大全,简单实用!
- Java Lempel-Ziv
- 数据结构(2)时间复杂度——渐进时间复杂度、渐进上界、渐进下界
热门文章
- Git客户端(TortoiseGit)基本使用详解
- SPI及其工作原理浅析
- 为什么重复值高的字段不能建索引(比如性别字段等)
- java alsa 编程_搭建JavaWeb开发环境
- c语言删除文件中的数据_第20问:删除了数据文件,该往哪个方向逃跑
- 使用命令创建mysql_用命令创建MySQL数据库
- npm安装不上nodemon_node.js - NPM安装在nodemon@1.18.9后安装脚本处失败 - 堆栈内存溢出...
- Java数据结构和算法:HashMap,哈希表,哈希函数
- Java基础:基本数据类型包装类
- 数据库——高级匹配条件