由于主要还是负责后端,所以前端很多东西都不熟悉,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工程师学习线路图

  2. 图片验证码的JAVA工具类

    我们平时开发时经常会遇到需要图片验证码,基础的验证码包括了数字.字母.甚至可能有汉字.下面我给出一个简单的工具类. package com..ankang.tony.util; import java ...

  3. 有关数据传输GET和POST的方法的区别

    有关前后端数据交互,主要是通过走http协议通过post或get的方法,拿angularJS来说:通过JS来发送http请求调用相关接口: $scope.apostDate=function(){ $ ...

  4. redis源码分析之有序集SortedSet

    有序集SortedSet算是redis中一个很有特色的数据结构,通过这篇文章来总结一下这块知识点. 原文地址:http://www.jianshu.com/p/75ca5a359f9f 一.有序集So ...

  5. spring boot系列02--Thymeleaf+Bootstrap构建页面

    上一篇说了一下怎么构建spring boot 项目 接下来我们开始讲实际应用中需要用到的 先从页面说起 页面侧打算用Thymeleaf+Bootstrap来做 先共通模板页 <!DOCTYPE ...

  6. mysql b-tree 索引下联合索引的顺序测试方案

    使用联合索引需要注意的列顺序比如在使用select * from user where x=1 and y=2;的时候,应该需要建立的索引可能是 add key(x,y)如何确定索引的顺序一般经验而言 ...

  7. vue.js的学习中的简单案例

    今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...

  8. 状态压缩- Brackets

    标签: ACM 题目: We give the following inductive definition of a "regular brackets" sequence: t ...

  9. ssh免密验证,shell批量设置

    ssh免密验证,shell批量设置 #ssh免密验证,shell自动设置 echo '#!/bin/sh . /etc/init.d/functions [[ -f /usr/bin/expect ] ...

  10. codeforces 887A Div. 64 思维 模拟

    A. Div. 64 time limit per test 1 second memory limit per test 256 megabytes input standard input out ...