jQuery 是 JavaScript 的一个函数库。方便、主流
 
jQuery的开发步骤：
（1） 导入jQuery 库
 
（2）  在
<script src="../js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script> 
        $(function(){
                    写jQuery代码；
         });
</script>
 
（3）jQuery对象   vs     DOM对象
1.jQuery对象   和  DOM对象   不可混用，不能使用另一方的属性和方法
 
2.jQuery对象  是一个  DOM数组对象。所以可以用 下标的方式  转为  DOM对象
var $btn = $("button");
var btn = $btn[0];
3.jQuery对象  使用  $()  包装  DOM对象后  产生的对象
 
例：进行遍历的时候（jQuery对象 遍历的方式使用 each，在each 内部的 this 是正在得到的 DOM 对象，而不是一个 jQuery对象。 ）
$("select : seclected").each(function(){
//alert(this.value);    如果想用jQuery的属性和方法，用$()  包装起来。
alert($(this).value);
});
（4）jQuery 选择器（综合使用，威力巨大）
选取被选中的 select 的option 需要使用 选取子节点的方式
$("select[name="test"] :selected").each(function(){   //注意绿色和橘色之间是有空格（黄色）的
//jq代码
});
 
选择器搞不定，可以借助方法
 
（5）jQuery对象的方法
 
 
 
 
 
一、格式：$(selector).action();
        $ : jQuery的缩写
        selector: 选择器
        action(): 对元素的操作
 
<script> 
     $(document).ready(function(){
          alert("jQuery代码");
     });
</script>
 
二、获取元素的值和修改元素的内容
<script>
   $(document).ready(function(){
/*
* 获取元素的值（不带参）
* */
//js
var jsValue = document.getElementById('first').innerHTML;
var jsValue1 = document.getElementById('first').innerText;

//jq
var jQValue = $('#first').html();
var jQValue1 = $('#first').text();
 
 
/*
 * 设置元素的内容（带参）
 * */
//js
 document.getElementById('first').innerHTML = '修改内容';
      document.getElementById('first').innerHTML = '<h2>添加的h2标签</h2>';

//jq
 $('#first').html('修改内容');
 $('#first').html('<h2>添加的h2标签</h2>');
   });
</script>
 
 
三、onload和ready的对比
 
jq:  文档就绪函数，为了防止文档在完全加载（就绪）之前运行jQuery代码
  $(document).ready(function(){
        //jq代码；
   });
 
js:
  window.onload = function(){
     //js代码
 }
 
区别（面试可能会问）：
 
1、加载时间不同。
        ready：只要页面的DOM加载完成就可以完成。
        onload：包括页面所有资源（图片、js、dom树等）加载完成之后执行。
2、编写的个数不同。
         onload：只能写一个，执行一次，后面会覆盖前面，以最后一个为准。
         ready：可以同时编写多个，并且每个都可以得到执行。
3、简写形式。
          onload：没有简写形式。
          $(document).ready()：等价于 $(function(){})
 
 
ps:
有一个大型的图库网站，为网页中所有图片添加某些行为，例如单击图片后让它隐藏或显示。
如果使用window.onload方法来处理，那么用户必须等到每一幅图片都加载完毕后，才可以进行操作。
如果使用jQuery中的$(document).ready()方法来进行设置，只要DOM就绪时就可以操作了，不需要等待所有图片下载完毕
 
例：
<script>
    
//1. js(只能写一个)
window.onload = function(){
    alert(1);
}
window.onload = function(){
    alert(2);
}
window.onload = function(){
    alert(3);
}
 
//2.jq（可以写多个）
$(document).ready(function(){
    alert(4);
});
$(document).ready(function(){
    alert(5);
});
$(document).ready(function(){
    alert(6);
});

$(function(){
    alert(7)
});
</script>
 
 
四、jQuery对象(jq对象是个数组)
 
         1. $ == jQuery   console.log(jQuery);    console.log($); 一样结果 
             例：
console.log(jQuery);
console.log($);
var jqObj = $('p');
var jqObj = jQuery('p');
 
         2.  js 和 jq  对象的相互转化
            注:  原生js代码不能和jQuery混合使用
              原生DOM对象是可以和jQuery对象互相转变的
           例：
//        先获取
        var jqObj = $('p');
        var jsObj = document.getElementById('two');   //如果是集合的话不能转，集合里的对象可以转
        
//        再转换
        var newjqObj = $('jsObj');     //原生DOM对象 转变为 jQuery对象   使用 $() 进行包装 
        var newjsObj = jqObj.get(0);   //jQuery对象 转变为 原生DOM对象    通过数组的下标
//        输出
        console.log("-----------"+jqObj);
        console.log("-----------"+jsObj);

        console.log("-----------"+newjqObj);
        console.log("-----------"+newjsObj);
 
         3.  放弃$，避免多库冲突   
    
    可以重新赋个值，$$ 就相当于 jQuery 
var $$ = jQuery.noConflict();
var jqObj = $$('p');
例： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery对象的转换</title>
    <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p id="p4">段落4</p>
</body>
<script>
    console.log(jQuery);
    var $$ = jQuery.noConflict();

    var jqObj = $$('p');
    var jsObj = document.getElementById('p4');

    var newjqObj = $$(jsObj);
    var newjsObj = jqObj.get(0);

    console.log("------------"+jqObj);
    console.log("------------"+jsObj);

    console.log("------------"+newjqObj);
    console.log("------------"+newjsObj);

    /*
    *   $ == jQuery
    *
    * */

    /*
    *   总结：
    *       1. 原生js代码不能和jQuery混合使用
    *       2. 原生DOM对象是可以和jQuery对象相互转变的。
    * */
   $(function(){

        /*
        *   1.jQuery对象转变为原生DOM对象
        * */
        var con = $('p').get(1).innerHTML;
        console.log(con)

        /*
        *   2.原生DOM对象转变为jQuery对象
        * */
        var con4 = document.getElementById('p4');
        console.log($(con4).html());
    });
</script>
</html>
 
 
 
 

jQuery基本语法的更多相关文章

  1. jQuery 基础语法

    jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  2. js进阶 10-2 JQuery基础语法是什么

    js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...

  3. 前端之JQuery：JQuery基本语法

    jQuery基本语法 一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似py ...

  4. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  5. JQuery基本语法（部分）

    1.jQuery介绍 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScrip ...

  6. jquery基本语法（一）

    https://www.cnblogs.com/haiyan123/p/7657151.html 一.jQuery基础1.为什么要用jquery?    写起来简单,省事,开发效率高,兼容性好2.什么 ...

  7. web前端----jQuery基础语法

    一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...

  8. <学习笔记 之 JQuery 基础语法>

    jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...

  9. jQuery 选择器语法

    jQuery选择器分为如下几类(点击“名称”会跳转到此方法的jQuery官方说明文档): 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId&quo ...

随机推荐

  1. ros科大讯飞语音识别

    转自http://www.ncnynl.com/archives/201611/1069.html ROS入门教程-编写科大讯飞语音SDK的ROS包 说明 ROS软件包xfei_asr是集成自科大讯飞 ...

  2. Socket Receive 避免 Blocking

    我们知道 Socket Blocking 属性默认true . 表明Socket 处于同步调用 , Connect , 或 Send , Receive 需等待动作 完成才能继续执行. 有一种应用场景 ...

  3. 【转】Weblogic的集群

    原文链接:http://www.cnblogs.com/HondaHsu/p/4267972.html 一.Weblogic的集群 还记得我们在第五天教程中讲到的关于Tomcat的集群吗? 两个tom ...

  4. IOS 学习 开发 自定义 UINavigationController 导航

    文件目录如下:基本导航顺序: root -> First -> Second -> Third.其中,FirstViewController作为 navigation堆栈的rootv ...

  5. Apache安装与属性配置

    Apache 事先创建进程 按需维持适当的进程 模块块设计,核心比较小,各种功能都模块添加(包括php) 支持运行配置,支持单独编译模块 支持多种方式的虚拟主机配置         Socket IP ...

  6. 解决iis+php+mysql访问速度慢的方法

    IIS7.5网站访问PHP响应慢的原因原因是PHP5.3以上支持IPv6协议,但是大家的服务器未使用IPv6,当访问PHP的时候会连接MySQL的地址为localhost,系统会会先用IPv6连接,但 ...

  7. 初学3D Touch

    引言 With iOS 9, new iPhone models add a third dimension to the user interface. A user can now press y ...

  8. centos 7 下安装numpy、scipy等python包

    本文适用于刚入门的小白,欢迎大牛们批评指正. 因为要开始数据分析,而python又不像R和matlab那么简洁.需要安装的包很多~ 网上找了好多牛人博客,想在centos7下安装numpy,scipy ...

  9. [置顶] Android 2016新技术

    版权声明:分享技术,传播快乐.如果本博客对你有帮助,请在我的博客首页为我打赏吧! 2016你需要了解Android有以下新兴的技术与框架,有些也许还不成熟,但是你应该去了解下,也许就是未来的方向. K ...

  10. windows、ubuntu下eclipse搭建java、Python环境问题总结

    前两篇博文分别讲述了如何在windows.ubuntu下用eclipse搭建java.python环境,下面就针对本人遇到的问题做一个总结. 一.windows下关于java环境变量JAVA_HOME ...