由于主要还是负责后端,所以前端很多东西都不熟悉,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. 使用javax.script包实现Java设置JS脚本中的变量

    下面例子中,我们通过javax.script包ScriptEngine.put()方法设置JS脚本中的变量,JS把所有在线用户输出. package ajava.code.javase; import ...

  2. linux学习笔记二

    进程(process)是程序实体运行的过程,是系统进行资源分配和调度的独立单位,或者说是一个程序在处理机上的一次执行活动. 区分一下进程和程序 1.0 程序是一个静态指令的集合:而进程是一个程序的动态 ...

  3. android wear开发:为可穿戴设备创建一个通知 - Creating a Notification for Wearables

    注:本文内容来自:https://developer.android.com/training/wearables/notifications/creating.html 翻译水平有限,如有疏漏,欢迎 ...

  4. JavaWeb框架SSH_Struts2_(一)

    1. Struts2 框架入门及结合Intellj idea完成登陆demo测试   1.1  本章目录: 框架入门 Struts2简介 Struts2入门案例 Struts2执行流程分析 2. 具体 ...

  5. SQL 数据操作(实验六)

    SQL 数据操作 emp.dept 目标表结构及数据 INSERT 命令的使用与结果验证 2.1把一名新来雇员信息插入到EMP表中:雇员号:1011 姓名: 王晓明 入职日期:今天 ```insert ...

  6. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  7. nodejs+mongoose+websocket搭建xxx聊天室

    简介 本文是由nodejs+mongoose+websocket打造的一个即时聊天系统:本来打算开发一个类似于网页QQ类似功能的聊天系统,但是目前只是开发了一个模块功能 --- 类似群聊的,即一对多的 ...

  8. ip地址与整数相互转换

    一.将ip地址转成long数值 将IP地址转化成整数的方法如下: 1.通过String的split方法按.分隔得到4个长度的数组 2.通过左移位操作(<<)给每一段的数字加权,第一段的权为 ...

  9. ES6这些就够了

    刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...

  10. Webapi调用

    C# webapi 路由名称不能跟area名称相同,否则出现404 action找不到的问题???