jquery基本语法——选择器 对象转换 属性 样式

先引用再使用

<script type="text/javascript" src="js/jquery1.11.3.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
    alert("hello");
    })
</script>

jquery中的ready方法早于javascript中的onload方法执行,因为onload一定会等到文档中引用的所有资源加载完毕才会执行,包括引用的外部css、js文件。
ready可以有多个
onload只能有一个
简写:

$(function(){
alert("hello");
})

javascript与jquery 事件语法不同
javascript:
domobject.事件=function(){}
jquery:
jqueryobject.事件(function(){});

javascript与jquery 的属性不通用

特征:
1.丰富选择器
javascript:

var div=document.getElementById("mydiv");
div.innerHTML="hahahaha";

jquery:

$("#mydiv").html("hehehehehe");

2.隐式迭代

$(".redtext").html("************");

选择所有的redtext标签后不需要遍历,就可以把所有标签的内容更改

3.链式编程

$("#mydiv").css("background-color","red").css("border-radius","50px").html("郑州");

赋值取值与javascript中区别:
jquery :
html
text
val

javascript:
innerHtml
innerText
value

选择器

选中所有的段落:

$("p").html("@@@@@@@@@@@@@@@@@@@@");

选中所有具有id="mydiv"属性的标签

$("#mydiv").html("hehehehehe");

选中所有具有class="redtext"属性的标签

$(".redtext").html("************");

对象转换

jquery对象—> dom对象
加上下标
$(".mydiv")[0]

$(".mydiv").get(0)
在循环里加了下标也是dom对象

dom对象—>jquery对象
放$()里面

属性

attr

$("img").attr("src","img/w3.jpg");
$("img").attr("title");
$("img").removeAttr("title");

控制的是标签上的属性
input type=“checked” 标签属性checked=“checked”

$("myck").attr("checked","checked");
$("myck").removeAttr("checked");

prop

$("img").prop("src","img/w3.jpg");

控制的是dom对象的属性
Checkbox checked=true/false

$("#myck").prop("checked",true);
$("#myck").prop("checked",false);

使用attr移除属性后无法再次设置属性,所以使用jquery实现选中和取消选中时最好使用prop

全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery1.11.3.min.js" ></script>
	<script type="text/javascript">
		$(function(){
			$("#all").click(function(){
				$(".ck").prop("checked",$(this).prop("checked"));
			})
			
		})
	</script>
	<body>
		<input type="checkbox" id="all"/>全选
		<br />
		<input type="checkbox"  class="ck"/>A
		<input type="checkbox" class="ck"/>B
		<input type="checkbox" class="ck"/>C
		<input type="checkbox" class="ck"/>D
	</body>
</html>

样式

css
访问匹配元素的样式属性

$("p").css("color": "#ff0011").css("background": "blue");

按照json格式:{属性:值,属性:值}

  $("p").css({ "color": "#ff0011", "background": "blue" });
  $("p").css({ "color": "#ff0011", "background": function(){return "blue";} });

凡是写值的地方都可以用函数代替

css类
addClass
为每个匹配的元素添加指定的类名

$("p").addClass("selected");

removeClass
从所有匹配的元素中删除全部或者指定的类

$("p").removeClass("selected");

toggleClass
如果存在(不存在)就删除(添加)一个类

$("p").toggleClass("selected");
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值