jQuery
关注
分享
扫一扫
Annaluo
终于想明白了自己想要什么了，加油呀~ NLPer 冲~
展开
-
jQuery事件
鼠标焦点和失去焦点 $(document).ready(function(){ $("input").focus(function(){ //当鼠标聚焦在input的时候，背景颜色变为红色 $(this).css("background-color","red"); }); $("input").blur(func原创 2017-03-13 20:05:32 · 475 阅读 · 0 评论 -
jquery-parent(),parents()与closest()的区别
parent()获得集合中每个匹配元素的父级元素，从指定类型的直接父节点开始查找，返回一个元素节点。parents()获得集合中每个匹配元素的祖先元素，与parent（）的区别在于，当它找到第一个父节点时并没有停止查找，而是继续查找，最后返回多个父节点。closest()从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。是从包含自身的节点找起，它同p原创 2017-09-21 09:37:31 · 1478 阅读 · 0 评论 -
jquery-纯jQuery制作网站超链接和图片提示效果
超链接和图片提示效果 提示1提示2自带提示1 自带提示2 $(function () { var x = 10; var y = 20; $("a.tooltip").mouseover(function (e) { //当鼠标滑入时，给对象添加一个新属性，并把title的值原创 2017-09-21 10:46:46 · 817 阅读 · 0 评论 -
jQuery-事件绑定
事件绑定 .content{ display: none; } 什么是jQuery？ jQuery是一个快速、简洁的JavaScript框架， 是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。原创 2017-09-21 14:29:17 · 395 阅读 · 0 评论 -
jQuery-输入框大小变大变小（动画）
输入框放大缩小 big small 多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框 多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框 多原创 2017-10-10 09:47:30 · 2916 阅读 · 0 评论 -
如何让body背景图自适应浏览器窗口大小
这两天真的被背景图问题弄的头大，一会是浏览器窗口大小改变，背景图就重复，或者是浏览器有滚动条，或者加上no-repeat之后，重复的部分就变成空白！！！真的是一个头，两个大！！！！！现在终于找到解决方法了，不仅不重复，还没有滚动条，简直整个人都解放了，哈哈哈！下面附上代码，其实是特别简单的问题，但某些时候，我们就是会被一些很小的问题困扰很久......html{原创 2017-10-19 09:19:31 · 34382 阅读 · 14 评论 -
jQuery-ajax之load（）方法
jQuery对ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第二层是load()、$.get()、$post()方法，第三层是$.getScript()和$.getJSON()方法。其中第二层的方法使用频率很高。load()方法能载入远程HTML代码并插入DOM中，结构为：load( url [,data] [.callback])d原创 2017-10-10 16:43:24 · 772 阅读 · 0 评论 -
jQuery-第一个ajax列子
前提：电脑上已经安装了AppServ代码如下：第一个页面，只写HTML代码： 第一个ajax zhangsan: soft 李四: 板凳 王五: 地板第二个页面，写jQuery代码 test已有评论： $(funct原创 2017-10-11 08:37:34 · 524 阅读 · 0 评论 -
jQuery-第一个简单json传值测试
说明：由于是第一个小例子，所以在命名和规范方面多有缺陷，请谅解。HTML代码如下：json传值测试 $(function(){ $("#test").click (function(){ $.getJSON('tablejsontest.json',function(data){ $('#name').empty();原创 2017-12-11 16:57:38 · 549 阅读 · 0 评论 -
jQuery-用ajax方法代替$.getscript()方法
.getscript()方法的代码如下： * { margin:0; padding:0;}body { font-size:12px;}.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}.comment h6 { font-weight:700; font-size:原创 2017-12-11 17:22:48 · 1356 阅读 · 0 评论 -
jQuery-用jquery中的ajax()代替传统的json传值
json传值测试td{ background:#066;} test /* 传统的json传值 $(function(){ $("#test").click (function(){ $.getJSON('tablejsontest.json',function(data){ $('#name').em原创 2017-12-12 09:07:40 · 424 阅读 · 0 评论 -
用jQuery实现简单的tab切换
CSS代码如下：/*tab效果*/#outer { width:750px;}ul{ list-style-type: none;}#tab { overflow:hidden; zoom:1; background:#c4ebfa; /*border:1px solid #000;*/}#tab li { float:le原创 2017-12-04 11:33:07 · 1006 阅读 · 0 评论 -
用jQuery的tab实现简单仿微博网页
页面效果大致如下：首页效果：“收藏夹”页面如下：点击收藏夹页面中的“模块二”效果：“关注”页面：“粉丝”页面：大致页面轮廓就是这样，后期细节还有待加强，代码如下：HTML代码： 个人中心原创 2017-12-18 15:03:44 · 1709 阅读 · 2 评论 -
jquery-属性操作
属性操作 你最喜欢的水果是？ 苹果 橘子 菠萝 /*//获取属性和设置属性 var $para = $("p"); //获取p节点 var p_txt = $para.attr("title"); //获取P元素节点属性title /!*$("p").attr("title","your title");原创 2017-09-21 09:03:08 · 517 阅读 · 0 评论 -
jQuery-创建、删除、复制、替换、包裹节点
创建删除复制替换包裹节点 你最喜欢的水果是？ 苹果 橘子 菠萝 $("html"); //$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回 //首先创建两个Li 元素 var $li_1 = $(""); //创建第一个li元素 var $li_2原创 2017-09-20 15:14:06 · 839 阅读 · 0 评论 -
jquery-表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤，列如选择被选中的下拉框，多选框等元素。简单代码示例： 表单对象属性过滤选择器 可用元素： 不可用元素： 可用元素： 不可用元素： 多选框： test1 test2 test3 test4 test5原创 2017-09-20 11:18:32 · 675 阅读 · 0 评论 -
jquery效果
隐藏和显示效果hide（）和show（）方法$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); //在括号中加入数字则可以设置隐藏的时间，比如$("p").hide(1000)表示1000纳秒才隐藏完 }); $("#show").click(f原创 2017-03-13 20:31:42 · 321 阅读 · 0 评论 -
初见bootstrap，iframe框架简单布局
初见bootstrap，比hui框架好用很多，现在还在探索阶段。iframe框架布局，还有很多地方需要改进。很多内容还来不及写，后期慢慢补上。浏览器运行效果大概如下：index页面代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8...原创 2017-08-17 19:13:29 · 24583 阅读 · 0 评论 -
传统JS中的window.onload方法和jQuery中的$(document).ready()方法的区别
Window.onload执行时机：必须等待网页中所有的内容加载完毕后（包括图片）才能执行。编写个数：不能同时编写多个，比如以下代码无法正确执行：window.onload = function(){alert ("test1");};window.onload = function(){alert ("test2);};改代码结果只会输出test2.原创 2017-09-14 16:27:52 · 445 阅读 · 0 评论 -
jQuery对象和DOM对象的区别
jQuery对象中无法使用DOM对象的任何方法，反之亦然。用#id作为选择符取得的是jQuery对象而并非document.getElementById("id")所得到的DOM对象，两者并不等价。jQuery对象转成DOM对象jQuery对象不能使用DOM中的方法，但如果对jQuery对象说提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时原创 2017-09-14 17:32:00 · 340 阅读 · 0 评论 -
jQuery-在网站上注册新账号时，“同意并接受”效果的实现
大家都知道，当我们在一个新的网站或者应用上注册账号时，必须先要同意它们的规章制度，才可以进行下一步操作，下面我们就分别用DOM对象和jQuery对象来简单实现以下。效果描述：当鼠标点击文字前面的复选框时，会有一个alert警告框弹出，当点击警告框的缺点按钮之后，复选框会呈现选中的状态。图一：点击复选框时图二：点击确定按钮之后具体代码如原创 2017-09-15 08:44:09 · 1563 阅读 · 0 评论 -
jQuery-基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id，class和标签名等来查找DOM元素。在网页中，每个ID名称只能使用一次，class允许重复使用。效果描述：一个简单的HTML示例，通过基本选择器来匹配刚才HTML代码中的,等元素并进行操作（改背景色）代码如下： 基本选择器原创 2017-09-15 11:20:34 · 406 阅读 · 0 评论 -
jQuery-层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。效果描述：具体代码如下： 基本选择器 div,span,p { width: 140px; height: 140px;原创 2017-09-15 12:11:42 · 361 阅读 · 0 评论 -
jQuery-基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（:）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤器、内容过滤器、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。基本一些实例如下所示： 基本过滤选择器 div,span,p {原创 2017-09-19 15:14:32 · 872 阅读 · 0 评论 -
jquery-内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。 内容过滤选择器 div,span,p { width: 140px; height: 140px; margin: 5px; background: #aaa;原创 2017-09-19 15:30:14 · 484 阅读 · 0 评论 -
jquery-可见性和属性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。在可见性选择器中，需要注意选择器：hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏域（）和Visibility:hidden之类的元素。属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。代码示例： 可见性和属性滤选择器原创 2017-09-19 16:12:21 · 773 阅读 · 0 评论 -
jQuery-基本过滤选择器和子元素过滤选择器某些相似选择器的区别
基本过滤选择器, ：eq(index) 选索引等于index的元素 （index从0开始） ，返回单个元素子元素过滤选择器, ：nth-child (index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素（index从1开始），返回集合元素区别 ：eq(index)只匹配一个元素，而：nth-child将为每个父元素匹配子元素，并且：原创 2017-09-20 10:12:15 · 784 阅读 · 0 评论 -
jQuery-子元素过滤选择器
子元素过滤选择器的过滤规则相对于其它的选择器稍微有点复杂，但只要将元素父元素和子元素区分清楚，那么使用起来也非常简单，另外还有注意它与普通过滤选择器的区别。代码中没有提到 ：nth-child(3n)选取每个父元素下的索引值是3的倍数的元素，n从1开始。：nth-child(3n+1)选取每个父元素下的索引值是3n+1的元素，n从1开始。简单代码示例如下：原创 2017-09-20 10:41:10 · 739 阅读 · 0 评论 -
让Ie8兼容HTML5和CSS3
IE8支持HTML5+CSS3 body { /*background: #444;*/ color: #FFF; font-family: Helvetica, Arial, sans-serif;原创 2018-01-04 08:56:16 · 2432 阅读 · 0 评论