jQuery学习笔记

最新推荐文章于 2025-02-25 09:51:17 发布

原创最新推荐文章于 2025-02-25 09:51:17 发布 · 244 阅读

1 ·

CC 4.0 BY-SA版权

java开发笔记专栏收录该内容

71 篇文章

订阅专栏

jQuery是Js类库,对常用的方法和对象进行封装,方便我们的使用

获取jquery对象:

1) jQuery (“#ID地址”)通过ID获取jQuery对象
2) $(“#ID地址”)

命名: 一般jQuery对象变量名前加$
获取value属性：变量名.val();

Dom对象和jQuery对象之间的转换
dom ->jQuery: $(dom对象)
jQuery -> dom:
方式一:jquery对象[index];
方式二:jquery对象.get(index);
页面加载(入口)
Js: window.onload=function(){}
Jquery:
方式一:$(function(){….})
方式二:$(document).ready(function(){….});

派发事件:
  $(“选择器”).click(function(){…});
等价于:js中.dom对象.onclick=function(){…}
常用事件:
focus:获取焦点
blur：失去焦点
  submit:事件会在表单中的确认按钮被点击时发生
  change: 事件会在域的内容改变时发生,常用在下拉表单中
  click: 鼠标点击事件

Jquery中的效果
隐藏或展示
  展示:show(毫秒数) 以右上角作为原点逐渐变大,参数是从最小变成最大所需的时间
  隐藏:hide(毫秒数) 以右上角作为原点逐渐消失,参数是从最大变成最小所需的时间

滑入或滑出
向下滑入:slide [slaɪd] Down(毫秒数) 以上边框为基准向下显示,参数是全图显示完需要的时间
向上滑出:slideUp(毫秒数) 以上边框为基准向上卷,参数是全图隐藏完需要的时间

淡入淡出
淡入:fadeIn(毫秒数) 整张图像素逐渐增多,参数是像素完全显示所用的时间
淡出:fadeOut(毫秒数) 整张图像素逐渐减少,参数是像素完全消失所用的时间

选择器
基本选择器
Id:$(“#id值”)
   class:$(“.class值”)
   标签:$(“标签名”)
   所有元素:$(“*”)
   多个选择器:$(“选择器,选择器…”)用逗号隔开
   设置样式:$(“选择器”).css(“值,值”);
   多种选择器: $(“选择器,选择器…”).css(“值,值”);多个选择器用

层次选择器★
a b : a的所有b后代;
a>b: a的所有b儿子,不包括孙子..
   a+b: a的下一个兄弟
   a~b: a的所有弟弟

基本过滤选择器

:first ：第一个
   :last ：最后一个
   :even ：索引为偶数
   :odd ：索引为奇数
   :eq ：指定索引
   :gt ：索引大于
   :lt ：索引小于
内容过滤选择器:
:has(“选择器”) ：包含指定选择器的选择器
可见过滤选择器:
:hidden ： (不可见)在页面不展示元素一般值input type=”hidden 和样式中display
:visible ：可见的
属性过滤选择器★
[属性名]
[属性名=”值”]
表单过滤选择器
:input 所有表单子标签 input select textarea button
表单对象属性过滤选择器
:enabled 可用的
   :disabled 不可用的
   :checked
   :selected

属性和css操作总结★★★

attr()
prop()
css()
addClass()
对属型的操作
attr() 设置或者获取元素的属性
  方式1: attr (“属性名称”)
  方式2: 设置一个属性 attr(“属性名称”,”值”)
  方式3: 设置多个属性
attr({
“属性1”:”值1”
“属性1”:”值1”
“属性1”:”值1”
    })
删除一个属性:removeAttr(“属性名称”):移除指定属性
注意:获取不了checked属性,需要使用prop
prop()使用方法和attr相似
添加class属性
addClass(“指定的样式值”) 等价于 attr(“class” , 注意“值”)
清除 removeClass(“class值”);

对css操作
操作元素的style属性
css():获取或者设置css样式
方式一:获取:css(“属性名”)
方式二: 设置一个属性 css( (“属性名” , ”值”)
    方式三: 设置多个属性
css( {
“属性1”:”值1”
“属性2”:”值2”
     })
   获取元素的尺寸 width() height()

设置获取标签体内容 :
html() text()
设置的区别:
html:会把字符串解析(可以获取样式和标签)
text:只做为普通的字符串(只能将内容作为普通字符串)
获取的区别:
html:会获取内容的标签样式
text:只获取普通文本内容
使用方法:
获取
Jquery对象.html()
Jquery对象.text()
设置
  jquery对象.html(“内容”)
  Jquery对象.text(“内容”)
文档操作
内部插入
append: a.append(c) 将c插入到a的内部标签后面
prepend: a.prepend(c):将c插入到a的内部的前面
appendTo: a.appendTo(c):将a插入到c的内部标签后面
prependTo: a.prepend(c):将a插入到c的内部的前面

外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面
a.insertAfter(c)
a.insertBefore(c)
删除
empty () 清空元素
remove() 删除元素
遍历数组
方式一:jquery对象 . each ( function( index , value ){} )
方式二: $.each( jquery对象,function(index,value){})

在jquery中创建元素

$(“<标签名>”).prop(属性).html(内容)

ajax

Jquery中的ajax

Jquery对象.load ( url, params , function ( 数据) { } );

★:$.get ( url , params , function(数据) { } , type ) ;

发送get请求的ajax

url:请求的路径

params:请求的参数参数为key\value的形式key=value {"":"","":""}

fn:回调函数参数就是服务器发送回来的数据

type:返回内容格式，xml,html, script, json, text, _default。以后用"json"

★:$.post ( url , params , function ( 数据 ) { } , type );

发送post请求的ajax

若结果为json格式, 打印返回值的时候是一个对象

例如若json为{"result":"success","msg":"成功"}

获取msg只需要参数.msg

var url = baseURL + "srexaminerule/list";
var params = {  "sidx": "", "order":"asc"}; 
$.post ( url , params , function ( data ) { 
    var list = data.page.list;
    for (var i=0;i<list.length;i++)
    {
        $("#select_id").append("<option value = "+list[i].ruleNo+">"+list[i].ruleName+"</option>");
    }				
} , "json" );

理解:

$.ajax([选项]);

选项的可选值:

url:请求路径

type:请求方法

data:发送到服务器的数据

success:fn成功以后的回调

error:fn异常之后的回调

dataType:返回内容格式经常使用json

async:设置是否是异步请求

例如:

$.ajax({