jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化
JavaScript对 HTML DOM操作
dom对象和jquery对象
dom对象
使用javascript的语法创建的对象叫做dom对象，也就是js对象。
var obj=document.getElementById("txt1");
jquery对象
使用jquery语法表示对象叫做jquery对象，注意: jquery表示的对象都是数组
var obj = $("txt1 ")
obj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。现在数组中就一个值
dom对象和jquery对象相互的转换。
dom对象转为jquery
语法:$ (dom对象)
<script type="text/javascript">
function btnClick(){
//获取dom对象
var obj = document.getElementById("btn");
//使用dom的value属性,获取值
alert(obj.value)
//把dom对象转jquery,使用jquery库中的函数
var obj1 = $(obj);
//调用jquery中的函数,获取value的值
alert( obj1.val())
}
</script>
jquery对象转为dom对象
语法:从数组中获取第一个对象，第一个对象就是dom对象，使用==[0]或者get(0)==.
<script type="text/javascript">
function btnClick(){
//使用jquery的语法,获取页面中的dom对象
var obj =$(""#txt")[0];
//从数组中获取下标是0的dom对象
var obj=$("#txt").get(0);
//从数组中获取下标是0的dom对象l
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>
所有选择器
组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器,可以组合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对象。过滤器不能单独使用，必须和选择器一起使用-
$("选择器:first")
$("选择器:last")
3.选择数组中指定对象
$("选择器:eq(数组索引)")
$("选择器:lt(数组索引)")
$("选择器:gt(数组索引)")
表单属性过滤器
1.选择可用的文本框
$(":text:enabled")
⒉选择不可用的文本框
$(":text:disabled"")
$(function(){
$("#btn1").click(function(){
var obj= $(" :text:enabled");
var obj1= $(" :text:disabled");
//设置jquery数组值所有dom对象的value值
obj.val("hello");
})
}
$(":checkbox:checked")
$(function(){
$("#btn2").click(function(){
//获取选中的checkbox
var obj = $(":checkbox: checked" );
for(var i=0;i<obj.length;i++){
//输出选中的值
alert($(obj[i]).val())
})
}
选择器>option:selected
函数
val
text
$(选择器).text():无参数调用，读取数组中所有DOM对象的文字显示内容，将得到内容拼接为一个字符串返回$(选择器).text(值):有参数方式，对数组中所有DOM对象的文字显示内容进行统一赋值
attr
remove
$(选择器).remove():将数组中所有DOM对象及其子对象一并删除
empty
$(选择器).empty():将数组中所有DOM对象的子对象删除
append
$(选择器).append("")为数组中所有DOM对象添加子对象
html
<html>
<span>
<b>Hellow</b> word
</span>
</html>
$("#btn4").click(function(){
alert($("span").text());//Hellow word
alert($("span").html());//<b>Hellow</b> word
})
each
each是对数组，json和 dom 数组等的遍历,对每个元素调用一次函数。
$("#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(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){
响应事件
}
})
原文地址:https://blog.csdn.net/wfl1486409520/article/details/123283405
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_31676.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
