1-16,星期二 8:59:13
筛选的是表单组件 input 标签的type属性::input :text :password :radio :checkbox :number :submit :reset :button :hidden :file :image ...
案例:
HTML部分: <input type="text" placeholder="请输入帐号"/> <input type="password" placeholder="请输入密码"/> <input type="submit" value="登录"/> JS部分: $(function(){ $(":submit").css("color","#060"); $(":password").css("border","1px solid #333"); $(":text").css("font-size","18px"); });
格式:- 筛选元素是否存在某属性 $("选择器[属性名称]"); - 筛选元素的属性值 是否等于某值 $("选择器[属性名='值']"); - 筛选元素的属性值 是否不等于某值 $("选择器[属性名!='值']");案例:
HTML部分 <img src="images/xdl1.jpg" > <img src="images/xdl2.jpg" > <img src="images/xdl3.jpg" > <img src="images/xdl4.jpg" > JS部分: $(function(){ $("img[src='images/xdl2.jpg']").css("border","1px solid red"); $("img[src!='images/xdl2.jpg']").css("width","400px"); });
用来修改元素的显示样式 .使用方式:
方式一:
css("样式key","样式值"); 传入一个样式键值对, 来完成元素的单个样式的指定 !方式二:
css(JSON对象); 传入一个描述样式的JSON数据 ! 例如: css({ 'color':'red', 'font-size':'18px' });
我们在JS中 通过innerHTML属性, 修改和获取元素的文本内容在Jquery中通过两个方法, 来进行内容的获取与修改
html函数 - 与JS中innerHTML效果基本一致 ! $obj.html() : 获取元素内容 $obj.html(text) : 设置元素内容
text函数 $obj.text() : 获取元素文本内容
使用html函数 与text函数 获取如下div的内容 ,结果为:
<div>一二三四五<p>六七八九十</p></div>结果:
html(): 一二三四五<p>六七八九十</p> text(): 一二三四五六七八九十案例:
手机号验证的案例: HTML部分: <input type="text" placeholder="请输入注册的帐号" onblur="unametest(this)"/><span id="uname_ph"></span> JS部分: function unametest(input){ var text = $(input).val(); var reg = /^(13[0-9]|15[012356789]|17[01235678]|18[0-9]|199)[0-9]{8}$/g; if(reg.test(text)){ $("#uname_ph").css({'font-size':'12px','color':'#393'}); $("#uname_ph").html("恭喜你 , 帐号可用 !"); }else{ $("#uname_ph").css({'font-size':'12px','color':'#933'}); $("#uname_ph").html("很遗憾, 帐号不可用 ~ "); } }
在JS中 可以通过 对象.属性名 = 值; 给一个属性赋值, var value = 对象.属性名; 获取一个属性的值在Jquery中, 我们可以通过attr函数, 获取与设置所有属性的值 !
获取属性格式: var value = $obj.attr("属性名");
注意: Jquery存在一个BUG, 使用attr函数获取value属性值, 不能获取用户输入的内容 ! 只能获取到初始值! 获取与设置value属性 应通过val()函数设置属性格式:
$obj.attr("属性名","属性值");删除属性:
$obj.removeAttr("属性名");案例:
HTML部分 <img> <p> <button onclick="test(1)">添加src属性</button> <button onclick="test(2)">获取src属性</button> <button onclick="test(3)">移除src属性</button> </p> JS部分 function test(type){ var img = $("img"); switch (type) { case 1:{ img.attr("src","images/xdl3.jpg"); } break; case 2:{ var src = img.attr("src"); console.info(src); } break; case 3:{ img.removeAttr("src"); } break; } }
class属性的值, 不能通过attr函数进行操作添加class属性
格式: $obj.addClass("值");删除class属性:
格式: $obj.removeClass("值");替换class值: 在原来存在class属性值的情况下 进行替换
格式: $obj.toggleClass("值");
设置/获取宽度 设置: $obj.width(宽度); 获取: $obj.width();设置/获取高度
设置: $obj.height(高度); 获取: $obj.height();案例:
HTML部分: <img src="images/xdl2.jpg"> JS部分: $("img").width(300px);
- 获取元素自身宽度 ***
$obj.width();
-
获取元素自身高度 *** $obj.height();
-
获取元素自身宽度+内边距 $obj.innerWidth();
-
获取元素自身高度+内边距 $obj.innerHeight();
-
获取元素自身宽度+内边距+边框 $obj.outerWidth();
-
获取元素自身高度+内边距+边框 $obj.outerHeight();
-
获取元素自身宽度+内边距+边框+外边距 $obj.outerWidth(true);
获取元素自身高度+内边距+边框+外边距 $obj.outerHeight(true);
当元素使用隐藏函数后, 元素不再占用任何的空间, 盒模型为0x 0y
-
基本效果 *** 显示: $obj.show(); 隐藏: $obj.hide(); 切换: $obj.toggle();
-
向左上折叠效果 显示: $obj.show(毫秒); 隐藏: $obj.hide(毫秒); 切换: $obj.toggle(毫秒);
-
上下折叠效果 显示: $obj.slideDown(毫秒); 隐藏: $obj.slideUp(毫秒); 切换: $obj.slideToggle(毫秒);
元素必须指定确定的宽度 才可以呈现上下折叠的效果 ! 淡入淡出效果
淡入: $obj.fadeIn(毫秒);
淡出: $obj.fadeOut(毫秒);
格式:$obj.animate(参数1,参数2,[参数3]); 参数1: JSON对象, 描述动画执行结果的样式 参数2: 从当前样式, 过渡到参数1的 毫秒! 参数3: 不是必须传递的参数, 传递一个函数, 动画执行完毕后 会自动调用 !案例:
HTML部分: <p>高飞飞飞飞: 我有一只小小小小鸟</p> JS部分:
$(function(){ test1(); }); var test1 = function(){ $("p").animate({"left":"600px","font-size":"14px"},500,test2);; } var test2 = function (){ //当右移动画执行完毕, 设置文字大小发生变化 $("p").animate({"left":"100px","font-size":"80px"},500,test1);; }
CSS部分: p{ position: fixed; left:-250px; top:50%; }
transform:rotate(xxdeg);
参数中传入180deg 表示旋转180度