jQuery快速入门专题

jQuery入门专题

本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低!

一、jQuery简介

jQuery 是一个 JavaScript的一个库,也就是说jQuery是基于JavaScript框架开发出来的。其目的是为了最大化的简化了JavaScript书写方式。

jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种更为简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。———本段来自网络

 

二、jQuery内容

1.  查找标签(选择器)

2.  筛选器

3.  操作标签

  3.1.  样式操作

  3.2.  位置操作

  3.3.  文本操作

  3.4.  属性操作

  3.5.  文档操作

4.  事件

5.  动画

6.  插件

三、jQuery对象

   jQuery对象是通过jQuery包装DOM对象后产生的对象。按平时的使用来说,只能是jQuery对象,才能使用jQuery里面的方法【因为,平时在写一个js脚本的时候,里面可能有js原生的东西,也可能会有jQuery的一些语法一起使用(这里涉及的到JavaScript和jQuery之间的相互转换,下面内容会提到) 】。jQuery的方法是用例子如:$( "#nav" ).html()。

  “ $( "#nav" ).html() ; ”这一句的代码分析:在这里的 $( "#nav" )就是jQuery对象(也就是点的左边),而点的右边html()就是jQuery对象的方法。这句话的意思是:获取id值为nav的标签(元素)的html代码。

  注意:如果html里面有内容,例如: $( "#nav" ).html("<p>555</p>")的意思就不是获取nav标签的html代码了,而是变成了,将nav标签里面的所有html全部被替换成<p>555</p>,这个是涉及到操作方法,下面会有细讲,这里只是做个对比,抱砖引玉而且。

  与原生JavaScript对比: “$( "#nav" ).html() ;    相当于原生js的     document.getElementById("nav").innerHTML;

  虽然jQuery对象通过包装DOM对象后生成的,但是jQuery对象的是无法直接使用DOM对象的任何方法,同样DOM对象也无法直接使用jQuery对象的任何方法。(这里也涉及的到JavaScript和jQuery之间的相互转换,下面内容会提到) 

  大家的约定:当我们要声明一个jQuery对象的变量的时候要在变量的前面加入$符号:例如

    var  $run = jQuery对象      

    var run = DOM对象

  JavaScript和jQuery之间的相互转换:

    拿上面的例子来说:

      jQuery对象:$( "#nav" )

      DOM对象:document.getElementById("nav")

      1.  jQuery对象转换成DOM对象:$( "#nav" )[0] ***********************************************************在jQuery对象添加一个索引,即可变成了DOM对象(因为jQuery对象获取到的标签是一个数组)

      2.  DOM对象转换成jQuery对象:$(document.getElementById("nav"))或者 $($( "#nav" )[0]  )  ******在DOM对象的外面添加   $() 就可以jQuery对象

四、jQuery基础语法

 jQuery语法是通过选取(查找)HTML元素,并随之对已选取到的元素执行某些操作。

基础语法:$(selector).action()

 

  • selector:选择符。”查询“和”查找”HTML文档里面的元素。

 

  • action:Query对元素的操作。

实例:

  • $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

  • $("#test").hide() - 隐藏所有 id="test" 的元素

五、jQuery查找标签(选择器)

5.1  基本选择器 

5.1.1  id选择器:

$("#main_id")

5.1.2  标签选择器:

$("div")

$("p")

$("img")

5.1.3  class(样式类)选择器:

 $(".main_class")

5.1.4  配合使用:

$("div.main_class")
或者
$("div#main_class")

 

5.1.5  通用选择器:

 $("*")

 

5.1.6  组合选择器:

$("#main_id,.nav_class,div.main_class")

 

5.2  层级选择器

x, y可以为任意选择器,x,可以调换。

$("x y")         //x的所有后代y

$("x>y")          //x的所有儿子y

$("x+y")          //所有紧挨在x后台的y

$("x~y")         //x的所有兄弟y

 

5.3  基本筛选器

5.3.1  常用的筛选器:

//div表示选择器,这里可以是任意选择器。例如;div、#main ul li、x~y等等

$("div:first") //第一个
$("div:last")  //最后一个
$("div:eq(index)") //索引等于index的那个元素
$("div:even")       //比配所有索引值为偶数的元素,从0开始计数
$("div:odd")        //比配所有索引值为奇数的元素,从0开始计数
$("div:gt(index)")     //比配所有大于给定索引值的元素
$("div:lt(index)")      //比配所有小于给定索引值的元素
$("div:not(元素选择器)")   //移除所有满足not条件的标签
$("div:has(元素选择器)")    //
选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

 

例子:

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

练习:

未更新

  

5.4  属性选择器

attribute:”属性“的意思。
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例子:

<input type="text">;
<input type="password">;
<input type="button">;
//应用

$("input[type='text']");

$("input[type='password']");   // 取到password类型的input标签

$("input[type!='button']");// 取到类型不是button的input标签

 

 

5.5  表单选择器

 分为两组来记,第一组(五个),第二组(三个,都是按钮)

:text                     //例子:$(":text ")     找到表单中的所有text
:password             //例子:$(":password")      找到表单中的所有password
:checkbox             //例子:$(":checkbox")      找到表单中的所有checkbox
:radio                   //例子:$(":radio")
:file                      //例子:$(":file")

:submit                 //例子:$(":submit")
:reset                    //例子:$(":reset")
:button                  // 例子:$(":button ") 

 

通过属性找到对应的标签(4个):

:enabled       //标签可用属性
:disabled    //标签可用属性
:checked
:selected

例子:

1.找到可用的input标签

<form>
  <input  name="username" disabled="disabled">
  <input name="id" />
</form>
$("input:enabled")  // 找到可用的input标签

2.找到被选中的option:

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

六  jQuery筛选器

6.1  找下一个元素:

$("#nav").next();
$("#nav").nextAll();
$("#nav").nextUntil("#id");

6.2  找上一个元素:


$
("#nav").prev();
$(
"#nav").prevAll(); $("#nav").prevUntil("#id");

 

6.3  找父亲元素:

$("#nav").parent();
$("#nav").parents();     //查找当前元素的所有父辈
$("#nav").parentsUntil("#id"); //查找当前标签的所有父辈,直到找到ID值为id的父辈元素

 

6.4  找儿子和兄弟元素:

$("#nav").children();   //查找当前元素下面的所有儿子们
$("#nav").siblings();    //查找与当前元素是兄弟(同级)们

 

6.5  查找方法(   .find()   ):

搜索当前元素的指定后代元素的方法。这个方法是找出正在处理的元素的后代的好方法。

$("div").find("p");      //这句话等价于  $("div p");

 

6.6  筛选方法(   .filter()  ):

筛选出与filter方法括号内表达式匹配的元素集合。这个方法可以很好的缩小匹配范围,filter方法括号内的选择器表达式可以是多个,逗号分隔即可。跟组合选择器一样。

$("div").filter(".c1")  // 从div结果集中过滤出有c1样式类   这句话等价于 $("div.c1")

 

6.7  几个筛选器和筛选方法的对比

.first() // 获取匹配的第一个元素                              筛选器:  :first
.last() // 获取匹配的最后一个元素                    筛选器:  :last
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素          筛选器:  :not(元素选择器)
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。     筛选器:  :has(元素选择器)
.eq() // 索引值等于指定值的元素                     筛选器:   :eq(index)

  两个不同点:

    1.筛选方法前面是点“.“,筛选器是冒号”:”

    2.筛选方法后面有小括号,筛选器则是没有

 

例子:

待更新………………

七、jQuery操作标签

7.1  样式类名操作

addClass(“类名”);          // 添加括号里指定的类名

removeClass(“类名”);     //移除括号里的css类名

hasClass("类名");        //判断样式是否存在

toggleClass("类名");       //切换css类名,如果有类名就移除,反子就添加

示例:

正则更新中………………

 

7.2  位置操作

offset()        //获取匹配元素在当前窗口(window)的相对位置或设置元素的位置
position()        //获取匹配元素相对父元素的偏移
scrollTop()        //获取匹配元素相对滚动条顶部的偏移
scrollLeft()        //获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。

和 .position()的差别在于: .position()是相对于相对于父级元素的位移。

 

示例:

正则更新中………………

 

7.3  文本操作

7.3.1  HTML代码:

html()       //取得第一个元素的html内容

html(val)    设置所有匹配的惠特米勒内容

7.3.2  文本代码:

text()      //  设置所有匹配元素的内容

text(val)      // 设置所有匹配元素的内容

 

7.3.3  设置值:

$("[name = ''hobby]").val(['basketable','foontball'])

$("#s1").val (["1", "2"])

例子:

获取被选中的checkbox或者radio。

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

使用示例:

$("input[name='gender']:checked").val()

 

7.3.4  值:

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

 

示例:

正则更新中………………

7.3.5  属性操作

用ID等标签,自定义属性:

attr(attrName)         //返回第一个匹配元素的属性
attr(attrName,attrValue)   //为所有匹配元素设置一个属性值
attr({k1:v1, k2:v2})       // 为所有匹配元素设置多个属性值
removeAttr()                  // 从每一个匹配的元素中删除一个属性

 

用于checkbox和radio

prop()                 // 获取属性
removeProp()        // 移除属性 

 

值得注意:

在1.X和2.X版本的jQuery中使用attr对checkbox进行赋值操作的时候会有bug出现,但是在3.X版本的jQuery中则没有这个问题。为了解决这个问题,我们在除了checkbox和radio的时候最好使用prop(),不要使用attr("checked","checked").

<input type="checkbox" value="checkbox">
<input type="radio" value="radio">
<script>
$(":checkbox").prop("checked",true);
$(":radio").prop("checked",true);
</script>

prop()和attr()的区别:

attr的全称为attribute:属性。

prop的全称为property:也是属性。

虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。

举个例子:

<input type="checkbox" id="i1" value="1">

针对上面的代码,

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。

如果换成下面的代码:

<input type="checkbox" checked id="i1" value="1">

再执行:

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。

接下来再看一下针对自定义属性,attr和prop又有什么区别:

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

执行以下代码:

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined

可以看到prop不支持获取标签的自定义属性。

总结一下:

  1. 对于标签上有的能看到的属性和自定义属性都用attr
  2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

 

7.3.6  文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

$(A).remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

 

替换

replaceWith()
replaceAll()

克隆

clone()// 参数

示例正在更新^………………




 

7.3.7  尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

 

 

八、jQuery事件

 常用事件

 

click(function(){………………})      //点击事情
hover(function(){………………})    //
focus(function(){…………………})    //获得光标事件,当点击搜索框时,改变搜索框背景色
blur(function(){………………})      //失去光标事件,在输入域外面点击,使其失去焦点 
change(function(){………………})       //在某个标签或者控件被使用或改变时,可以改变属性
keyup(
function(){…………………})      //当按下按键时,改变文本域的颜色:

 

 

 

 

 

九、jQuery动画

 

十、jQuery插件

 

posted @ 2019-07-31 16:59  码上先生  阅读(...)  评论(...编辑  收藏