1、各种常见的选择器。
2、对于属性的操作。【重点】
2.1)获取或设置属性的值: prop();
2.2 ) 添加、删除、切换样式:
addClass/removeClass/toggleClass
2.3 ) 获取或设置页面元素的内容:
$('a').html() ; //获取元素内容(并解析其中的html标签,相当于:innerHTML)
$('a').text(); //获取元素内容(不解析其中的html标签,相当于:innerText)
$('a').val(); //获取表单元素的内容(相当于:页面元素.value)
3、jquery的事件处理:
一般有四种方法。
① $('btn').click(function(){....})
② $('btn').on('click',function(){....})
③ $('btn').bind('click',function(){....})
④ $('btn').one('click',function(){....})

//onload:
$(document).ready(function(){
....
})
简写为:
$(function(){
...
})

例子:省级连动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>省市级联</title>
<!--加载js库-->
<script src="js/myjs.js"></script>
</head>
<body>
请选择省份:
<select id="province" onchange="changeProvince(this.value)">
<option value="湖南省">湖南省</option>
<option value="海南省" >海南省</option>
<option value="湖北省" >湖北省</option>
<option value="广东省" selected>广东省</option>
</select>
请选择城市:
<select id="citys"></select>
</body>
</html>
<script>
//第一步:声明省份对应的城市
//第一种组织数据的方式(使用数组)
// var provinces = [];
// provinces['湖南省'] = ['长沙','岳阳','常德','株洲','湘潭'];
// provinces['海南省'] = ['海口','三亚','文昌','琼州'];
// provinces['湖北省'] = ['武汉','黄冈','襄阳','十堰','荆州'] ;
// provinces['广东省'] = ['广州','深圳','珠海','佛山','东莞'];
//第二种组织数据的方式(使用json对象)
var provinces = {
'湖南省':['长沙','岳阳','常德','株洲','湘潭'],
'海南省':['海口','三亚','文昌','琼州'],
'湖北省':['武汉','黄冈','襄阳','十堰','荆州'],
'广东省':['广州','深圳','珠海','佛山','东莞']
}
//第二步:改变省份时触发onchange事件,显示对应的城市
function changeProvince(v){
//2.1)根据传递过来的省份得到省份对应的城市数组
var citys = provinces[v];
//清空城市下拉列表框
$('citys').options.length = 0;
//2.2)遍历城市数组并为id="citys"的列表框赋值
for(var i in citys){
//下面的参数1:代表文本 参数2:代表option的值
$('citys').options.add(new Option(citys[i],citys[i]));
}
}
//第三步:当窗体加载完毕时,应该让被选择的省份的城市加载到citys下拉框中
window.onload=function(){
changeProvince($('province').value);
}
</script>

2.表格的复制:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style> #tables{
width: 1000px;
height: 100px;
margin:0 auto;
border:1px solid pink;
}
tr td{
border:1px solid red;
text-align:center;
}
a{
text-decoration:none;
}
#tr1{
text-align:right;
}
#tr3{
display: none;
} </style>
<body>
<table id="tables">
<tr>
<td id="tr1" colspan=5><a href="#" onclick="addStudent()">添加</a></td> </tr>
<tr id="tr2">
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr id="tr3">
<td>
<input type="text" >
</td>
<td>
<input type="text">
</td>
<td><input type="text"></td>
<td><input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女</td>
<td onclick="dele(this)"><a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
<script src="js/j.js"></script>
<script>
function addStudent() { //取到要复制表格的id
var va=$("tr3"); //得到单元集合
var vas=va.cells;
//插入数据
var tr=$("tables").insertRow(); for(var i=0;i<vas.length;i++){
var emnoy=tr.insertCell();
emnoy.innerHTML=vas[i].innerHTML;
}
// var tr=va.cloneNode(true);
// tr.style.display="table-row";
// //2.将复制的值添加到table中
// $("tables").appendChild(tr);
}
//删除
function dele(s){
//得到要删除的行
var tr=s.parentNode;
$("tables").deleteRow(tr.rowIndex);
}
</script>

jQuery最重要的知识点的更多相关文章

  1. AJAX、JQUERY 工作遇到的知识点

    泽浜商城关联公司知识点总结 1.关联公司的时候,根据用户ID,在数据库中用户表中关联公司ID,公司的列表通过查找公司表 ,然后抓取所有公司的名称和ID.关联的时候只需要根据公司name和ID进行关联. ...

  2. Jquery 随便写些知识点

    针对jQuery随便写些觉得还挺实用的一些东西,也没系统的去理一番,只是想到哪写到哪,写的不完全也请多见谅. jQuery和其他javascript库产生$符号冲突了?$符号想必用jQuery的人都不 ...

  3. jQuery 重新温习 遗忘知识点

    解决jQuery和其他库的冲突 当把jQuery和其他JavaScript库(例如Prototype.MooTools或YUI)一起使用时 <script> jQuery.noConfli ...

  4. JS自定义对象,正则表达式,JQuery中的一些知识点

    一:自定义对象 1.基本概念:①对象:包含一系列无序属性和方法的集合.②键值对:对象中的数据是以键值对的形式存在的,以键取值.③属性:描述对象特征的一系列变量.[对象中的变量]④方法:描述对象行为的一 ...

  5. jQuery中易混淆知识点总结(持续更新)

    find()与children() <body> <ul class="level-1"> <li class="item-i"& ...

  6. jQuery源码学习感想

    还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...

  7. Jquery:强大的选择器<一>

    今天回家之后,学习的是Jquery的选择器.选择器作为Jquery的优势之一,确实让我感觉到了它的强大.Jquery选择器分为基本选择器.层次选择器.过滤选择器和表单选择器,下面我一一介绍这四种选择器 ...

  8. 前端 ---jQuery的补充

    15-jQuery补充   jquery内容补充 jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件.jqueryUI知识点 jqueryUI 官网: https://jqueryu ...

  9. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

随机推荐

  1. 数据结构复习之C语言malloc()动态分配内存概述

    #include <stdio.h> #include <malloc.h> int main(void) { ] = {, , , , }; // 计算数组元素个数 ]); ...

  2. Java将科学计数法数据转为字符串

    如果Excel单元格数据类型为数值,数字太长会变成科学计数法,Java读取的时候使用如下方法可将其转为字符串 BigDecimal bd = new BigDecimal("3.000085 ...

  3. 五款app原型设计工具对比

    五款app原型设计工具对比 Proto.io, Pixate, Origami, Framer & Form 本文由Panblack 翻译,原文作者 Tes Mat 我用五款“高保真”原型设计 ...

  4. 使用 Python 设置数据的路径

    使用 Python 设置数据的路径 编程语言(如 Python)将反斜线 (\) 用作转义字符.例如,\n 表示换行符,\t 表示制表符.指定路径时,可使用正斜线 (/) 代替反斜线.使用两条反斜线( ...

  5. IntelliJ、ReSharper 6折 加入慧都“惊喜惠”

    慧都2013岁末回馈惊喜不断!著名的软件开发公司JetBrains旗下所有产品加入"惊喜惠"活动环节, JAVA IDE——IntelliJ IDEA,.NET效率工具集——ReS ...

  6. mybatis3 step by step 快速上手

    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/6895617.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 官方网站 h ...

  7. WinDbg:栈帧的含义

    转自:http://www.cppblog.com/weiym/archive/2012/06/07/177958.html 栈从高地址向低地址生长, __stcall和__cdecl调用约定都是函数 ...

  8. Selenium2学习(十三)-- JS处理滚动条

    前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...

  9. 前端:Bootstrap框架

    一,bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局, ...

  10. SiteMesh配置下载使用(简单介绍)

    简单介绍 SiteMesh 是一个网页布局和修饰的框架,利用它可以将网页的内容和页面结构分离,以达到页面结构共享的目的. Sitemesh是由一个基于Web页面布局.装饰以及与现存Web应用整合的框架 ...