玩转jQuery

本文详细介绍了jQuery库的作用,如何操作DOM对象,包括DOM对象与jQuery对象之间的转换,选择器的使用,事件处理,以及Ajax请求的简化实现,如$.ajax(),$.post(),和$.get()函数的用法。
摘要由CSDN通过智能技术生成

jQuery是一款跨主流浏览器的JavaScript库,封装了JavaScript相关方法的调用,简化Javascript对HTML DOM操作
库:相当于Java的工具类,库是存放东西的,jQuery是存放js代码的地方,放的用js代码写的function

2,dom对象和jquery对象
dom对象,使用javascript的语法创建的对象叫做dom对象,也就是js对象。


var obj=document.getElementById("text");
obj是dom对象,也叫做js对象。
obj.value;

jquery对象:使用jquery语法表示对象叫做jQuery对象,
注意:jquery表示的对象都是数组。
例如:var jobj=$("#text1"),
jobj就是使用jQuery语法表示的对象。
也就是jQuery对象。它是一个数组。现在数组中就只有一个值i。

dom对象可以和jQuery对象相互转换。
dom对象可以转为jQuery,语法:$(dom对象)
jQuery对象也可以转换成为dom对象,语法:从数组中获得第一个对象,第一个对象就是dom对象,使用[0]或者get(0)
为什么要进行dom和和jQuery的转换:目的是要使用对象的方法,或者方法。
当你的dom对象时,可以使用dom对象的属性或者方法,如果你想要使用jQuery提供的函数,必须是jQuery对象才可以。

①把dom对象转jQuery,使用jQuery库中的函数
 var jobj=$(obj)
②调用jQuery中的函数,获取value的值
alert(jobj.val())


3、选择器:
就是一个字符串,用来定位dom对象的,
定位了dom对象,就可以通过jQuery的函数操作dom常用的选择器:
①id选择器,语法:$("#dom对象的id值")
   通过dom对象的id定位dom对象的。通过id找对象,id再当前页面中是唯一的值。
②class选择器,语法:$("class样式名")
class表示css中的样式,使用样式的名称定位dom对象的。
③标签选择器,语法:$("标签名称“)
使用标签名称定位dom对象的。

jQuery对象,使用jQuery语法创建的对象。jQuery对象能调用jQuery函数库得函数或者属性。
jQuery对象是数组,数组中的每个成员都是dom对象。

表单选择器
语法$(":type属性值")
$(":str")   不能用,str不是input标签

过滤器
jQuery对象中存储的dom对象顺序与页面标签声明位置关系
<div>1</div>
<div>2</div>
<div>3</div>
$("div")==[dom1,dom2,dom3]

基本过滤器
(过滤器必须和选择器一块用,不能单独使用)
①选择第一个fist,保留数组中第一个DOM对象
语法:$("选择器:first")
②选择最后一个last,保留数组中最后DOM对象
语法:$("选择器:last")
③选择数组中指定对象
语法:$("选择器:eq(数组索引)“)
④选择数组中小于指定索引的所有DOM对象
语法:$("选择器:It(数组索引)”)
⑤选择数组中大于指定索引的所有DOM对象
语法:$("选择器:gt(数组索引)”)


jQuery中给dom对象绑定事件
①$(选择器).事件名称(事件的处理函数)
$(选择器):定位domo对象,dom对象可以有多个,这些dom对象都绑定事件了
事件名称:就是js中事件去掉on的部分,例如js中的单机事件onclick(),jquery中的事件名称就是click,都是小写的。
事件的处理函数:就是一个function,当事件发生时,执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$("#btn").click(function(){
         alert("btn按钮单击了“)
})


//表单属性过滤器
根据表单中dom对象的状态情况,定位dom对象的。

启用状态,enable,
不可用状态,disable
选择状态,checked, 例如:radio,checbox

选择可用的文本框
$(":text:enable")
选择不可用的文本框
$(":text:disable")
复选框选中的元素
$(":checkbox:checked")
获取下拉列表的被选中元素

选择器>option:selected

通过下标可以将jQuery对象转化为dom对象

函数
①val
$(选择器).val():读值
$(选择器).val(值):赋值
②text
$(选择器).text() --读取数组中所有dom对象的文字显示内容,将得到的内容拼接为一个字符串返回

$(选择器).text(值)--对数组中的所有dom对象的文字显示内容进行统一赋值

③attr
对val,text之外的其他属性操作
$(选择器).attr("属性名”) --获取dom数组中第一个对象的属性值
$(选折器).attr("属性名“,”值“):对数组中所有的dom对象的属性设为新值

④remove
$().remove()--将数组中所有dom对象及其子对象一并删除
⑤empty
$().empty()--将数组中所有的dom对象的子对象删除
⑥append
我i数组中所有的dom对象添加子对象

⑦html

⑧each
1.可以对数组,json,dom数组循环处理。数组,json中的每一个成员都会调用一次处理函数
 
语法:$.each(循环内容,处理函数):表示使用jQuery的each,循环数组,每个数组成员,都会执行后面的“处理函数”一次。
$:相当于是Java的一个类名
each:就是类中的静态方法。
静态方法调用,可以使用类名.方法名称

处理函数:function(index,element):
             index,elemrnt都是自定义的形参,名称自定义。
  index:循环的索引
element:数组中的成员

on事件的绑定
$(选择器).on(事件名称,事件的处理函数)
事件名称:就是js事件中去掉on的部分,例如js中onclick,这里就是click事件1的处理函数:function定义。

Ajax
使用jQuery的函数,实现Ajax请求的处理。
没有jQuery之前,使用xmlhttprequest做Ajax请求。
jQuery简化了Ajax请求的处理。
①$.ajax():jquery中实现Ajax的核心函数。
②$.post():使用poost方法做Ajax亲请求。
③$.get():使用get方式发送Ajax请求。
$.post和$.get他们在内部都是调用的$.ajax()

$.ajax()函数的参数表示请求的url,请求的方式,参数值等信息。
$.ajax()参数是一个json的结构。
error()-->如果请求失败要运行的函数
dataType-->期望从服务器响应的数据类型。
  jQuery从xml,json,text,html这些中测试最可能的类型
  xml---一个xml文档
  html---html作为纯文本
  text---纯文本字符串
  json--以json运行响应,并以对象返回
contentType:发送数据到服务器时所用的内容类型,可以不写。例如application/json

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知识冷不丁进了脑子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值