![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 50
ttcyan
毕业了。
展开
-
jQuery 实现图片轮播
自从学习jQuery之后,简直怀疑人生了。 因为,用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多,而用jQuery简单的几行就轻松搞定了~~~ 好啦,进入正题~~~ 下面要使用jQuery实现图片轮播~~~ 1.先把基础的背景搭起来: 最终使我们的图片在方框内进行轮播: 2.实现原创 2017-01-07 14:01:56 · 982 阅读 · 0 评论 -
jQuery :first :last选择器
:first <!-- :first获取匹配到的第一个元素 --> list item 1 list item 2 list item 3 list item 4 list item 5 //$('ul:first').css('background','orange'); $('li:first').css('原创 2017-01-05 17:10:22 · 496 阅读 · 0 评论 -
jQuery prev~siblings选择器
prev ~ sibling <!-- 匹配 prev 元素的所有同辈 siblings 元素 prev:任何有效的选择器 siblings:prev选择器的同辈选择器 --> Name: Newsletter: brother sister //如果指定sibli原创 2017-01-05 16:50:05 · 617 阅读 · 0 评论 -
jQuery prev+next选择器
prev + next <!-- 匹配所有紧接在 prev 元素后的 next 元素 prev:任何有效选择器 next:一个有效选择器并且紧接着第一个选择器 --> Name: Newsletter: hengletter: $("label + input").css('原创 2017-01-05 16:43:05 · 1353 阅读 · 0 评论 -
jQuery parent>child
与parent child不同的地方是:parent>child只找第一级子元素 个数不限制 有时不止一个原创 2017-01-05 16:29:48 · 340 阅读 · 0 评论 -
jQquery ancestor descendant选择器
ancestor descendant <!-- 在给定的祖先元素下匹配所有的后代元素 ancestor:可以是任意有效的选择器 descendant:用来匹配元素的选择器,并且是第一个选择器的后代元素 --> <!-- 找到表单中所有 Input元素 不仅仅是一级子元素 也可以是更深层级的子元素 比如下面的fieldset下面的input -->原创 2017-01-05 16:22:44 · 366 阅读 · 0 评论 -
jQuery 组合选择器
选择器 <!-- 将每一个选择器匹配到的元素合并后一起返回。 你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。 --> div p class="myClass" span p class="notMyClass" $("div,span,p.myClass").css('background-color','pink');原创 2017-01-05 16:13:17 · 6875 阅读 · 0 评论 -
jQuery *选择器
选择器 <!-- * 选择器 匹配所有元素 [多用于结合上下文来搜索,找到每一个元素] --> DIV SPAN P $('*').css('background-color','pink');本来以为效果只是三个标签元素中间会变色,结果发现是整个body变化了颜色原创 2017-01-05 16:08:50 · 191 阅读 · 0 评论 -
jQuery element选择器使用
选择器 <!-- element 选择器 根据给定的元素名匹配 所有 元素 [一个用于搜索的元素,指向DOM节点的标签名] --> DIV1 DIV2 SPAN var div = $('div'); alert(div[0].innerHTML); alert(div[1].innerHTML);效果:弹出两次警告框,原创 2017-01-05 15:53:32 · 381 阅读 · 0 评论 -
jQuery :not()选择器
:not(selector) <!-- 去除所有与给定选择器匹配的元素 在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a)) --> divdiv aaa //$("input:not(:checked)").css('background','purple'); //显示结果不正确[测原创 2017-01-05 17:36:51 · 3377 阅读 · 1 评论 -
jQuery :even & :odd 选择器
:not(selector) <!-- 匹配所有索引值为偶数的元素,从 0 开始计数 --> Header 1 Value 1 Header 2 Value 2 $('tr:even').css('background','lightgreen'); $('tr:odd').css('background','lightpink'原创 2017-01-05 17:46:10 · 847 阅读 · 0 评论 -
jQuery eq(index)选择器
:eq(index) <!-- 匹配一个给定索引值的元素 index从0开始计数 --> Header 1 Value 1 Value 2 $('tr:eq(0)').css('background','violet'); $('tr:eq(2)').css('background','lightgreen');效果图原创 2017-01-05 17:55:03 · 698 阅读 · 0 评论 -
Javascript 图片闪烁
Heburn显示5秒之后,自动消失 var timer = setInterval(function(){ //获取到照片到相关信息 var pic = document.getElementsByTagName('div')[0]; if (timer == null) { pic.style.display原创 2016-12-28 22:04:08 · 688 阅读 · 0 评论 -
jQuery :has(selector)_给所有包含p元素的div元素添加一个text类
:has(selector) .test { width:300px; height:300px; background-color:lightgreen; margin:20px auto; } <!--:匹配含有选择器所匹配的元素的元素 --> Hello Hello again! $('div:has(p)').addClas原创 2017-01-05 19:51:36 · 931 阅读 · 0 评论 -
jQuery :empty
:empty <!--:empty匹配所有不包含子元素或者文本的空元素 --> Value 1 Value 2 $('td:empty').css('background','violet'); $('td:empty').css('width','30px');原创 2017-01-05 19:39:05 · 401 阅读 · 0 评论 -
jQuery :contains 匹配包含给定文本的元素
:contains(text) .focused { background: #abcdef; } <!--:contains匹配包含给定文本的元素 查找所有包含"John"的div元素 --> John Resig George Martin Malcom John Sinclair J. Ohn $("div:contains('原创 2017-01-05 19:33:35 · 6841 阅读 · 0 评论 -
jQuery :root 伪类选择器
:root .focused { background: #abcdef; } <!--:root选择文档的根元素 在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是元素。 --> $(':root').css('background','lightgreen'); //相当于给html设置一个背景色原创 2017-01-05 19:25:38 · 924 阅读 · 0 评论 -
jQquery :animated 给没有动画效果的元素添加动画
:animated div { width:300px; height:300px; background-color: lightgreen; } Run $('#run').click(function(){ $("div:not(:animated)").animate({ width: "+=30" }, 5000); }原创 2017-01-05 19:14:51 · 1129 阅读 · 0 评论 -
jQuery :header选择器
:header <!-- 匹配一个给定索引值的元素 index从0开始计数 --> H1-Header 慕容雪 H2-Header 苏州河 $(':header').css('background','violet'); $(':header').css('width','200px');效果原创 2017-01-05 18:53:12 · 398 阅读 · 0 评论 -
jQuery gt(index) & lt(index)
:gt(index) <!-- 匹配一个给定索引值的元素 index从0开始计数 --> Header 1Header 1 Value 2Header 2 Header 3Header 3 Value 4Header 4 $('tr:gt(0)').css('background','lightgreen'); $('td:lt(1)原创 2017-01-05 18:43:39 · 785 阅读 · 0 评论 -
jQuery class选择器的使用
选择器 .myClass { width:200px; height:200px; line-height: 200px; display: inline-block; text-align: center; } <!-- class 选择器 根据给定的原创 2017-01-05 15:45:50 · 574 阅读 · 0 评论 -
jQquery id选择器的使用
选择器 #notMe{ width:200px; height:200px; border-radius: 100px; text-align: center; line-height: 200px; } <!-- id 选择器 根据给定的ID匹配一个元素 [如果选择器中包含特殊字符,可以用两个斜杠转换] --> id="notMe"原创 2017-01-05 15:30:35 · 1514 阅读 · 1 评论 -
JavaScript 诡异的全局变量和局部变量
JS的混乱+我的迷糊,整个世界都天旋地转了。1.先来一个貌似是正常的://全局变量 var str = 'abc'; function varTest() { //局部变量 var str = 'xxx'; alert(str); } alert(str);//abc varTest();//xxx alert(str);//abc2.再来一原创 2016-12-26 22:02:29 · 238 阅读 · 0 评论 -
JavaScript 封闭空间
//封装函数的时候执行函数(function(a,b) {alert(a+b);})(3,5);原创 2016-12-26 21:50:02 · 382 阅读 · 0 评论 -
JavaScript 函数
function demo() { alert(111); } function demo() { alert(222); } demo(); //JS可以多次重写一个函数 //后面的函数会覆盖前面的函数 alert(demo); //会打印整个函数体 var mul = function(a, b){ return a*b; }; alert(mul(3,原创 2016-12-26 21:46:04 · 239 阅读 · 0 评论 -
JavaScript '=='和'==='
var a = 123; var b = '123'; if (a == b) { alert('相等'); //结果是相等的 //因为会进行隐式类型转换 } else { alert('不相等'); } if (a === b) { alert('相等'); } else { alert('不相等'); //答案是不相等的 //因为===全等会比较具原创 2016-12-26 20:41:35 · 220 阅读 · 0 评论 -
JavaScript创建对象的三种方式
第一种方法: //创建一个新的对象 var obj = new Object(); //给这个obj的对象追加属性 obj.name = 'tutu'; obj.age = '8'; obj.sex = 'female'; //给这个obj的对象追加方法 obj.say = function () { document.write('My name is '+this.原创 2016-12-26 20:25:38 · 205 阅读 · 0 评论 -
JavaScript数据类型
//整数的数据类型是numbervar a = 1;//alert(typeof(a)); //number//alert(a); //1//浮点数的数据类型是numbervar b = 3.14;//alert(typeof(b)); //number//alert(b); //3.14//布尔的原创 2016-12-26 19:26:45 · 177 阅读 · 0 评论 -
JavaScript 多个属性一起变化
运动效果 div { width: 150px; height: 150px; background: aliceblue; opacity: 1; border-radius:75px; } window.onload = function(){ var oDiv = document.getEleme原创 2017-01-03 20:49:10 · 357 阅读 · 0 评论 -
JavaScript 图片在规定时间内消失
运动效果 div { width: 200px; height: 200px; background: red; opacity: 1; } window.onload = function(){ //获取DIV的相关内容 var oDiv = document.getElementsByTagName('div')[原创 2017-01-03 19:36:31 · 381 阅读 · 0 评论 -
JavaScript Date
var d = new Date();alert(d);原创 2016-12-26 22:06:03 · 195 阅读 · 0 评论 -
JavaScript 实现点击div换颜色
Change Color 点我试试 //这个事件的目的是:当我们点击时要怎么处理 function changeColor(obj) { //因为JS会把HTML标签当做一个对象 //对象.属性 = 值; obj.style.background = 'pink'; }原创 2016-12-27 16:17:43 · 21303 阅读 · 0 评论 -
JavaScript 实现简单的点击切换背景
点击换肤 粉色 青色 function toPink() { //要改谁 就找到那个对象 document.getElementById('skin').href="02-pink.css"; } function toCyan() { document.getElementById('skin').href="02-c原创 2016-12-27 16:38:32 · 855 阅读 · 0 评论 -
JavaScript 网页加载
·下面这种写法是有问题的,因为JS的执行顺序是从上到下的,现在我们的JS使用了还没有存在的div所以,就会在console中看到这样的错误。 网页加载 var oDiv = document.getElementById(); alert(oDiv); xxxx 但我们说过JS的代码是可以放在网页的任何地方的,那么该怎么解决呢?这就用原创 2016-12-27 20:24:06 · 592 阅读 · 0 评论 -
JavaScript 鼠标划入划出
鼠标移入移出 My lovely Heburn. var over = document.getElementById('over'); var heburn = document.getElementById('heburn'); over.onmouseover = function () { heburn.style.display =原创 2016-12-27 20:17:05 · 6686 阅读 · 0 评论 -
JavaScript 焦点事件
焦点事件 input[type=text] { width:220px; height:30px; background:pink; } var oInput = document.getElementsByName('user')[0]; oInput.onfocus = function () {原创 2016-12-27 19:31:11 · 324 阅读 · 0 评论 -
JavaScript 点击事件
点击事件 点我试试 点我两下试试 //找到对象 var dan = document.getElementById('dan'); //添加事件 //onclick别再写错了 写错了耽误好久= =||| dan.onclick = function(){ //修改属性 this.style.background = 'gray'; };原创 2016-12-27 17:49:35 · 300 阅读 · 0 评论 -
JavaScript 获取属性的值
Get Elements 百度一下,你就知道 记住爱 记住时光 记住我们共同走过的岁月 Best Friend All of me Let her go //将id='baidu'的内容获取到,并保存到一个变量中 var baidu = document.getElementById('baidu'); //打印bai原创 2016-12-27 17:19:49 · 281 阅读 · 0 评论 -
AJAX 通过授权解决跨域问题
原创 2017-01-04 19:50:19 · 1264 阅读 · 0 评论 -
AJAX跨域解决方案—创建script标签
原创 2017-01-04 20:19:36 · 236 阅读 · 0 评论