Juery学习
JQuery基础:
-
概念:一个JavaScript框架。简化JS开发javaScript框架，本质上市一些js文件，封装了代码而已
-
juery-xxx.js和juery-xxx.min.js区别
#jquery-xxx.js开发版本。给程序员看的，有良好的缩进和解释
#jquer-xxx.min.js：生产版本。程序中使用。没有缩进，体积小一点，程序加载更快
1.基本语法
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
//传统的js写法
//根据id获取元素对象
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//jquery写法
var div1 = $("div1");
var div2 = $("div2");
</script>
</body>
2.JQuery对象和Js对象的相互转换
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
//通过js方式获取叫div所有对象
var divs = document.getElementsByTagName("div");
alert("divs.length);//可以将其当做数组使用
//对dis中所有的div 让其标签内容 为"aaa"
for(var i=0;i<divs.length;i++){
//原生js写法
//div[i].innerHTML="aaa";
//js --> jq (js转Jq的写法)
//操作方法：$(js对象)
$(div[i]).html("aaa");
}
//通过jq方式来获取名叫div的所有元素html元素对象
var $divs = $("dvi");
alert($divs.length);//也可以当做数组来使用
//对divs中所有的div 让其标签内容为bbb，使用jq方式
//$divs.html("bbb");
//$divs.innerHTML = "bbb";
//jq --> js (jq转js操作)
//jq对象[索引] 或者 jq对象.get(索引)
$divs[0].innerHTML="ddd"
$divs.get(1).innerHTML = "eee"
</script>
</body>
3.选择器：筛选具有相似特征的元素(标签)
- 事件学习
<script>
//jquery方法的单机事件click
$("#bi").click(function(){
alert("被点击了");
});
</script>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="button" value="点我" id="b1">
</body>
2.入口函数
<script>
windows.load = function(){
$("#bi").click(function(){
alert("被点击了");
});
}
$(function(){
$("#bi").click(function(){
alert("被点击了");
});
});
/*
windows.onload和$(function)区别
windows.onload只能定义一次，如果多次，后面的会将前面的覆盖掉
$(function)可以定义多次的
*/
</script>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="button" value="点我" id="b1">
</body>
3样式控制
初始化的时候改变div1的背景颜色的jquery的操作
<script>
$(function () {
//$("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");
});
</script>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="button" value="点我" id="b1">
</body>
基本选择器
1.基本选择器
1.标签选择器（元素选择器）
语法：$(“html标签名”)获得所有匹配标签名称的元素
2.id选择器
语法：$("#id的属性值"）获得与指定id属性值匹配的元素
3.类选择器
语法:$(.class属性值")获得与指定的class属性值匹配的元素
4.并集选择器
语法：$(“选择器1,选择器2…”)获取多个选择器中的所有元素
2.层级选择器
1.后代选择器
语法：$(“A B”)选择A元素内部的所有B元素
2.子选择器
语法:$("A > B”)选择A元素内部的所有B子元素
3.属性选择器
1.属性名称选择器
语法：$(“A[属性名]”)包含指定属性的选择器
2.属性选择器
语法：$(A[属性名=‘值’]"）包含指定属性等于指定值的选择器
3.复合属性选择器
语法:$(A[属性名=‘值’][]…"）包含多个属性条件的选择器
4.过滤选择器
1.首元素选择器
语法：first获得选择的元素中的第一个元素
2.尾元素选择器
语法：last 获得选择的元素的最后一个元素
3.非元素选择器
语法：not()不包括制定内容元素
4.偶数选择器
语法：even偶数，从0开始计数
$("tr:gt(1):even").css("backgroundColor","pink");
5.奇数选择器
语法:odd 奇数，从0开始计数
$("tr:gt(1):odd").css("backgroundColor","pink");
6.等于索引选择器
语法:eq(index)制定索引元素
7.大于索引选择器
语法:gt(index)大于制定索引的元素
8.小于索引选择器
语法：lt(index)小于定制索引元素
9.标题选择器
语法:header 获得标题元素，固定写法
5.表单过滤选择器
1.可用元素选择器
语法：enable 获得可用元素
案列1:
利用Jquery对象val()方法改变表单内可用元素的值，id=b1
$("#b1").click(function(){
$("input[type='text']:enable").val("aaa");
});
2.不可用选择器
案列2:
利用Jquery对象val()方法改变表单内不可用元素的值，id=b2
语法:disabled 获得不可用元素
$("#b2").click(function(){
$("input[type='text']:diseanble").val("aaa")
});
3.选中选择器
语法：checked 获得单选/复选框中的元素
案列3:
利用Jquery对象length属性获取复选框中的个数 ib = b3
$(#b3).click(function(){
var number = $("input[type='text']:checked").length();
});
4.选中选择器
语法 selected 获得下拉框中的元素
利用Juerq属性获取下拉选框中的个数 id = b4
$(#b3).click(function(){
var number = $("#id名 > option:selected").length
});
DOM操作
- 内容操作
html():获取/设置元素的标签体内容
<a><font>内容</font><a/> --> <font>内容</font>
text():获取/设置元素标签体纯文本内容
<a><font>内容</font><a/> -->
内容
val():获取/设置元素的value属性值
-
属性操作
通用属性操作
1.attr()：//获取/设置元素的属性
2.removeAttr()：删除属性
3.prop()：获取/设置元素的属性
4.removeProp()：删除属性*attr和prop区别
1.如果操作的是元素的固有属性，则建议使用prop
2.如果操作元素自定义的属性，则建议使用attr
<script>
//获取北京的name属性值
$(function () {
var name = $("#bj").attr("name");
//设置北京节点的name属性的值为dabeijing
var name= $("#bj").attr("name","dabeijing");
//新增北京节点的discription属性为didu
var name= $("#bj").attr("discription","didu");
//删除北京节点的name属性并效验name属性是否存在
$("#bj").removeAttr("name");
//获取hobby的选中状态
var checked = $("#hobby").prop("checked");
alert(checked);
})
</script>
</head>
<body>
<ul>
<li id="bj" name="beijing" xxx="yyy">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby">
</body>
1.addClass()：添加class属性值
2.remveClass()：删除class属性值
3.toggleClass：切换class属性
toggleClass("one")：判断如果元素对象上存在class="one"，则将属性one删除掉。如果元素对象上不存在class="one"，则添加
-
CRUD操作
-
append():父元素将子元素追加到末尾 *对象1.appand(对象2):将对象2添加到对象1元素的内部，并且在末尾
-
prepend()：父元素将子元素追加都开头 *对象1.prepend(对象2):将对象2添加到对象1元素的内部，并且在开头
-
appendTo():
对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾 -
prependTo()
对象1.prependTo(对象2):对象1添加到对象2内部，并且在开头 -
after():添加元素到元素后边
对象1.after(对象2) :将对象添加到对象1后边。对象1和对象2是兄弟关系 -
before()：添加元素到元素前面
对象1.before(对象2):将对象2添加到对象1前面。对象1和对象2是兄弟关系 -
insertAfter()
对象1.insertAfter(对象2)：将对象添加到对象1后边。对象1和对象2是兄弟关系 -
insertBefore()：
对象1.insertbefore(对象2):将对象2添加到对象1前边。对象1和对象2是兄弟关系 -
remove()：移除元素
对象.remove():将对象删除掉 -
empty()：清空元素的所有后代元素
对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性的节点
遍历
JS的遍历方式
for(初始化值，循环结束条件;步长）
1.Jq对象.each(callback)
语法：
jquery对象.each(function(index,element){});
*index:就是元素集合中的索引
*element：就是集合中每一个元素对象
*this：集合中的每一个元素对象
回调函数返回值：
*true：如果当前function返回为false，则结束循环(break)
*false：如果当前function返回为true,则结束本次循环，继续下次循环(continue)
2.$.each(object,[callback])
3.for...of query 3.0 版本之后提供的方式
for(元素对象 of 容器对象）
事件绑定
1.jquery 标准的绑定方式
jq对象.事件方法(回调函数)
2.on绑定时间/off解绑
jq对象.on(“事件名称”,回调函数)
jq对象.off(“事件名称”)
3.事件切换：toggle
jq对象.toggle(fn1,fn2…）
2987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
