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. 【代码笔记】Java文件的输入输出（1）——Java.io包的初步理解

    Java里面文件的输入输出全部在java.io包里面. Java.io包里面所有的类都需要掌握. java.io包里面所有的东西都在上面了. 包里面的相关类.异常等树关系如下 类分层结构 java.l ...

  2. Nodejs 如何制作命令行工具

    # 全局安装,安装报错是需要前面加上sudo $ sudo npm install -g xxxb # 输出帮助 $ xxxb -h Usage: xxxb 这里是我私人玩耍的命令哦![options ...

  3. .NET开源工作流RoadFlow-表单设计-下拉列表

    下拉列表即<select></select>标签,相关选项与单选按钮组相同: 是否添加空项:即在下拉列表的开头是否添加一个空的选项<option value=" ...

  4. JPA 使用 Specification 复杂查询和 Criteria 查询

    转自:https://blog.wuwii.com/jpa-specification.html 前言 JPA 给我们提供了基础的 CURD 的功能,并且用起来也是特别的方便,基本都是一行代码完成各种 ...

  5. BSTR和CComBSTR使用指南

    msdn关于bstr的分配和释放的注意事项:http://msdn.microsoft.com/zh-cn/library/cc485262(VS.71).aspx msdn对 CComBSTR 的使 ...

  6. SharePoint2010 HTTP Error 503. The service is unavailable 解决方法

    1.更改系统管理员用户密码前提 因为更改系管理员用户密码会影响到 "SharePoint2010"正常运行,所在尽量不要更改系统管理员用户的密码, 必须更改密码的话,需要注意以两点 ...

  7. day014-反射、注解

    1. Junit 1.1什么是Junit Junit是Java语言编写的第三方单元测试框架(工具). 1.2单元测试 在Java中,一个类就是一个单元. 单元测试:开发中编写的一小段代码,用来检测类中 ...

  8. Vue项目中引入mockjs

    前提:创建好的vue项目 前言: 为什么引入mockjs:为了实现前后端分离,开发工作可以异步进行 其他工具:axios 一般的前后端交互过程:前端 --> ajax请求 --> 网络协议 ...

  9. chrome不能用百度网盘极速上传插件的解决办法

    进入chorme设置中,选择隐私设置中的内容设置,插件>自动运行,然后管理例外情况>添加“[*.]baidu.com”,后边当然选择允许,然后重启浏览器,OK了

  10. 面向对象编程（OOP）、面向组件编程（COP）、面向方面编程（AOP）和面向服务编程（SOP）

    http://blog.csdn.net/hjf19790118/article/details/6919265 1.什么是面向对象编程(Object-Oriented Programming)? 面 ...