jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化
JavaScript对 HTML DOM操作
dom对象和jquery对象
dom对象
使用javascript的语法创建的对象叫做dom对象，也就是js对象。
var obj=document.getElementById("txt1");
obj是dom对象，也叫做js对象obj .value ;
jquery对象
使用jquery语法表示对象叫做jquery对象，注意: jquery表示的对象都是数组
var obj = $("txt1 ")
obj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。现在数组中就一个值
dom对象和jquery对象相互的转换。
dom对象转为jquery
语法:$ (dom对象)
<script type="text/javascript">
function btnClick(){
var obj = document.getElementById("btn");
alert(obj.value)
var obj1 = $(obj);
alert( obj1.val())
}
</script>
jquery对象转为dom对象
语法:从数组中获取第一个对象，第一个对象就是dom对象，使用==[0]或者get(0)==.
<script type="text/javascript">
function btnClick(){
var obj =$(""#txt")[0];
var obj=$("#txt").get(0);
var num = obj.value;
}
</ script>
进行dom和jquery的转换的目的：
是要使用对象的方法，或者方法。
当你为dom对象时，才可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数必须是jcuery对象才可以
选择器
基本选择器
用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom常用的选择器
id选择器
语法:$ ("#dom对象的id值")
通过dom对象的id定位dom对象的。过id找对象，id在当前页面中是唯一值。
<script type="text/javascript">
function fun1(){
var obj = $("#one" ); T
}
</ script>
class选择器
语法:$ (".class样式名)
class表示css中的样式，使用样式的名称定位domn对象的。
<script type="text/javascript">
function fun1(){
var obj = $(".one" ); T
}
</ script>
标签选择器
语法:$(“标签名称”)
<script type="text/javascript">
function fun1(){
var obj = $("div"); T
}
</ script>
所有选择器
语法:$(*)
选取页面中所有DOM对象。
组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器,可以组合id, class,标签名等。
语法:$("#id, .class，标签名")
<script type="text/javascript">
function fun1(){
var obj = $("#one,.two,div"); T
}
</ script>
表单选择器
该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
语法:$(":type属性值")
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":button")选取所有的按钮
$(":submit")选取所有的提交按钮
$(":file")选取所有的
$(":reset")选取所有的
过滤器
通用过滤器
过滤器:在定位了dom对象后，根据一些条件筛选dom对象。过滤器不能单独使用，必须和选择器一起使用-
1.选择第一个first，保留数组中第一个DOM对象
$("选择器:first")
⒉选择最后个last，保留数组中最后DOM对象
$("选择器:last")
3.选择数组中指定对象
$("选择器:eq(数组索引)")
4.选择数组中小于指定索引的所有DOM对象
$("选择器:lt(数组索引)")
5.选择数组中大于指定索引的所有DOM对象
$("选择器:gt(数组索引)")
表单属性过滤器
1.选择可用的文本框
$(":text:enabled")
⒉选择不可用的文本框
$(":text:disabled"")
$(function(){
$("#btn1").click(function(){
var obj= $(" :text:enabled");
var obj1= $(" :text:disabled");
obj.val("hello");
})
}
3.复选框选中的元素
$(":checkbox:checked")
$(function(){
$("#btn2").click(function(){
var obj = $(":checkbox: checked" );
for(var i=0;i<obj.length;i++){
alert($(obj[i]).val())
})
}
4.选择指定下拉列表的被选中元素
选择器>option:selected
函数
val
操作数组中DOM对象的value属性.
$(选择器).val():无参数调用形式，读取数组中第一个DOM对象的value属性值$(选择器).val(值):有参形式调用，对数组中所有DOM对象的value属性值进行统一赋值
text
操作数组中所有DOM对象的文字显示内容属性
$(选择器).text():无参数调用，读取数组中所有DOM对象的文字显示内容，将得到内容拼接为一个字符串返回$(选择器).text(值):有参数方式，对数组中所有DOM对象的文字显示内容进行统一赋值
attr
对val, text之外的其他属性操作
$(选择器).attr(“属性名”):获取DOM数组第一个对象的属性值$(选择器).attr(“属性名”，“值”):对数组中所有DOM对象的属性设为新值
remove
$(选择器).remove():将数组中所有DOM对象及其子对象一并删除
empty
$(选择器).empty():将数组中所有DOM对象的子对象删除
append
$(选择器).append("")为数组中所有DOM对象添加子对象
html
设置或返回被选元素的内容(innerHTML)。
$(选择器).html():无梦数调用方法，获取DOM数组第一个匹元素的内容。$(选择器).html(值):有参数调用，用于设置DOM数组中所有元素的内容。
<html>
<span>
<b>Hellow</b> word
</span>
</html>
$("#btn4").click(function(){
alert($("span").text());
alert($("span").html());
})
each
each是对数组，json和 dom 数组等的遍历,对每个元素调用一次函数。
$.each(要遍历的对象, function( index,element){处理程序})jQuery对象.each( function( index, element ) {处理程序})
index:数组的下标
element:数组的对象
$("#btn6").click(function(){
var arr =[ 11，12，13];
$.each(arr,function(index, element){
alert(index + "数组成员:"+element);
}
})
each循环json
var json={ "name":"张三","age" :18};
$.each(json,function(i,n){
alert(i+"=="+n);
})
结果：
1==张三
2==18
事件
on()方法在被选元素上添加事件处理程序。
语法:$(选择器).on(event,function)
- event:事件一个或者多个，多个之间空格分开
- function:可选。规定当事件发生时运行的函数。
$("#newBtn" ).on("click",function(){
alert("hello");
})
ajax
$.ajax()是 jQuery中 AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。
语法:
$.ajax( { name:value, name:value, … })
- async :布尔值，表示请求是否异步处理。默认是true
- contentType :发送数据到服务器时所使用的内容类型，可以不写
- data:规定要发送到服务器的数据，可以是:字符串，数组，多数是json
- dataType:期望从服务器响应的数据类型。jQuery 从 xml, json, text,html这些中测试最可能的类型
“xml” -一个XML文档
“html” - HTML作为纯文本
“text”-纯文本字符串
“json”-以JSON运行响应，并以对象返回
- error():如果请求失败要运行的函数
- success(resp):当请求成功时运行的函数，其中 resp是自定义的形参名
- type:规定请求的类型*(GET 或POST等)，默认是GET，get，post不用区分大小写
- url:规定发送请求的url
$.ajax({
url : "queryjson",
data:{
"参数名" : 参数
},
dataType: "json",
success:function (resp){
响应事件
}
})
|