Web前端:JQuery摘要

一、jquery使用:

1.与服务器端交互:
节点.load("服务器端url",{参数名:'参数值',参数名:'参数值'},function(服务器传回来的data,status,xmlHttp对象){
    
});  //将该url中的页面内容装载到该节点中
XMLHttpRequest xmlHttp = $.get("服务器端url",{参数名:'参数值',参数名:'参数值'},function(服务器传回来的data,服务器传回来的status){
    处理代码
});
$.post("服务器端url",$("#form表单id").serialize(),function(服务器传回来的data,服务器传回来的status){
    处理代码
});//也可和get一样传参
$.getJSON("服务器端url",{参数名:'参数值',参数名:'参数值'},function(服务器传回来的data,服务器传回来的status){
    data已经是JSON格式了,
});
jQery解析xml文件:
$.get("xml文件",function(xml,textstatus){ //xml为对象,textstatus为返回状态,成功时才执行方法内部代码
    节点集 = $(xml).find("节点名");  //查找xml文档中该名的节点集
});

2.注册事件:
$(document).ready(function(){  //页面装载时运行的方法
   执行代码;
});
节点数组或节点.click(function(){  //给节点注册单击事件,改变值时发生:change();双击时发生:dbclick();
   执行代码;
});
节点数组或节点.focus(function(){  //给节点注册获得焦点事件
   执行代码;
});
节点数组或节点.blue(function(){  //给节点注册失去焦点事件
   执行代码;
});
节点数组或节点.keyup(function(){  //给节点注册按下键盘时触发的事件
   执行代码;
});
节点数组或节点.mouseover(方法);  //鼠标进入时触发的事件
节点数组或节点.mouseout(方法);  //鼠标离开时触发的事件
节点.unbind("事件名");  //移除节点上的该名事件
this.clientX; //鼠标所在的x轴位置数值
this.clienty; //鼠标所在的y轴位置数值

3.操作节点:
节点.offset();  //得到该节点的top和left的偏移数值
this.defaultValue;  //得到文本框默认值
$;  //代表jQuery对象
jQuery对象或节点[0];   //将jQuery对象或节点转换成DOM对象或节点
jQuery对象或节点.get(0); //同上
$(DOM对象或节点);  //将DOM对象或节点转化成jQuery对象或节点
$("#id值"); //得到该id所在的节点
$(this);  //得到触发事件的节点
节点.parent;  //得到该节点父节点
节点.html();  //得到该节点第一个html内容
节点.text();  //得到该节点文本内容
$.trim("字符串");  //去掉空格
节点集 = $("节点名");  //得到所有该名的节点
节点集 = $(".class值");  //按节点class查,得到所有该class的节点集
节点集 = $("*");  //返回所有节点集
节点集 = $("节点名,#id值,.class值");  //将这三个查找到的结果合并到节点集中返回
节点集.each(function(){
    遍历节点集;
});
$.each(节点集,function(){
    遍历节点集;
});
$.each(节点集,function(i,obj){ //i为当前循环索引值,obj为当前循环的对象
    遍历节点集;
});
节点集.each(function(i,obj){
    遍历节点集;
});
$("节点名:visible");  //得到所有可见的该节点集
$("节点名:hidden");    //得到所有隐藏的该节点集
以下为表单用的多:
节点.text();  //得到该节点的文本内容(只是下拉列表的值)
节点.val(); //得到该节点的value属性值(所有表单的值)
节点.val(["空格或其他不存在的值"]);  //让下拉列表中全部选中的值处于不选状态 
节点.val("值");  //设置该节点的值
节点.val(["值1","值2"]);  //设置该节点的值,设置多个时要有中括号
$("节点名:enabled");  //得到可用节点集
$("节点名:disabled");  //得到不可用节点集
$("节点名:checked");  //得到单复选框中所有被选中的节点集
$("节点名:selected");  //得到select中所有被选中的节点集
$("select[id='id值']>option:checked");  //得到指定id的select节点中所有被选中的option节点集
节点集 = $(":text");  //得到表单中所有text节点集
$(":checkbox");  //得到表单中所有checkbox节点集

4.操作节点属性:
节点.attr("属性名");   //得到该属性值
$("节点名[属性名]");   //得到该属性值
$("节点名[属性名=值]");   //得到属性值等于此值的节点
$("节点名[属性名!=值]");   //得到属性值不等于此值的节点
$("节点名[属性名^=值]");   //得到属性值以此值开头的节点
$("节点名[属性名$=值]");   //得到属性值以此值结束的节点
$("节点名[属性名*=值]");   //得到属性值包含此值的节点
$("节点名[id名][属性名*=值]");   //得到id属性且属性值包含此值的节点
节点.addClass("class值"); //为节点增加class属性值
节点.removeClass("class值"); //删除节点的class属性值
节点.toggleClass("class值");  //设置节点class属性值
节点.hasClass("class值");  //判断节点的class属性值是否为此值

5.操作子节点:
节点集 = 节点.children("子节点名");  //得到该节点下所有该名的子节点
节点集 = $("节点名 子节点名");  //得到节点下所有该名的节点(包括子及孙子)
节点集 = $("节点名>子节点名");  //得到该节点下所有该子节点,不包含孙子节点
$("节点 :nth-child(even/odd)");  //得到所有该节点子节点集中索引值等于奇或偶数的子节点
$("节点 :nth-child(3)");  //得到该节点的子节点集中索引值等于3的子节点(从1开始)
$("节点 :nth-child(even/odd)");  //得到所有该节点子节点集中索引值等于3的子节点
$("节点 :first-child");  //得到节点下第一个子节点
$("节点 :last-child");  //得到节点下最后一个子节点
$("节点 :only-child");  //如果节点下只有一个子节点,则得到该节点

6.操作同层兄弟节点:
$("节点名:first");  //得到所有该节点集中第一个节点
$("节点名:last");  //得到所有该名节点集中最后一个节点
节点集 = $("节点名:not(.class名)");  //得到所有该名节点集中class名不为这个名的节点
节点集 = $("节点名:even");  //得到所有该名节点集中偶数节点
节点集 = $("节点名:odd");  //得到所有该名节点集中奇数节点
节点集 = $("节点名:gt(3)"); //得到所有该名节点集中索引值大于3
节点集 = $("节点名:lt(3)"); //得到所有该名节点集中索引值小于3
节点 = $("节点:eq(1)");  //得到所有该名节点集中索引值为1的节点(从0开始)
节点 = $("#id值+后面节点名");  //得到该id所在节点的下一个同层节点
节点集 = $("#id值~后面节点名");  //得到该id对应节点后面所有该名的同层节点集()
节点集 = $("#id值").siblings("节点名");  //得到该名的所有同层节点集
节点.next();  //得到后面所有同层节点

$("节点:contains('文本')");  //得到包含有该文本的节点集
$("节点:empty");  //得到不包含文本或子元素的节点集
$("节点:has(.class名)");  //得到含有该class的节点集
$("节点:parent");  //得到含有子内容的节点集
$("节点:not contains('文本')");  //得到不包含该文本的节点集
$("节点:hidden");  //得到所有隐藏节点集
$(":header");  //得到所有标题节点,如h1
$(":animated");  //得到正在执行动画的节点

7.设置效果:
节点.is(":hidden");  //判断该节点是否隐藏节点
节点集.toggle("show");  //显示或隐藏当前节点集(点一下显示,再点一下隐藏)
节点.attr("style","display:none");  //设置节点css,使节点显示
节点.css("display","block"); //设置节点css,使节点显示
节点.css("display","none"); //设置节点css,使节点隐藏
节点或节点集.css("background","red");  //设置节点css,改变背景色
节点.show("slow"); //将该节点动态显示出来
节点.hide("slow"); //将该节点动态隐藏
节点.fadeIn("slow"); //将该节点动态显示出来
节点.fadeOut("slow"); //将该节点动态隐藏
节点或节点集.slideToggle("fast或slow或normal或毫秒值");  //将节点动态隐藏

8.创建节点:
节点 = $("<节点名></节点名>");  //创建节点
节点.attr("属性名","属性值");  //设置属性
节点.text("文本");  //创建文本节点
父子插入:
父节点.append(节点);  //将创建的节点加入父节点最尾部
节点.appendTo(父节点);  //将创建的节点加入父节点最尾部
节点.appendTo(父节点);  //将创建的节点加入父节点最尾部
同级插入:

9.删除节点:
$("id值").remove();  //删除该id值对应的节点
$("父id值").empty();  //删除该父节点下所有子节点

10.复制节点:
要复制的节点.clone().appendTo("目标节点");  //复制节点到目标节点位置,但不复制该节点的事件
要复制的节点.clone(true).appendTo("目标节点");  //复制节点到目标节点位置,事件也复制

11.替换节点:
替换的节点.replaceWith(要替换的节点);  //将一节点替换成另一节点
替换的节点.replaceAll("要替换的节点名");  //将该名节点集全部替换成另一节点

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
------------------------课程介绍------------------------ 第1章 HTML、CSS、布局 第2章 JavaScript 介绍 第3章 作业讲解、编程的选择结构和函数返回值和库、css初步、函数参数 第4章 数组和字符串、作业讲解、debug大法 第5章 作业讲解、如何方便地用测试写代码、break&continue;语句、object、读文档、递归 第6章 网页中引入JavaScript代码、DOM、事件 第7章 数据类型、多行字符串和转义符号、高阶函数、匿名函数 第8章 事件委托、时间操作、标签的可编辑属性、(本地存储) 和 JSON 格式 第9章 作业选讲、抽象化, 如何封装功能, 如何组织代码结构、变量命名的方法 第10章 HTTP 协议 和 AJAX、DOM 事件机制, 事件冒泡和事件捕获 第11章 面向对象、ajax、作业和代码思路 第12章 找工作基础、ajax作业、api封装 第13章 jQuery 常见用法、课程重点、常用组件例如弹窗的制作 第14章 作业讲解 第15章 log的要素、git和github、js的一些高级内容 bind apply call、前端CSS框架Bootstrap和Pure 第16章 JS的历史现状和未来、什么是ES6有什么新东西、CSS最基础的套路 第17章 前端工程师 第1章 网址组成、端口、HTTP协议、web服务器 第2章 作业讲解、服务器框架、html和getpost传递参数 第3章 基本框架、框架解释、model解释 第4章 cookie讲解、session讲解、作业讲解和调试技巧 第5章 todo程序、todo的更新和删除、带用户功能的todo程序 第6章 jinja模板套路、类和其他、作业讲解 第7章 摘要算法、加盐保护密码-数据库索引原理、微博程序 第8章 传统数据库、sql注入和mongo安装使用、mongo日常使用 第9章 前端基础、dom和事件、js todo 第10章 ajax 第11章 css 第12章 linux基础 第13章 flask框架 第14章 使用sshkey连接linux服务器、rsa原理和git软件使用、使用git软件同步本地和服务器代码 第15章 flask的session和cookie、flask留言板&web;后端栈、flask博客套路 第16章 抓包&爬虫基础、爬虫精讲、编码&API; 第17章 数据结构基础和算法分析原理、链表队列栈和四大结构、平衡二叉搜索树和哈希表 第18章 bbs基础、bbs标题和回复、bbs其他 第19章 web安全和应对、服务器的配置文件处理、开发论坛的板块功能 第20章 论坛收尾、迁移mongo、性能 第21章 操作系统、python高级 第22章 python高级技巧、rpc实现和vagrant 第23章 架构、分布式、性能、聊天室项目 第24章 简历和工作、工作后的计划、学习的计划

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值