JQuery入门教程：核心函数与选择器解析-优快云博客

本文链接：https://blog.youkuaiyun.com/JacksonYong/article/details/118559123

如果不熟悉JavaScript的，可以看另外一篇博客。最新版JavaScript笔记_JMEATLIP的博客-优快云博客

1.JQuery简介

JQuery = JavaScript + Query，其实是一种函数。而JQuery对象是DOM对象的数组 + JQuery 提供的一系列功能函数。

(1)引入JQuery

<script type="text/javascript" src="路径名称">
</script>

(2)对比JavaScript和JQuery

JavaScript的写法：

window.onload = function(){
  var btnObj = document.getElementById("btnId");
  btnObj.onclick = function(){
     ......
  }
}

JQuery的写法：

$(function(){                   //表示页面加载完之后，相当于onload方法，注意别忘记写这句
    var $btnObj = $("#btnId");  //按id查询标签对象
    $btnObj.click(fucntion(){   //绑定单击事件
        ......
    });
});

给按钮添加响应函数的步骤：

1.先使用JQuery查询到标签对象。

2.使用标签对象.click( function(){} );

（3)JQuery核心函数 $

1.当传入的参数为函数时，表示页面加载完成之后，相当于window.onload = function(){}。上面的对比就是例子。

2.当传入的参数为 HTML字符串 时，JQuery会自动创建这个html标签对象。

3.当传入的参数为 选择器字符串 时，比如

$(#"id属性值")：表示id选择器，根据id查询标签对象。例如上面的$("#btnId")。

$("标签名")：表示标签名选择器，根据指定的标签名查询标签对象。比如$("button")。

$(".class属性值")：表示类型选择器，根据class属性查询标签对象。

4..当传入的参数为 DOM对象 时，JQuery会将DMO对象转换成JQuery对象。

（4）JQuery对象和DOM对象之间的相互转换

如下图所示：

eg: document.getElementById("btnName")是一个DOM对象，

$( document.getElementById("btnName") )就转成JQuey对象了。

反过来，$( document.getElementById("btnName") )是JQuey对象，

然后$( document.getElementById("btnName") )[下标]就转成DOM对象。

2.选择器

（1）基础选择器

1.根据ID查询：

$(function(){                                    //要在页面加载后按钮的点击事件才能生效，相当于onload方法
   $("#btn01").click(function()){                //选择对应的按钮
     $("#one").css("background-color","颜色");   //点击按钮后，符合条件的div会变色
});
......
});
ps:btn01为Button的名称，one为其id,下面三例子都要在页面加载完后才生效

2.根据类名查询：

$("#btn02").click(function()){
    $(".mini").css("background-color","颜色");   //点击按钮后，符合条件的div会变色
});
ps:mini为类名

3.根据div查询：

$("#btn02").click(function()){
    $("div").css("background-color","颜色");   //点击按钮后，符合条件的div会变色
});

4.多个条件查询：

$("#btn02").click(function()){
    $("span,#two").css("background-color","颜色");   //选择span类型而且id为two的元素
});

ps: $("*") 可选择所有的元素。

（2）层次选择器

1.ancestor descendant 型

eg:选择body内的所有div:

$("#btn01").click(function()){
     $("body div").css("background-color","颜色");   //后面我直接省略写了
});

2.parent > child 型

eg:选择body内的div子元素:

$("body > div")

3.prev + next 型

eg:选择id为one的下一个div元素:

$("#one+div")

4.prev ~ siblings 型

eg:选择id为two的后面所有div兄弟元素:

$("#two~div")

eg: 获取选中多选框的值

法一：

$("#btn4").click(function(){
   var &checkboies = $(":checkbox:checked");//获取全部选中的复选框标签对象
   //老式遍历
   for(var i = 0 ;i < &checkboies.length; i++){
      alert( &checkboies[i].value );
   }
});

法二（推荐）：

$("#btn4").click(function(){
   var &checkboies = $(":checkbox:checked");//获取全部选中的复选框标签对象
   &checkboies.each(function(){
    alert(this.value);
   });
});
说明：each方法是JQuery对象提供用来遍历元素的方法，this表示当前遍历到的dom对象。

ps:这里例子主要是想突出JQuery遍历元素的方式。

3.属性操作

(1)常用属性

标签名	作用	类似于
html()	设置和获取起始标签和结束标签中的内容	dom属性的innerHTML
text()	设置和获取起始标签和结束标签中的文本	dom属性的innerText
val()	设置和获取表单项的value属性值	dom属性的value

说明：当不传参数的时候，是获取值；传递参数时，是设置值。