Jquery基础入门(一)

最新推荐文章于 2024-05-06 00:06:17 发布

Marksunshine

最新推荐文章于 2024-05-06 00:06:17 发布

阅读量583

点赞数

分类专栏：前端HTML jquery 文章标签： jquery 函数对象事件

本文链接：https://blog.csdn.net/Marksunshine/article/details/52773241

版权

前端HTML 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

jquery

第一部分:核心：函数和对象访问
一丶页面加载函数

代码:

//最原始最麻烦的写法
jQuery(document).ready(function(){

});

//简写方式(开发中常用)
$(function(){});

二丶JQ与JS页面加载的区别

1.JS页面加载存在覆盖问题，加载速度比JQ慢(除了要加载整个页面还得加载与之相关资源)
2.JQ页面加载不存在覆盖问题，按照书写顺序依次执行，加载速度比JS块(当整个文档绘制完毕后就执行)

三丶JQ对象与DOM对象之间的转换

1.JQ向DOM转换 (可能忘记了JQ里面的方法但是记得DOM的操作)
方式一：$(element).get(index,一般都是0)
方式二：$(element)[0]

2.DOM向JQ转换 (使用$()将DOM对象包裹起来)
    $(DOM对象)
注意：JQ和DOM对象不能互相使用对方的属性和方法！

四丶遍历

在对象访问中的遍历：
$(DOM对象).each(function(i,n){

})
其中，i代表角标，n代表被遍历后的每一个元素
    DOM对象，被遍历的对象。

JQ工具类中的遍历方式：
    $.each(被遍历的对象,function(i,n){

    });

第二部分选择器

一丶基本选择器
①id选择器

$("#id名称")

②类选择器

$(".class名称")

③元素选择器

$("input")

④通配符 *

$("*")

⑤多个选择器同时作用(并集)

注意，多个选择器之间使用逗号(,)分开

$("body,form,input")

二丶层级选择器
①ancestor descendant :在给定的祖先元素下匹配所有的后代元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("form input")

结果:
[ <input name="name" />, <input name="newsletter" /> ]

②parent > child:在给定的父元素下匹配所有的子元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("form > input")

结果:
[ <input name="name" /> ]

③A + B:匹配所有紧接在 A 元素后的 B 元素,寻找A下面的所有包含B元素的内容(下一个同桌)

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("label + input")

结果:
[ <input name="name" />, <input name="newsletter" /> ]

④A~ B:匹配 A 元素之后的所有 B 元素,寻找A下面的所有包含B元素的内容(兄弟元素)

三丶基本过滤选择器
过滤选择器都有一个共同的特性(前面都有冒号:)

①:first
first()获取第一个元素

HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:
$('li').first()

[ <li>list item 1</li> ]

②:last
last()获取最后个元素

HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:
$('li').last()

[ <li>list item 5</li> ]

③:even
匹配所有索引值为偶数的元素，从 0 开始计数

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:even")

[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

④:odd
匹配所有索引值为奇数的元素，从 0 开始计数

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:odd")

结果:
[ <tr><td>Value 1</td></tr> ]

⑤:lt
匹配所有小于给定索引值的元素

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:lt(2)")

结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

⑥:gt
匹配所有大于给定索引值的元素

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:gt(0)")

结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

⑦:not
去除所有与给定选择器匹配的元素

HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />

jQuery 代码:
$("input:not(:checked)")

结果:
[ <input name="apple" /> ]

⑧:eq
匹配一个给定索引值的元素

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:eq(1)")

结果:
[ <tr><td>Value 1</td></tr> ]

⑨:header
匹配如 h1, h2, h3之类的标题元素

HTML 代码:
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

jQuery 代码:
$(":header").css("background", "#FFF");

[ <h1 style="background:#FFF;">Header 1</h1>, <h2 style="background:#FFF;">Header 2</h2> ]

⑩:animated
匹配所有正在执行动画效果的元素

HTML 代码:
<button id="run">Run</button><div></div>

jQuery 代码:
$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

四丶属性选择器
写法：
其它选择器[属性名=’属性值’]
注意手册里面的attr的写法

①[attribute]
匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

HTML 代码:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

jQuery 代码:
$("div[id]")

结果:
[ <div id="test2"></div> ]

②[attribute=value]
匹配给定的属性是某个特定值的元素

HTML 代码:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

jQuery 代码:
$("div[id]")

结果:
[ <div id="test2"></div> ]

③[attribute!=value]
匹配所有不含有指定的属性，或者属性不等于特定值的元素。

此选择器等价于:not([attr=value])
要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])

④[attribute^=value]
匹配给定的属性是以某些值开始的元素

⑤[attribute$=value]
匹配给定的属性是以某些值结尾的元素

⑥[attribute*=value]
匹配给定的属性是以包含某些值的元素

⑦[selector1][selector2][selectorN]
复合属性选择器，需要同时满足多个条件时使用。

HTML 代码:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

jQuery 代码:
$("input[id][name$='man']")

结果:
[ <input id="letterman" name="new-letterman" /> ]

五丶表单选择器

①:input
匹配所有 input, textarea, select 和 button 元素

HTML 代码:
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>

jQuery 代码:
$(":input")

[ 
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,

    <input type="file" />,
    <input type="hidden" />,
    <input type="image" />,

    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,

    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,

    <textarea></textarea>,
    <button>Button</button>,
 ]

②:text
匹配所有的单行文本框

HTML 代码:
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:
$(":text")

结果:
[ <input type="text" /> ]

③:checked
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

HTML 代码:
<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

jQuery 代码:
$("input:checked")

[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

④:selected
匹配所有选中的option元素

HTML 代码:
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

$("select option:selected")

结果:
[ <option value="2" selected="selected">Gardens</option> ]

……

第三部分:属性操作

如果有一个方法它有多个重载的方法，此时存在一个规律：
如果这个方法最少没有参数，那么无参表示获取操作比如val()
如果这个方法最少没有参数，那么有1个参数表示设置操作val(“aaa”)

如果这个方法最少有1个参数，那么有1个参数表示获取操attr("src")
如果这个方法最少有1个参数，那么有2个参数表示设置操attr("src","http://www.baidu.com")

一丶属性

①attr(name)
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。

HTML 代码:
<img src="test.jpg"/>

jQuery 代码:
$("img").attr("src");

结果:
test.jpg

②attr(name,value)
为所有匹配的元素设置一个属性值。

HTML 代码:
<img/> 
<img/>

jQuery 代码:
$("img").attr("src","test.jpg");

结果:
[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

③attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性。
通俗的讲究是为一个元素标签设置多个属性值.

这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用’className’ 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).

HTML 代码:
<img/>

jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });

结果:
[ <img src= "test.jpg"  alt:="Test Image" /> ]

④removeAttr(name)
从每一个匹配的元素中删除一个属性

将文档中图像的src属性删除

HTML 代码:
<img src="test.jpg"/>

jQuery 代码:
$("img").removeAttr("src");

结果:
[ <img /> ]

⑤attr(key, function(index, attr))
为所有匹配的元素设置一个计算的属性值。
不提供值，而是提供一个函数，由这个函数计算的值作为属性值。

HTML 代码:
<img src="test.jpg"/>

jQuery 代码:
$("img").attr("title", function() { return this.src });

结果:
<img src="test.jpg" title="test.jpg" />

二丶CSS类
①addClass(class属性值)
一般开发的时候CSS样式都是由别人(美工妹子)写好的，我们只需要调用此方法即可，完成添加新的样式

为每个匹配的元素添加指定的类名。

HTML 代码:
<p>Hello</p>

jQuery 代码:
$("p").addClass("selected");

结果:
[ <p class="selected">Hello</p> ]

②removeClass(class属性值)
从所有匹配的元素中删除全部或者指定的类。

从匹配的元素中删除 'selected' 类

HTML 代码:
<p class="selected first">Hello</p>

jQuery 代码:
$("p").removeClass("selected");

结果:
[ <p class="first">Hello</p> ]

③toggleClass(class属性值)
如果存在（不存在）就删除（添加）一个类。

为匹配的元素切换 'selected' 类

HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>

jQuery 代码:
$("p").toggleClass("selected");

结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]

三丶html/text/val

①html()
获取html里面的内容，它包含html标签

②html(val)
设置一个内容

③text()
获取文本值，不包含html标签

④text(val)
设置文本的值

⑤val()
获取标签中value属性的值

⑥val(val)
给标签中value属性设置值

第四部分:CSS操作

一丶CSS
①css(name)
获取指定名称为name的样式

取得第一个段落的color样式属性的值。

jQuery 代码:
$("p").css("color");

②css(name,value)
设置属性名为name的value值样式

将所有段落字体设为红色

jQuery 代码:
$("p").css("color","red");

③css(properties)
设置多个CSS样式

将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });

二丶位置
……

三丶尺寸
……

第五部分:文档处理

一丶内部插入
①append()
A.append(B):将B插入到A的内部的末尾处 (进行的是剪切操作)

向所有段落中追加一些HTML标记。

HTML 代码:
<p>I would like to say: </p>

jQuery 代码:
$("p").append("<b>Hello</b>");

结果:
[ <p>I would like to say: <b>Hello</b></p> ]

②appendTo()
A.appendTo(B):将A插入到B的内部的末尾处 (进行的是剪切操作)

把所有段落追加到ID值为foo的元素中。

HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>

jQuery 代码:
$("p").appendTo("div");

结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

③prepend()
A.prepend(B):将B插入到A的内部的开头处 (进行的是剪切操作)

向所有段落中前置一些HTML标记代码。

HTML 代码:
<p>I would like to say: </p>

jQuery 代码:
$("p").prepend("<b>Hello</b>");

结果:
[ <p><b>Hello</b>I would like to say: </p> ]

④prependTo()
A.prependTo(B):将A插入到B的内部的开头 (进行的是剪切操作)

把所有段落追加到ID值为foo的元素中。

HTML 代码:
<p>I would like to say: </p><div id="foo"></div>

jQuery 代码:
$("p").prependTo("#foo");

结果:
<div id="foo"><p>I would like to say: </p></div>

二丶外部插入
①after()
A.after(B):将B插入到A的外部的后面 (进行的是剪切操作)

在所有段落之后插入一些HTML标记代码。

HTML 代码:
<p>I would like to say: </p>

jQuery 代码:
$("p").after("<b>Hello</b>");

结果:
<p>I would like to say: </p><b>Hello</b>

②before()
A.before(B):将B插入到A的外部的前面 (进行的是剪切操作)
③insertBefore()
A.insertBefore(B) 将A添加到B的前面(外面
④insertAfter()
A.insertAfter(B) 将A加入B的后面(外部)

三丶复制
①clone()
克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

HTML 代码:
<b>Hello</b><p>, how are you?</p>

jQuery 代码:
$("b").clone().prependTo("p");

结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>

②clone(true)
如果里面有参数true，那么表示复制过去的内容也与原内容具有相同的事件(请参考相关代码)

四丶删除
①empty()
删除所有的子节点，不包括自己

把所有段落的子元素（包括文本节点）删除

HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:
$("p").empty();

结果:
<p></p>

②remove
删除所有子节点，包括自己，同时删除事件

③detach()
删除所有子节点，包括自己，将事件保留

五丶替换
①replaceWith()
将所有匹配的元素替换成指定的HTML或DOM元素。

把所有的段落标记替换成加粗的标记。

HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:
$("p").replaceWith("<b>Paragraph. </b>");

结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。

HTML 代码:
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

jQuery 代码:
$('.third').replaceWith($('.first'));

结果:
<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

②replaceAll()
用匹配的元素替换掉所有 selector匹配到的元素。

六丶包裹

第六部分:效果和事件

一丶效果

①显示：show()
显示隐藏的匹配元素。

显示所有段落

HTML 代码:
<p style="display: none">Hello</p>

jQuery 代码:
$("p").show()

②隐藏：hide()
隐藏显示的元素

隐藏所有段落

jQuery 代码:
$("p").hide()

③淡入：fadeIn()
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

用600毫秒缓慢的将段落淡入

jQuery 代码:
$("p").fadeIn("slow");

用200毫秒快速将段落淡入，之后弹出一个对话框

jQuery 代码:
$("p").fadeIn("fast",function(){
   alert("Animation Done.");
 });

④淡出：fadeOut()
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

用600毫秒缓慢的将段落淡出

jQuery 代码:
$("p").fadeOut("slow");

用200毫秒快速将段落淡出，之后弹出一个对话框

jQuery 代码:
$("p").fadeOut("fast",function(){
   alert("Animation Done.");
 });

⑤滑入：slideDown()
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

用600毫秒缓慢的将段落滑下

jQuery 代码:
$("p").slideDown("slow");

用200毫秒快速将段落滑下，之后弹出一个对话框

jQuery 代码:
$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

⑥滑出：slideUp()
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

用600毫秒缓慢的将段落滑上

jQuery 代码:
$("p").slideUp("slow");

用200毫秒快速将段落滑上，之后弹出一个对话框

jQuery 代码:
$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });

二丶事件

①页面加载

问题引入：
    <script type="text/javascript">
        document.getElementById("panel").onclick = function() {
        alert("元素已经加载完毕 !");
    }
        /*
            执行错误，为什么？
            因为dom还未加载完毕。
        */
    </script>

解决办法：
    方式一：将整个JS代码放到Body后面
    方式二：将整个JS代码放到页面加载函数里面

②事件绑定

绑定方式：
    $("#img").bind('click',function(){

    });

③事件移除

解绑方式：
    $('#btn').unbind("click");

④事件合成

$(".head").hover(function() {
    $(this).next().show();
}, function() {
    $(this).next().hide();
})

单独学习这些选择器比较简单，重点掌握多个种选择器进行组合获取元素，如果还没有找到，那么可以借助筛选里面的方法(过滤和查找)进行查找！
选择器这块旨在缩小查到范围，再结合筛选里面的方法可以精确找到需要操作的元素！

Marksunshine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery基础入门(一)

jquery第一部分:核心：函数和对象访问一丶页面加载函数代码://最原始最麻烦的写法jQuery(document).ready(function(){});//简写方式(开发中常用)$(function(){});二丶JQ与JS页面加载的区别1.JS页面加载存在覆盖问题，加载速度比JQ慢(除了要加载整个页面还得加载与之相关资源)2.JQ页面加载不存在覆盖问题，按照书写顺序依次执行，加
复制链接

扫一扫

专栏目录