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

先引用再使用

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

全选

	
		
		
	
	
	
	
		全选
		

		A
		B
		C
		D
	

样式

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