龚哥哥 爱生活、做自己!
宽屏幻灯片插件
发表于 2017-8-15 | 浏览(1035) | 前端

下载地址:https://pan.baidu.com/s/1bqcOkcJ

阅读全文

jQuery的基本选择器使用
发表于 2015-9-1 | 浏览(601) | 前端

废话不多说,直接上代码,将所有 赋值到一个 html 文件中即可测试,// 表示注释

jquery-1.8.3.min.js 这个jQuery 下载地址,

下载地址:http://code.jquery.com/jquery-1.8.3.min.js

<!DOCTYPE html
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQuery 属性选择器</title>
        <script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            //$(document).ready(function() { 会选中全部
            $(document).ready(function() {
                //点击 button 按钮就会调用
                $('button').click(function() {
                    //$('#dd').css('color', '#F00');
                    //$('.cc').css('font-size', '38px');  //单个

                    //同时选作多个设置颜色
                    //$('#dd, .cc').css('color', '#0ff');

                    //会选择 ul 下的所有子元素,多级
                    //$('.ul span').css('color', '#F00');

                    //只会选择 ul 下的子元素,孙元素不会被选中
                    //$('.ul > span').css('color', '#F00');

                    //选作 class iia 紧的挨着的下一个元素
                    //$('.iia + li').css('color', '#F00').css('font-size', '38px');

                    //下面有两个iib 这样子的话,就会选中两个,最后一个和跟最后一个键紧挨着的一个
                    //$('.iib + li').css('color', '#F00');
                    //当选择下一个紧挨着的一个元素不存在时,则不会生效
                    //$('#iic + li').css('color', '#F00');

                    //意思class iia 下面的所有子 li 元素。逗号,则不一样的元素
                    //$('.iia ~ li,p').css('color', '#F00');

                    // 选中html标签中 属性为 id 的所有元素
                    //$('[id]').css('color', '#F00');

                    // 选中html标签中 属性为 for 的所有元素
                    //$('[for]').css('color', '#F00');

                    // 选中html标签中 属性为 asdf 的所有元素,可以应用于自定义属性
                    //$('[asdf]').css('color', '#F00');

                    //选中属性 for 等于 aaa 的所有元素
                    //$('[for="aaa"]').css('color', '#F00');

                    //选中 class 属性值为 php 的所有元素
                    //$('[class="php"]').css('color', '#F00');

                    //选中 class 不为 php 的元素。
                    //$('[class != "php"]').css('color', '#F00');

                    //选中 class 为 i 字母开头的元素
                    //$('[class ^= "i"]').css('color', '#F00');

                    //选中 class 以 b 字母结束的元素
                    //$('[class $= "b"]').css('color', '#F00');

                    //选中 class 包含 f 字母的所有元素
                    //$('[class *= "f"]').css('color', '#F00');

                    //选中 标签中必须包含 class 和 id 属性等于 iic 的元素
                    //$('[class][id = "iic"]').css('color', '#F00');

                    //选中标签中同时包含 class 属性值为 gege 和 id 属性值为 gg 的元素
                    //$('[class = "gege"][id = "gg"]').css('color', '#F00');

                    //选中 class ul,中间的空格表示下一及,后代选择器,下 class 的值为 iid 和 id 值为 bod 的元素
                    $('.ul [class = "iid"][id = "bod"]').css('color', '#F00');
                });
            });

        </script>
    </head>
    <body>
        <button>按钮 1</button>
        <button>按钮 2</button>
        <div id="dd">div dd</div>
        <div class="cc">div cc</div>
        <div class="cc">div cc2</div>

        <ul class="ul">
        <span>你是我的uuuullll</span>
            <li class="iia" id="good">苹果手机aagood 2</li>
            <li class="iib">安卓手机12bbb</li>
            <li class="iibf">软件开发2bbb</li>
            <li id="iic" class="php" asdf="fff">程序员2ccc</li>
            <p>p看看 ppp</p>
            <span>
                <li class="iid" id="bod" for="ccc">嘻嘻嘻嘻</li>
                <li id="good">哈哈哈哈哈good 2</li>
            </span>
        <li class="df">l滴滴滴滴
            <span>spspsp</span>
        </li>
        </ul>
        <label for="aaa" class="gege" id="gg">l乐乐乐乐</label>
        <li class="iid" id="bod" for="ccc">嘻嘻嘻嘻2222222</li>
    </body>
</html>

阅读全文

javascript常用的属性修改样式操作
发表于 2015-9-1 | 浏览(499) | 前端

用JS修改CSS样式

今天修改项目的一个页面,涉及到通过js来修改css样式。自己盲目的试了好几种语法,结果都是错的。

看来还是要求助度娘啊。

突然发现在我们公司做开发,包你的js水平和css水平提高,为什么,因为公司只有一个美工,qie~~

1、添加样式

document.getElementById("id").className="div_class";

2、添加背景图片

document.getElementById("id").style.backgroundImage ="url(../images/tab_bg1.gif)";
也可以填网址

3、添加颜色

document.getElementById("id").style.color = "#fff";

4、设置字体大小

document.getElementById("id").style.fontSize = "30px";

5、设置背景色

document.getElementById("id").style.backgroundColor = "blue";

6、设置边框

document.getElementById("id").style.border = "2px solid #333333";
参数分别为宽度,样式,颜色

7、设置宽度

document.getElementById("id").style.width = "40%";

8、居中显示

document.getElementById("id").style.textAlign = "center";

阅读全文

在html中实现两个html文件交互传递数据的方法
发表于 2015-9-1 | 浏览(552) | 前端

a.html 文件 代码如下

<html>
	<head>
	</head>
	<body>
		<input type = "text" id = "inputid">
		<input type = "button" onclick="submit('3')" value = "提交">
	</body>
</html>
<script>
function submit(e) {
	var input1 = document.getElementById("inputid");
	var age = e.elements[1].value;
	window.open("b.html?inputstr="+age);  //传入参数
}
</script>

b.html 文件  代码如下

<html>
	<head>
	</head>
	<body>
	</body>
</html>
<script>
	//获得参数的方法
	var request = {
		QueryString : function(val) {
			var uri = window.location.search;
			var re = new RegExp("" +val+ "=([^&?]*)", "ig");
			return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);
		}
	}

	//调用方法获得参数
	var rt = request.QueryString("inputstr");
	alert(rt);
</script>

新建两个 a.html  和 b.html 文件,将代码直接拷贝进去就可以正常测试看见结果了

阅读全文

TOP