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