Jquery基础入门(一)

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();
})

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值