由于主要还是负责后端,所以前端很多东西都不熟悉,jQuery作为web开发必备技能,有很多知识点,老是记不清楚,所以在这边整理一下。

1.加载页面后执行

$(function(){
//程序段
})

2.点击事件

$("#xxx").click(function(){
//程序段
})

3.给元素添加class,或者改变class

$("#xxx").addClass("class1");
//点击时候改变样式
$("#aaa").click(function() {
$("#xxx").toggleClass("class1");
});

4.给元素的css,html属性赋值

$("#xxx").css("display","block");
$("#xxx").html("this is html<br/> this is html");

5.获取一个jquery元素

var a=$("#xxx");//获取id为xxx的jquery对象
var b=$(".xxx");//获取class为xxx的jquery对象

6.获取对象的值

$(".xxx").val();//文本框或者下拉框的值
$(".xxx").html();//对象的html内容
var sex=$("#radio1").is(":checked")?"男":"女";//radio1的值
var marry=$("#checkbox1").is(":checked")?"已婚":"未婚";//复选框的值

7.选择器

//基本选择器
$("#table1 tr:nth-child(even)").addClass("trOdd");
$("#divOne").val()//ID为divOne的元素
$(".divOne").val()//class为divOne的元素
$("div span").val()//div下的span元素,注意是空格隔开,表示下级元素
$(".class1 .class2").val()//class为class1下的class为class2的元素,同上
$("#divClass,span").val()//id为divClass或者span元素,都逗号表示或的关系
//层次选择器
$("div span").val();//div下的所有span,祖先跟后代关系,不管是几层嵌套,反正只要是div下的span都选择
$("div>span").val();//div下第一层的span,父子关系,注意只选中第一层span。
$("#divMid + div").val();$("#divMid").next("div").val();//id为divMid的下一个div元素
$("#divMid ~ div").val();$("#divMid").nextAll("div").val();//id为divMid后面的所有div元素
$("#divMid").siblings("div").val();//id为divMid的相邻的div元素

jquery技巧小结的更多相关文章

  1. jquery技巧总结

    jquery技巧总结一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootool ...

  2. PowerDesigner实用技巧小结(3)

    PowerDesigner实用技巧小结(3) PowerDesigner 技巧小结 sqlserver数据库databasevbscriptsqldomain 1.PowerDesigner 使用 M ...

  3. PowerDesigner实用技巧小结(2)

    PowerDesigner实用技巧小结 1.ORACLE数据库建模时,由于ORACLE的表名.字段名如果是小写会有一定的麻烦,需要将小写转化为大写? (1)在打开pdm的情况下,进入Tools-Mod ...

  4. CentOS系统中的passwd命令实用技巧小结

    这篇文章主要介绍了Linux系统中的passwd命令实用技巧小结,是Linux入门学习中的基础知识,需要的朋友可以参考下   先来回顾一下passwd命令的基本用法: Linux passwd命令用来 ...

  5. 风云流水 jQuery技巧总结 (转)

    jQuery技巧总结 (转) 一.简介 1.1.概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.m ...

  6. github搜索技巧小结

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. jquery技巧之让任何组件都支持类似DOM的事件管理

    本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...

  8. (译)你应该知道的jQuery技巧

    帮助提高你jQuery应用的简单小技巧. 回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide ...

  9. jQuery技巧

    回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide 简单的手风琴 使两个DIV同等高度 在浏览 ...

随机推荐

  1. java 冒泡排序与选择排序

    //冒泡排序 package test;public class Maopaosort {   public static void method(){  int[] arr=new int[10]; ...

  2. 网站出现service unavailable的解决方法

    特别提示:本文的教程仅适合采用windows服务器的IIS组件上操作,service unavailable是许多网站会经常遇到的问题,希望对大家有用. 昨天一小段时间网站出现了service una ...

  3. iOS开发中获取视图在屏幕上显示的位置

    在iOS开发中,我们会经常遇到一个问题,例如,点击一个按钮,弹出一个遮罩层,上面显示一个弹框,弹框显示的位置在按钮附近.如果这个按钮的位置相对于屏幕边缘的距离是固定的,那就容易了,可以直接写死位置.可 ...

  4. 堆排序HeapSort

    堆排序,顾名思义,是采用数据结构堆来进行排序的一种排序算法. 研究没有规律的堆,没有任何意义.特殊的堆有最大堆(父节点值大于等于左右字节点值),最小堆(父节点值小于等于子节点值).一般采用最大堆来进行 ...

  5. Spring MVC工作原理

    1. 客户端请求提交到DispatcherServlet2. 由DispatcherServlet控制器查询一个或多个HandlerMapping,找到处理请求的Controller3. Dispat ...

  6. Machine Learning &&Deep Learning&&Sklearn

    参考资料:https://github.com/ty4z2008/Qix/blob/master/dl.md https://morvanzhou.github.io/ 如图,先了解一下都有什么模型方 ...

  7. Mysql的学习笔记(一)--检验数据库是否安装成功以及一些入门的简单的dos命令

    一:如何检验数据库是否安装成功: 1:以管理员的身份打开命令提示符,具体如何用管理员的身份打开请参考下面 https://jingyan.baidu.com/article/e73e26c0f87c2 ...

  8. (三):C++分布式实时应用框架——系统管理模块

    C++分布式实时应用框架--系统管理模块 上篇:(二): 基于ZeroMQ的实时通讯平台 一个分布式实时系统集群动辄上百台机器,集群的规模已经限定这将是一个"封闭"的系统.你不可能 ...

  9. 关于vue 框架与后台框架的混合使用的尝试

    这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 ph ...

  10. socket.io 入门篇(一)

    本文原文地址:https://www.limitcode.com/detail/591b114bb1d4fe074099d9c9.html 前言 本篇介绍使用node.js模块组件socket.io实 ...