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

最新推荐文章于 2022-11-06 22:53:37 发布

一JJL

最新推荐文章于 2022-11-06 22:53:37 发布

阅读量293

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/tcbdbd/article/details/99178701

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

先引用再使用

<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");

一JJL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基本语法——选择器对象转换属性样式

先引用再使用<script type="text/javascript" src="js/jquery1.11.3.min.js"></script><script type="text/javascript"> $(document).ready(function(){ alert("hello"); })</script...
复制链接

扫一扫