jquery可以说是js的封装,大多数情况下jquery比js简单,它们两个可以相互写对方的里面,使用jquery需要导入jquery文件。

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

jquery文件名格式为,jquery-版本号[.min] .js    其中min表示压缩版
 
jquery与js相似,所以他们的操作基本一一对应,只是方式不同:
主要操作有:
找对象:通过id、name、className、TagName找对象
操作对象:操作属性:取值,赋值,删除
                 操作样式:获取样式,设置样式
                 操作内容:
                                表单元素:获取内容,添加内容
                                非表单元素:获取内容,添加内容
                 操作元素:添加子元素、删除元素
添加事件:添加绑定事件、解除绑定事件
 
一一对应:
HTML页面
<div id="one"><span>one</span></div>
<div class="test" bs="aa">two</div>
<div class="test">three</div>
<div class="test">four</div>
<input type="text" name="uid" bs="aa" id="uid" />
<input type="button" id="btn" value="取消绑定" />
<input type="button" id="add" value="绑定事件" />
 
Jquery代码:都写在script里面
<script type = "text/javascript">
//$在jquery中专门用来做选择,相当于选择器,括号里面是根据什么来选,后面点事件
//这里的意思是说,给当前页面加了一个事件是加载完成,就是当前页面加载完成后执行里面的function(匿名函数)
$(document).ready(function(e){       
        //Jquery与js找对象
        //JS通过id、name、className、TagName找对象
        var a = document.getElementById("one");                //id
        var b = document.getElementsByClassName("test");//classname
        var d = document.getElementsByTagName("div");    //tagname
        var c = document.getElementsByName("uid");          //name
        //JQUERY通过id、name、className、TagName找对象
        var aj = $("#one");                 //id
        var bj = $(".test");                    //classname
        var cj = $("div");                        //tagname
        var dj = $("[name='uid']");    //name注意中括号,特别注意属性可以自己定义例如:bb="aa"
        var ej = $("div.test");                //div中class为test的元素,Jquery可以使用选择器找对象。。。
==========================================================================
        //Jquery与js操作对象
==========================================================================
        //JS操作属性:
        a.setAttribute("","");            //设置属性,修改属性
        a.remove("");                        //移除属性
        a.getAttribute("");                //获取属性
        //JQUERY操作属性
        aj.attr("","");                          //设置属性,修改属性
        aj.removeAttr("");                //移除属性
        aj.attr("");                              //获取属性
==========================================================================
        //JS操作内容
        a.innerText;                   //非表单元素的取值,赋值是:a.innerText = "aaaa";             
        a.innerHTML;                //非表单元素的取值,赋值是:a.innerHTML = "<a>123</a>";  可以解析html标签
        a.value;                         //表单元素的取值,赋值是:a.value = "aaaa";
        //JQUERY操作内容
        aj.text();                        //非表单元素的取值,赋值是:aj.text("aaaa");
        aj.html();                       //非标单元素的取值,赋值是:aj.html("<a>123</a>");    可以解析html标签
        aj.val();                         //标签元素的取值,赋值是:aj.val("aaaa");
==========================================================================
        //JS操作样式
        a.style.backgroundColor = red;    //设置样式
        a.style.color;                                    //获取样式,只能获取内联样式,也就是写在标签里面的样式
        //JQUERY操作样式
        aj.css("color","yellow");                                    //设置样式
        aj.css("color");                                        //可以获取到内嵌式的样式属性
==========================================================================
          //JS操作元素,创建元素两种方式
          //第一种用html赋值来创建元素
            var s = "<input type='button' value='"+i+"' class='bbb' onclick='doselect(this)'>"
            var dd = document.getElementById("test");
            dd.innerHTML += s;
            //第二种是使用createElement
            var ab = document.createElement("input");
            ab.setAttribute("type","button");
            ab.setAttribute("value",i);
            ab.setAttribute("class","bbb");
            ab.setAttribute("onclick","doselect(this)");
 
            var dd = document.getElementById("test");
            dd.appendChild(ab);
            //删除元素
            var dd = document.getElementById("test");
            dd.remove;
             //JQUERY操作元素,创建元素             
            var str = "<div id='a' style='width:100px; height:100px; background-color:red'></div>";         
            div.append(str);
            //删除元素
            $("#a").remove();
==========================================================================
            //JQUERY中的事件
            $(".test").click(function(){
                    alert($(this).text());
                });
 
            $(".test").bind("click",function(){                //绑定事件,注意可以同时绑定多个
                    alert($(this).text());
                });
 
            $("#btn").click(function(){
                    $(".test").unbind("click");                    //解除绑定事件
            });
           $("#add").click(function(){
                    $(".test").bind("click",function(){
                    alert($(this).text());
 
                    });
            });
});
 
</script>
 
 
 
 

jQuery 简介,与js的对比的更多相关文章

  1. jQuery和原生JS的对比

    原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...

  2. WEB入门之十二 jquery简介

    学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...

  3. jQuery 简介

    jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中. jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML ...

  4. jQuery简介

    jQuery简介 jQuery是继Prototype之后的又一个javascript库,它由John Resig创建于2006年1月. Javascript库作用比较: 1. Prototype(ht ...

  5. jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  6. jQuery:(一)jQuery简介

    一.jQuery简介jQuery由美国人John Resig于2006年创建jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装. 二.jQuery的优势1 ...

  7. JQuery插件 aos.js

    简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. ...

  8. 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件

    jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...

  9. JQuery plugin ---- simplePagination.js API

    CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...

随机推荐

  1. Fiddler获取https会话

    默认下,Fiddler不会捕获HTTPS会话,需要你设置下, 打开Fiddler  Tools--->Fiddler Options--->HTTPS 选项  选中checkbox,如上图 ...

  2. HTK语音识别示例(Ubuntu)

    一.简介 HTK(Hidden Markov Model Toolkit)是一款语音识别工具包,诞生于Cambridge University Engineering Department (CUED ...

  3. 深入解析JavaScript中的this关键字

    如果问初学者js中什么东西比较难懂,很多回答会是this关键字.this在不同场景下所指向的对象不同,这就有一种扑朔迷离的感觉,放佛魔法一般神秘:this到底是什么?这里有四种绑定规则. 1. 默认绑 ...

  4. 【Ubuntu 16】网络配置文件

    之前使用图形化NetworkManager配置静态IP,但在/etc/network/interfaces中找不到静态IP的配置信息,让人不解. 今天在网上看到网友的一则文章,知道了在/etc/Net ...

  5. 2017-04-21周Java学习笔记

    2017-04-21-周Java学习笔记... -------------------------------------- 计算机起源于:战争中的炮弹轨道计算.Unix操作系统是使用C语言编写的操作 ...

  6. Oracle异常汇总

    持续更新中,可参见https://hnuhell.gitbooks.io/oracle_errmg/content/或https://hnuhell.github.io/Oracle_ERRMG/上的 ...

  7. Spark Structured streaming框架(1)之基本使用

     Spark Struntured Streaming是Spark 2.1.0版本后新增加的流计算引擎,本博将通过几篇博文详细介绍这个框架.这篇是介绍Spark Structured Streamin ...

  8. pycharm激活

    刚刚下载了2017.1版本专业版的pycharm,作为一个天朝开发者,自然是去找注册码了.转悠了一圈,那些注册码都已经失效了.看到一个有效的方法:把http://elporfirio.com:1017 ...

  9. ascii codec can't decode byte 0xe8 in position 0:ordinal not in range(128) python代码报错

    import sys reload(sys) sys.setdefaultencoding('utf-8')

  10. Angular+ionic2 web端 启动程序出现短暂 白屏或黑屏 的处理小妙招

    在ionic2项目启动是会出现短暂的白屏或者黑屏,虽然很短,但是用户体验不太好.上网查了相关的资料,都是针对打包APP的解决办法,针对浏览器端使用的项目没有效果,所以自己写了样式,巧妙的避开这个问题, ...