cyanciel的专栏

原创 jQuery 实现图片轮播

自从学习jQuery之后，简直怀疑人生了。     因为，用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多，而用jQuery简单的几行就轻松搞定了~~~     好啦，进入正题~~~     下面要使用jQuery实现图片轮播~~~      1.先把基础的背景搭起来：        最终使我们的图片在方框内进行轮播：        2.实现

原创 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

原创 jQuery :empty

:empty <!--:empty匹配所有不包含子元素或者文本的空元素 --> Value 1 Value 2 $('td:empty').css('background','violet'); $('td:empty').css('width','30px');

原创 jQuery :contains 匹配包含给定文本的元素

:contains(text) .focused { background: #abcdef; } <!--:contains匹配包含给定文本的元素 查找所有包含"John"的div元素 --> John Resig George Martin Malcom John Sinclair J. Ohn $("div:contains('

原创 jQuery :root 伪类选择器

:root .focused { background: #abcdef; } <!--:root选择文档的根元素 在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是元素。 --> $(':root').css('background','lightgreen'); //相当于给html设置一个背景色

原创 jQquery :animated 给没有动画效果的元素添加动画

:animated div { width:300px; height:300px; background-color: lightgreen; } Run $('#run').click(function(){ $("div:not(:animated)").animate({ width: "+=30" }, 5000); }

原创 jQuery :header选择器

:header <!-- 匹配一个给定索引值的元素 index从0开始计数 --> H1-Header 慕容雪 H2-Header 苏州河 $(':header').css('background','violet'); $(':header').css('width','200px');效果

原创 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)

原创 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');效果图

原创 jQuery :even & :odd 选择器

:not(selector) <!-- 匹配所有索引值为偶数的元素，从 0 开始计数 --> Header 1 Value 1 Header 2 Value 2 $('tr:even').css('background','lightgreen'); $('tr:odd').css('background','lightpink'

原创 jQuery :not()选择器

:not(selector) <!-- 去除所有与给定选择器匹配的元素 在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)） --> divdiv aaa //$("input:not(:checked)").css('background','purple'); //显示结果不正确[测

原创 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('

原创 jQuery prev~siblings选择器

prev ~ sibling <!-- 匹配 prev 元素的所有同辈 siblings 元素 prev:任何有效的选择器 siblings:prev选择器的同辈选择器 --> Name: Newsletter: brother sister //如果指定sibli

原创 jQuery prev+next选择器

prev + next <!-- 匹配所有紧接在 prev 元素后的 next 元素 prev:任何有效选择器 next:一个有效选择器并且紧接着第一个选择器 --> Name: Newsletter: hengletter: $("label + input").css('

原创 jQuery parent>child

与parent child不同的地方是：parent>child只找第一级子元素 个数不限制 有时不止一个

原创 jQquery ancestor descendant选择器

ancestor descendant <!-- 在给定的祖先元素下匹配所有的后代元素 ancestor：可以是任意有效的选择器 descendant:用来匹配元素的选择器，并且是第一个选择器的后代元素 --> <!-- 找到表单中所有 Input元素 不仅仅是一级子元素 也可以是更深层级的子元素 比如下面的fieldset下面的input -->

原创 jQuery 组合选择器

选择器 <!-- 将每一个选择器匹配到的元素合并后一起返回。 你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。 --> div p class="myClass" span p class="notMyClass" $("div,span,p.myClass").css('background-color','pink');

原创 jQuery *选择器

选择器 <!-- * 选择器 匹配所有元素 [多用于结合上下文来搜索，找到每一个元素] --> DIV SPAN P $('*').css('background-color','pink');本来以为效果只是三个标签元素中间会变色，结果发现是整个body变化了颜色

原创 jQuery element选择器使用

选择器 <!-- element 选择器 根据给定的元素名匹配 所有 元素 [一个用于搜索的元素，指向DOM节点的标签名] --> DIV1 DIV2 SPAN var div = $('div'); alert(div[0].innerHTML); alert(div[1].innerHTML);效果：弹出两次警告框，

原创 jQuery class选择器的使用

选择器 .myClass { width:200px; height:200px; line-height: 200px; display: inline-block;  text-align: center; } <!-- class 选择器 根据给定的

原创 jQquery id选择器的使用

选择器 #notMe{ width:200px; height:200px; border-radius: 100px; text-align: center; line-height: 200px; } <!-- id 选择器 根据给定的ID匹配一个元素 [如果选择器中包含特殊字符，可以用两个斜杠转换] --> id="notMe"

原创 AJAX跨域解决方案—创建script标签

原创 AJAX 通过授权解决跨域问题

原创 JavaScript 多个属性一起变化

运动效果 div { width: 150px; height: 150px; background: aliceblue; opacity: 1; border-radius:75px; } window.onload = function(){ var oDiv = document.getEleme

原创 JavaScript 图片在规定时间内消失

运动效果 div { width: 200px; height: 200px; background: red; opacity: 1; } window.onload = function(){ //获取DIV的相关内容 var oDiv = document.getElementsByTagName('div')[

原创 JavaScript window onresize H5、非H5标准写法

前几天不知道为什么总是登录不上来CSDN当我在开头加上这句话： 时，改变窗口大小时，只有document.title = document.documentElement.clientWidth +'x'+document.documentElement.clientHeight;是有效的。当我把去掉时，document.title = document