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. LeetCode 3 Longest Substring Without Repeating Characters 区间,想法 难度:1

    https://leetcode.com/problems/longest-substring-without-repeating-characters/ 思路:从某点结束所能取到的最早开头是到目前出 ...

  2. PHP语言基础简单整理

    1.开始结束标记<? ... ?> 2.定义变量:$变量名 例: $str="锦清笋";不需要指明数据类型 3.输出语句:(1)echo "hello wor ...

  3. Redis设计与实现（一~五整合版）【搬运】

    Redis设计与实现(一~五整合版) by @飘过的小牛 一 前言 项目中用到了redis,但用到的都是最最基本的功能,比如简单的slave机制,数据结构只使用了字符串.但是一直听说redis是一个很 ...

  4. 【Python扩展阅读【转】EasyGui 学习文档【超详细中文版】】

    翻译改编自官方文档:http://easygui.sourceforge.net/tutorial/index.html 翻译改编者:小甲鱼,本文欢迎转载,转载请保证原文的完整性! 演示使用 Pyth ...

  5. 开发中的一些解决方案(c#)

    1.如果需要配置文件,不妨考虑用XML序列化技术实现XML配置文件.在C#中引入System.Xml.Serialization命名空间,编写实体类序列化到XML文件中(或反序列化到对象),编写少量代 ...

  6. JSP内置对象---request对象（用户登录页面（返回值和数组：gerParameter，getParameterValues））

    创建两个jsp页面:reg.jsp 和 request.jsp reg.jsp: <%@ page language="java" import="java.uti ...

  7. WPF 调用WinForm控件

    WPF可以使用WindowsFormsHost控件做为容器去显示WinForm控件,类似的用法网上到处都是,就是拖一个WindowsFormsHost控件winHost1到WPF页面上,让后设置win ...

  8. Linux学习 ：移植U-boot_2016.09到JZ2440开发板

    一.下载源码:ftp://ftp.denx.de/pub/u-boot/ 二.初始化编译: ①新建一个单板: cd board/samsung/ cp smdk2410 smdk2440 -rf   ...

  9. bak骗子公司

    李波 身份证:310101197510313215 手机:13916407777 18621624812 13916821206住址:上海QQ:87766938 沪EE5781 奥迪Q7李寻欢77 s ...

  10. 【python】错误/异常处理，调试，测试

    try: print('try') r=10/2 print('result is:',r) #发生错误,会执行这部分 except ValueError as e: print('ValueErro ...