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. 手机升级到iOS10,用Xcode7.3进行真机调试方法

    今天发布的正式版的iOS10,手机果断升级了,结果发现Xcode7.3不能真机调试了,原因是Xcode7.3里面没有iOS10的sdk,下面这个压缩包你可以下载下来放在你的Xcode7.3里面,当然了 ...

  2. MVB设备分类

    连接在MVB上的设备按性能可以分为5类 MVB上的设备应具备下面六个性能中的一个或多个. MVB设备的性能 性能 说明 分类 设备状态 设备被轮询时能够发送出其设备状态 1,2,3,4,5 过程数据 ...

  3. Monkey for iOS（CrashMonkey4IOS）

    CrashMonkey4IOS介绍 支持真机测试.模拟器测试 支持收集系统日志(Systemlog).崩溃日志(Crashlog).instrument行为日志 支持测试报告截图,绘制行为轨迹 支持测 ...

  4. 白皮 Chapter 1

    6.29 今天主要做了一些1.5中的小结和练习,果然换语言思路也要跟着变么…各种不爽啊不爽… scanf各种忘记&,还有各种忘记return 0… average temperature su ...

  5. android 有弹性的ScrollView 简单实现，与处理ScrollView和ListView，GridView之间的冲突

    处理ScrollView和ListView,GridView之间的冲突, 最好的办法就是继承这两个类,重写他们的onMeasure方法即可: ListView: import android.widg ...

  6. 不使用ASP.NET中的服务器控件将如何上传文件？

    遇到文件的上传时,可能会有大部分的开发者喜欢使用服务器控件,虽然很方便,但是却不能很好的控制,不具灵活性. 现给出例子,使用html标签语言灵活的控制文件的上传. 1.html部分 <input ...

  7. Puppet安装及部署

    本篇博客主要介绍Puppet的安装部署,后续会更新其他相关内容 一.简介 二.环境介绍 三.安装Puppet 四.配置Puppet-dashboard 五.配置Puppet Kick 一.简介 Pup ...

  8. nginx url重定向

    nginx内部支持url rewrite,内部编译进去了rewrite模块,nginx的rewrite模块类似于apache的rewriterule功能:支持多种规则和正则表达式: 详细介绍如下: N ...

  9. OC基本数据存储方式

    /** 一,数据存储 常用方式(5种) 1,XML属性列表 -- 保存在Doucuments文件夹 2,偏好设置(NSUserDefault)-- Library/Preference 需要配合wri ...

  10. matlab初学之roundn和round

    文章出处: http://evaevazhuxun.blog.sohu.com/154543859.html http://blog.sina.com.cn/s/blog_a4034b2801012o ...