####JQuery的基本语法

<!--导入JQuery文件-->

<script src="js/jquery-3.1.1.min.js">

    /*带min的是压缩后的JQuery*/

</script>

<!--JQuery文档就绪函数

文档就绪函数：为了防止文档在完全加载（就绪）之前运行JQuery

$(document).ready(function(){ ---jQuery functions go here --- })

-->

<script type="text/javascript">

    // hide隐藏元素

    // show显示元素

    $(document).ready(function(){

        $('p').hide();

    });

    //文档就绪函数 ：简化

    $(function(){

        $('p').hide();

    })

</script>

<body>

<p>这是p标签的第一段内容</p>

<h2>这是p标签的第二段内容</h2>

<!--<script type="text/javascript">

    // hide隐藏元素

    // show显示元素

    $('p').hide();

</script>-->

</body>

####DOM节点操作 创建和删除

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

    $(function(){

        //添加节点

        var table = $("<table><tr>tr内容</tr></table>");

        $("div").append(table);

    })

    //删除节点

    $(function(){

    var table = $("<table id='t'><tr>tr内容</tr></table>");

    $("div").append(table);

    table.remove();

    //克隆

    table.clone().appendTo("div");

    })

</script>

<body>

<div></div>

</body>

####CSS操作 循环转播

<!--引入jquery-->

<style type="text/css">

    div{

        height: 300px;

        width: 300px;

        background-color: orange;

    }

    .a{

        background-color: blue;

    }

</style>

<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

    $(function(){

        $("#d").mouseover(function(){

            $(this).toggleClass('a');

            //$(this).addClass('a');

        }).mouseout(function(){

            $(this).toggleClass('a');

            //$(this).removeClass('a');

        });

    })

</script>

<body>

<div id="d">

    sdkfjs

</div>

</body>

####CSS操作

<!--引入jquery-->

<style type="text/css">

   div{

      height: 300px;

      width: 300px;

      background-color: orange;

   }

   .a{

      background-color: blue;

   }

</style>

<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

   $(function(){

      $("#d").mouseover(function(){

         $(this).addClass('a');

      }).mouseout(function(){

         $(this).removeClass('a');

      });

   })

</script>

<body>

   <div id="d">

      sdkfjs

   </div>

</body>

####通过jQuery修改CSS样式

    <script src="js/jquery-3.1.1.min.js"></script>

    <script type="text/javascript">

       $(function(){

           //一个属性

/*           $("div").css('background-color','red');*/

           //多个属性

           $("div").css({'background-color':'red','height':'100px',"width":"50px"});

       })

    </script>

<div>

    div中的内容

</div>

####操作元素属性

    <script src="js/jquery-3.1.1.min.js"></script>

    <script type="text/javascript">

        $(function(){

            //获取input的name属性值

/*            alert($('input').attr('name'));*/

            //修改input的name属性值

/*            $("input").attr('name','name被修改的属性值');

            $("input").attr('type','password');

            $("input").attr('id','text');*/

            //一次性修改以上三个内容

            //修改元素的所有属性值

            $("input").attr({'name':'name值','type':'password','id':'id值'})

            //多个属性值一起修改，调用attr方法，把所有要修改的属性放在{ }中，属性之间用 , 分隔

            //属性名与属性值之间用 : 隔开

        })

    </script>

<body>

<input type="text" name="ipt" value=""/>

</body>

####解决多库冲突

<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

   $(function(){

      //放弃$符号

      jQuery.noConflict();

      jQuery("#a").html('sddsdsdfsdfs')

   })

</script>

<body>

   <div id="a"></div>

</body>

####JS对象与JQuery对象相互转换

    <script src="js/jquery-3.1.1.min.js"></script>

    <script type="text/javascript">

        $(function(){

            //原生的JS对象与JQuery对象不是一个概念，二者不可互相调用

            var d = document.getElementById('d');

/*            //JS的方式添加内容

            d.innerText = '添加的内容';*/

            //原生DOM（JS对象）转换为JQuery对象：$(原生对象)

            $(d).html('将d放在$符号当中转换');

            //JQuery方式

            var d = $('#d');

            //JQuery的方法调用ID为d的对象

            d.html('JQuery添加的内容');

            var e = $("#e");

            //这个不能实现

            // e.innerText('JQuery对象不能直接调用JS的原生方法');

            //JQuery对象转原生对象：$(...)[0]  转原生对象用下标，只能用下标为0转换。

            e[0].innerText('JQuery对象不能直接调用JS的原生方法');

            //方法二： $(...).get(0)

            e.get(0).innerText('通过get方法添加的内容');

        })

    </script>

<body>

<div id="d"></div>

<div id="e"></div>

</body>

JQuery——相关练习的更多相关文章

  1. JQuery 相关用法和操作

    01-JQuery 基础语法: 1.使用JQuery必须先导入JQuery.x.x.xjs文件. 2.JQuery中的选择器: $(选择器).函数() ① $是JQuery的缩写,既可以使用JQuer ...

  2. jQuery相关知识总结

    1 encodeURIComponent(city)处理js传值乱码问题 2 总体概述 以后项目如果没有特殊情况,一般采用jQuery作为最基础的公共底层库. 另外对于前端的javascript相关的 ...

  3. 【转】JQUERY相关的几个网站

    作者:Terry li - GBin1.com 1. John Resig - http://ejohn.org 毫无疑问,jQuery 的缔造者的博客是你首先必须关注的. 2. Filmament ...

  4. jQuery相关面试题

    1 你在公司是怎么用jquery的? 答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,复选框啊,表单啊,ajax啊,事件等 配置Jquery环境 下载jqu ...

  5. 【summary】JQuery 相关css、ajax、数据操作函数或方法

    总结一下JQuery常用的函数方法,更加系统的整理一下. JQuery遍历的一些函数: 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集 ...

  6. 学习MVC和jQuery相关的书

    Insus.NET还是较喜欢看纸质书.学习ASP.NET MVC和jQuery编程,Insus.NET为了加强功力,决定再购买几本相关的书:   十月份时,还买了一本: 前两本快递刚送到手,后一本已经 ...

  7. JQUERY相关

    https://github.com/mythz/jquip/ http://zeptojs.com/ http://devework.com/jquery-builder.html http://p ...

  8. jquery学习笔记----jquery相关的文档

    http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...

  9. jquery相关校验以及jquery其他知识总结

    //************jquery校验**********/ //数字校验(整数)function isDigit(str) { var patrn=/^[0-9]*$/; return pat ...

  10. jquery 相关class属性的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Mac付费软件免费获取

    很简单,充分利用微信公众号和某宝即可 1.微信公众号里面会分享"XX软件下载"或破解教程只要打开微信搜索就可以搜到. 顺便推荐几个公众号"GameRoom".& ...

  2. 第八章节 BJROBOT hector 算法构建地图【ROS全开源阿克曼转向智能网联无人驾驶车】

    1.把小车平放在地板上,用资料里的虚拟机,打开一个终端 ssh 过去主控端启动roslaunch znjrobot bringup.launch. 2.在虚拟机端打开一个终端,ssh 过去主控端启动r ...

  3. win7-win10 禁用IPV6临时地址

    IPV6临时地址本意是保护设备隐私,但有时候需要暂时禁用的情景下指令 netsh interface ipv6 set privacy state=disable 启用则修改最后的状态值为enable ...

  4. 转 linux终端 字符界面 显示乱码 .

    方法一:配置SSH工具 SecureCRT中文版配置 [全局选项]→[默认会话]→[编辑默认设置]→[终端]→[外观]→[字体]→[新宋体 10pt CHINESE_GB2312]→[字符编码 UTF ...

  5. 记一次使用Asp.Net Core WebApi 5.0+Dapper+Mysql+Redis+Docker的开发过程

    #前言 我可能有三年没怎么碰C#了,目前的工作是在全职搞前端,最近有时间抽空看了一下Asp.net Core,Core版本号都到了5.0了,也越来越好用了,下面将记录一下这几天以来使用Asp.Net ...

  6. 基于腾讯云存储网关 CSG 实现视频在线转码分发

    一.背景 随着越来越多的传统业务云化和云端业务发展,数据上云和云端数据处理领域的需求爆发式增长.腾讯云存储网关CSG提供一键部署开箱即用的便捷模式,深度结合COS对象存储生态,为用户提供方便快捷的数据 ...

  7. requests基础封装-get/post封装

     字符串转化成字典: convert_to_dict.py: import jsonstr1 = '{"grant_type":"client_credential&qu ...

  8. 【Oracle】delete表后commit后怎么找回，方法

    有些时候,不小心删除了一些需要的表,而且数据库不能停止,只能一直运行下去,这样的话很麻烦 下面介绍的方法就是删除表后通过时间戳后者scn找回删除的数据 模拟实验环境: 创建一个新表 SQL> c ...

  9. 机器学习7-模型保存&无监督学习

    模型保存和加载 sklearn模型的保存和加载API from sklearn.externals import joblib 保存:joblib.dump(rf, 'test.pkl') 加载:es ...

  10. 2V升3.3V芯片，输出500MA，低功耗10uA解决方案

    2V的输入电压其实非常少,一般都是镍氢电池1.2V,干电池1.5V,来给玩具,MCU单片机,模块啊,等等供电.不过2V的供电电源或者设备确实是不常见的. 一般2V升3.3V,需要升压芯片PW5100即 ...