jQuery基础知识

Posted 2020-09-12 一路晨光

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery基础知识相关的知识，希望对你有一定的参考价值。

什么是jQuery，有什么特点，有什么好处

jQuery是一个js文件，它是一个javascript框架或脚本库。

特点是，将一些原始js脚本封装。利用选择器查找要操作的节点，并且将这些节点封装成jQuery对象，只需要调用jQuery对象的方法或者属性，就可以实现对节点的操作。

这样做的好处是：可以兼容不同的浏览器（解决了大部分的兼容性问题），另外，代码也得到简化。便于脚本开发。类似jQuery框架很多,例如prototype,ExtJs,yahoo,等都是JavaScript框架。

jQuery编程的基本步骤

1. 利用选择器查找要操作的节点。 var $obj=$(‘#d1’);

2. 调用jQuery对象的方法或者属性。 $obj.css(‘color’,’red’);

jQuery对象

什么是jQuery对象

利用jQuery选择器选出的对象才是jQuery对象。jQuery对象是一个集合,集合元素是原有js中DOM对象。注意：只有jQuery对象才可以使用jQuery提供的函数

对象类型的转换

1. 将一个DOM对象转换成jQuery对象 $(DOM对象)

//原始js实现
function f1(){
　　var a1=document.getElementById("a1");
　　alert(a1.innerhtml);
　　var $a1=$(a1);//将dom a1对象转换成jQuery对象
　　alert($a1.html());
}

2. 将一个jQuery对象转换成DOM对象

获取jQuery对象集合中的第一个DOM对象，jQuery对象[0] 或者jQuery对象.get(0)

//jQuery实现
function f2(){
　　//获取id=a1的HTML元素
　　var a1=$("#a1");//利用id选择器选择$("#id值")
　　//获取a1中的html文本
　　alert(a1.html());//利用html()函数获取信息
　　//将jQuery对象转换成DOM对象
　　alert(a1[0].innerHTML);//a1[0] dom对象
　　//a1.get(0) jQuery函数,得到第一个元素 是DOM对象
　　alert(a1.get(0).innerHTML);
}

3. 将一个字符串转换成jQuery对象 $(字符串)

function f3(){
    var opt=‘<option value="1">北京</option>‘;
     var $opt=$(opt);//将一个字符串转换成jQuery对象
    alert($opt.html());
}

页面载入完毕执行指定函数fn

$(document).ready(function(){}); 或者 $(function(){});

//页面载入完毕后执行alert(),等价于onload事件
$(document).ready(function(){
    alert($("#a1").html());
});    
 //更简洁写法  在页面载入完毕后执行
$(function(){
    alert($("#a1").html());
})

jQuery选择器(参考文档)

什么是选择器？

jQuery借鉴了css选择器的语法，用来方便地查找要操作的节点。

基本选择器

1. 按id属性值选择 $("#id值")

2. 按class属性值选择 $(".class值")

3. 按元素名称选择 $("元素名称")

4. 选取所有元素 $(“*”)

5. 选取多个元素,用逗号隔开选择器　　$("#c1,#c2")//选取id=c1和id=c2的元素

层级选择器

1. 父子关系 $("选择器1>选择器2")“>”代表父子关系

2. 祖先后代关系 $("选择器1 选择器2") （）

3. 前后关系 $("pre+next");(pre next紧挨着)

4. 兄弟关系(平级关系) $("pre ~ siblings")

简单选择器

1. 选第一个 :first

2. 选最后一个 :last

3. 选基数元素 :even

4. 选偶数元素 :odd

5. 选指定元素 :eq(索引)

6. 选大于指定值的元素 :gt(索引)

7. 选小于指定值的元素 :lt(索引)//索引值从0开始

内容选择器

1. 根据指定文本信息选择 :contains(text);

2. 匹配没有子元素或者文本为空 :empty

（6）可见性选择器

a.选择不可见元素 :hidden （input的type是hidden的，样式diplay：none的）

b.选择可见元素 :visible

（7）属性选择器

a.按属性值做条件选择 [属性名=属性值]

（8）表单元素选择器

a.选择所有表单元素,例如text,textarea,select :input

b.选择type="text"类型的输入框 :text

c.选择type="checkbox"类型元素 :checkbox

d.其他:password,:hidden,:radio,:button,:image,:file

（9）表单对象属性选择器

a.选择可用表单元素 :enabled

b.选择不可用表单元素 :disabled <input type=”text” disabled=”disabled”/>

c.选择被选中的checkbox,radio :checked <input type=”checkbox” checked=”checked”/>

d.选择被选中的select的option :selected

<option value=”2” selected=”selected”>fdfgsgd<option/>

5、jQuery的dom操作

（1）查询节点

$(“选择器”);

找到一个节点以后，可以通过以下四个方法来访问节点的html内容、文件内容、属性值、值。

html() text() attr() val()

（2）创建节点

$(html);

（3）插入节点

append();作为最后一个孩子追加

5、jQuery属性和样式函数

（1）属性函数

a.属性操作

attr(属性名);//返回属性值

attr(属性名,属性值);//设置属性名=属性值

b.value属性操作

val();//返回value属性值

val(值);//设置value=值

c.获取div或span等元素文本信息操作 (纯文本(即字符串))

text();//返回元素中的文本内容相当于属性innerText

text(值);//设置元素中的文本内容

d.获取和设置div等元素的信息,内容当作HTML信息处理

html(); 相当于属性innerHTML

html(值);

e.class属性操作

addClass(值);//设置元素class="值"

removeClass(值);//删除class属性中的值

2)css样式函数

a.css样式控制

css(样式属性)://获取样式属性的值

css(样式属性,值);//设置样式属性值

b.宽和高的控制

width();//获取元素的宽

width(值);//设置元素的宽度

height();//获取元素的高

height();//设置元素的高度

5.jQuery事件函数

1)页面载入

$(document).ready(function(){}) 或 $(function(){})

2)基本事件

click();//触发单击事件,执行单击事件

click(fn);//为元素绑定一个单击处理

focus();//获取焦点

focus(fn);

blur();//失去焦点

blur(fn);

change();//选项改变用于select中option选项改变时发生该事件

change(fn);

unload(fn);//设置浏览器卸载页面前执行

mouseover();//鼠标移上去

mouseover(fn);

mouseout();//鼠标移开

mouseout(fn);

3)事件切换函数

a.hover(over,out);鼠标移上去和移开两个事件,移上去执行over函数,移开执行

out函数

b.toggle(f1,f2,f3....);

为一个元素绑定多个不同的单击处理事件,每次单击调用不同的fn

4)事件处理函数

a.bind("事件类型",fn);为元素绑定指定类型的事件处理事件

$("#btn1").click(fn);

$("#btn1").bind("click",fn);

b.unbind("事件类型");为元素取消绑定的处理函数

$("#btn1").unbind("click");//取消click事件

$("#btn1").unbind();//取消绑定的所有事件

c.trigger("事件类型");

触发元素绑定的事件处理

$("#btn1").click();

$("#btn1").trigger("click");

d.live("事件类型",fn);

为现有和将来动态添加的元素绑定指定类型的事件

6.文档处理

*1)创建文档对象

$("字符串")

*2)将文档对象添加到页面

append(对象);//将对象值插入到元素内部末尾处

prepend(对象);//将对象值插入到元素内部的前面

after(对象);//将对象值插入到元素后面作为兄弟

before(对象);//将对象值插入到元素前面

*3)将文档元素删除

empty();//将元素内容清空

remove();//将元素删除

4)将文档元素复制

clone();//复制元素

clone(true);//深度复制,可以将关联时间复制

5)将文档元素利用新元素包裹起来

wrap(html);//利用指定的元素将文档元素包裹起来

6)将文档元素替换

replaceWith(html);//利用html元素替换原有的

7.特效函数

主要实现隐藏和显示功能.

1)基本效果

show();//将元素显示

show(speed);//在指定speed时间内完成显示

speed:参数值可以为‘slow‘,‘normal‘,‘fast‘

也可以使用数字1000,2000(毫秒)

hide();//将元素隐藏

hide(speed);在指定时间内隐藏

toggle();//切换隐藏和显示.

2)滑动效果(改变元素高)

slideDown(speed);//将元素显示

slideUp(speed);//将元素隐藏

3)淡入淡出效果(改变元素的透明度)

fadeIn(speed);//将元素显示

fadeOut(speed); //将元素隐藏

4)自定义动画：animate();

8.筛选函数

基于现有jQuery元素对象查找其他元素.

1)过滤

a.eq(索引)

获取jQuery对象集合中某一个元素

b.not(选择器)

从jQuery对象集合中将符合选择器的元素排除

返回剩下的元素.

c.is(选择器)

从jQuery对象集合中获取符合选择器的元素

d.slice(begin,[end])

从jQuery对象集合中获取begin-end的子元素

2)查找

a.find(选择器)

从当前jQuery集合中将符合选择器的后代元素

返回.

b.children(选择器)

从当前jQuery集合中将符合选择器的子元素返回

c.parent()

获取当前jQuery对象的父元素

d.siblings()

获取当前jQuery对象的兄弟

9.工具函数

a.$.trim(str)

字符串过滤空格,只过滤前后空格

b.$.each(集合,fn)

循环操作,每一个元素触发fn处理

===========================练习=======================

1.筛选表格中的内容

选择器 内容选择器 可见性选择器

<body>:

<table>

<tr><td>魏晨参加了快乐男声</td><td>2009-9-14</td></tr>

<tr><td>我们都是乐橙</td><td>2009-9-14</td></tr>

<tr><td>love vision</td><td>2009-9-14</td></tr>

<tr><td>魏晨现在在韩国</td><td>2009-9-14</td></tr>

</table>

<script>:

//将标题带有"魏晨"的加背景色

$(function(){$("td:contains(‘魏晨‘)").css("background-color","red");});

//筛选按钮的处理

$(function(){

$("#btn1").click(function(){//单击处理

$("tr").hide(2000);//将所有tr隐藏

$("tr:contains(‘魏晨‘)").show(2000);//将带有魏晨的标题显示出来

});

//恢复按钮的处理

$(function(){

$("#btn2").click(function(){

//$("tr").show();//将所有tr显示

$("tr:hidden").show();//将所有隐藏的tr显示

});

2.多选框，点击全选实现全部选中或者全部不选的

选择器 属性选择器 表单元素选择器 表单对象属性选择器

<body>:

<input type="checkbox" name="loves" value="旅游">旅游

<input type="checkbox" name="loves" value="交友">交友

<input type="checkbox" name="loves" value="打游戏">打游戏

<script>:

$(function(){

//为全选checkbox追加单击处理

$("#checkall").click(function(){

//单击处理逻辑,修改属性值

var flag=$("#checkall").attr("checked");//读取checkall选中状态值

//为name=loves的设置状态值

$(":checkbox[name=‘loves‘]").attr("checked",flag);

});

//为获取爱好按钮追加单击处理

$(function(){

$("#btn1").click(function(){

//获取选中的checkbox,返回的是jquery对象本质是DOM对象

var $chks=$(":checkbox[name=‘loves‘]:checked");//获取信息

//循环访问$chks中的DOM对象

var str="";

for(var i=0;i<$chks.length;i++){

//$chks[i]是DOM对象,需要转换成jQuery对象才可以使用val()函数

str+=$($chks[i]).val();

}

$("#s1").html(str);//设置信息

});

3.属性函数 attr(); val(); text(); html();

<body>:

用户名:<input type="text" name="name" id="name"><br>

爱好:

</select><br>

<div id="d1"><span>你好!我是纯的文本</span></div>

<script>:

//获取信息按钮处理

$(function(){

$("#btn2").click(function(){

alert($("#name").val());//获取用户名

$("#name").val("vision");//修改用户名

alert($("#love").val());//获取爱好选中项的value

$("#love").val("看电视");//修改选中项

alert($("#d1").text());//获取纯文本

alert($("#d1").html());//获取元素中的html

//向设置id=d2的div中添加html信息

$("#d2").html("<font color=‘red‘>你好,我是纯爷们</font>");

//$("#d2").text("<font color=‘red‘>你好,我是纯爷们</font>");

});

<body>:

<script>:

//切换按钮的处理

$(function(){

//切换按钮的处理

$("#btn1").click(function(){

alert($("#image1").attr("src"));//获取元素的src属性值

//修改img的src属性值

//$("#image1").attr("width","300");

$("#image1").width(500);//修改宽

//$("#image1").attr("height","300");

$("#image1").height(500);//修改高

$("#image1").attr("src","images/002.jpg");

});

4.表格隔行变色 鼠标一上去变色 移开恢复原来颜色

addClass(值); removeClass(值);

mouseover(fn); mouseout(fn);

hover(over,out); toggle(f1,f2,f3....);

<body>:

</table>

<style>:

.t1 {background-color:#FFAACC;}

.t2 {background-color:#AACCFF;}

.t3 {background-color:#FFFF00;font-style:italic;}

<script>:

//隔行变色

$(function(){

$("tr:even").addClass("t1");

$("tr:odd").addClass("t2");

});

//鼠标移动背景色

$(function(){

//移上tr的处理

$("tr").mouseover(function(){

//为鼠标移上去的tr追加t3样式

$(this).addClass("t3");

}).mouseout(function(){//移开tr的处理,去除t3样式

$(this).removeClass("t3");

});

})

//利用hover事件函数实现=mouseover+mouseout

$(function(){

$("tr").hover(

function(){//over

$(this).addClass("t3");

function(){//out

$(this).removeClass("t3");

});

})

//toggle事件处理

$(function(){

$("#btn1").toggle(

function(){

alert("你敢点我,再点一次试试");

function(){

alert("再点,有种再点一次");

function(){

alert("再点一次,弄死你");

}

);

});

5.文档处理 $("字符串") append(对象) after(对象) remove();

<body>:

城市:<select id="c1"></select>

<script>:

var cities = [

{"id":1,"name":"北京"},

{"id":2,"name":"上海"},

{"id":3,"name":"广州"}];

$(function(){

for(var i=0;i<cities.length;i++){

var opt_str = "<option

value=‘"+cities[i].id+"‘>"+cities[i].name+"</option>";

var $opt = $(opt_str);//根据字符串创建一个option对象

$("#c1").append($opt);//将$opt添加到select内部末尾处

}

});

//添加按钮的单击处理

$(function(){

$("#btn1").bind("click",function(){

//将文本框信息得到,添加到select中

var value = $("#content").val();//获取文本框信息

//非空检查

$("#s1").remove();//清除输入框后面的span

if(value == ""){

//提示错误

var $s1 = $("<span id=‘s1‘>不能为空!</span>");

$("#content").after($s1);//将$s1放到输入框后面

return;

}

var opt_str = "<option>"+value+"</option>";//拼成option

var $opt = $(opt_str);//将opt_str变成jQuery文档对象

$("#c1").append($opt);//将$opt追加到select

});

6.文档处理 clone();

<body>:

<script>:

为水果项添加单击处理利用live实现

$(function(){//为现有和将来生成的li元素添加单击处理

$("li").live("click",function(){

var $li = $(this).clone();

$("#u1").append($li);

});

7.显示与隐藏功能

<body>:

<script>:

//页面出现时,显示指定图片,设置大小.宽150,高200

$(function(){

$("#image1").attr("src","images/002.jpg").width(150).height(200);

});

//基本特效

$(function(){

//隐藏处理

$("#btn1").bind("click",function(){

$("#image1").hide(5000);//隐藏

});

//显示处理

$("#btn2").click(function(){

$("#image1").show(5000);//隐藏

});

//切换

$("#btn3").click(function(){

$("#image1").toggle(2000);

});

//滑动效果

$(function(){

//隐藏

$("#btn4").click(function(){

$("#image1").slideUp(2000);

});

//显示

$("#btn5").click(function(){

$("#image1").slideDown(2000);

});

//淡入淡出

$(function(){

//隐藏

$("#btn6").click(function(){

$("#image1").fadeOut(2000);

});

//显示

$("#btn7").click(function(){

$("#image1").fadeIn(5000);

});

8.animate()函数

(1)<body>:

<div id="d1">你好,要学好编程,需要不断学习!</div>

<script>:

$(function(){

$("#btn1").click(function(){

//经过5秒时间字体放大到10em

$("#d1").animate({fontSize:‘10em‘},5000)

.animate({fontSize:‘1em‘},5000);

});

(2)<body>:

</div>

<script>:

$(function(){

$("#btn1").click(function(){

f1();

setInterval(f1,800);

});

function f1(){

$("#d1").animate({left:"500px"},200)

.animate({top:"200px"},200)

.animate({left:"5px"},200)

.animate({top:"5px"},200);

}

9.工具函数 $.trim(str) $.each(集合,fn)

<body>:

<div>hello jQuery   </div>

<script>:

//将div中的内容,生成li添加到ul列表中

$(function(){

$.each(

$("div"),//div元素集合

function(i,div){//i:元素索引,div:循环的当前元素(DOM对象)

//将div中的文本获取,封装生成li对象

var txt=$(div).text();//获取文本

txt=$.trim(txt);//去掉空格

var $li=$("<li>"+txt+"</li>");//编程jQuert对象

$("#u1").append($li);//将li对象添加到ul内部

});

10.not(选择器) find(选择器) children(选择器) parent() siblings()

(1)

<style>:

.h1 {background-color:#00BBBB;}

.s1 {background-color:#FFAABB;}

.s2 {background-color:#AAFFBB;}

.selected {background-color:#AABBCC;}

<body>:

<table>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<script>:

//隔行变色

$(function(){

//选择index>0的tr

//$("tr:gt(0):even").addClass("s1");//奇数行设置s1样式

//$("tr:gt(0):odd").addClas("s2");//偶数行设置s2样式

//选择所有tr,排除class="h1"

$("tr:not(.h1):even").addClass("s1");

$("tr:not(.h1):odd").addClass("s2");

});

//选中效果

$(function(){

//如果有radio选中,将当前行设置selected样式

$(":radio:checked").parent().parent().addClass("selected");

//添加tr单击事件,第一行不加

$("tr:not(.h1)").click(function(){

$("tr").removeClass("selected");//清除tr选中样式

//为选中行设置selected样式,其他行清除selected样式

$(this).addClass("selected").siblings().removeClass("selected");

$(this).find(":radio").attr("checked",true);//将当前行的radio选中

});

(2)

<style>:

#menu{width:300px;}

.has_children{background:#555;color:#fff;cusor:pointer;}

.highlight{color:#fff;background:green;}

div{padding:0;}

div a{background:#888;display:none;float:left;width:300px;}

<body>:

</div>

</div>

</div>

<script>:

$(function(){

//为span添加单击处理

$(".has_children span").click(function(){

//将span的兄弟元素a显示

$(this).siblings().show();

//隐藏其他div的a元素

$(this).parent().siblings().find("a").hide();

//为span父元素div添加hightlight样式

$(this).parent().addClass("highlight");

//将其他div的highlight样式取消

$(this).parent().siblings().removeClass("highlight");

});

11.部门员工切换隐藏显示

<style>:

.dept{background-color:#AAFFCC;}

.emp{background-color:#FFCCFF}

<body>:

<table>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

<script>:

$(function(){

//为部门tr添加单击事件

$(".dept").click(function(){

//将员工信息隐藏或显示

var id=this.id;//获取部门tr的id属性

var express=".e"+id;//拼成一个类选择器".e1",".e2"

$(express).toggle();//按".e1"格式选择员工tr,执行切换工作

});

12.颜色变换

<body>:

</ul>

<h1 class="title">体育新闻,南非世界杯,冷门不断</h1>

</div>

<h1 class="title">娱乐新闻,赵薇产后复出,片酬大涨</h1>

</div>

<script>:

$(function(){

//li添加单击处理

$("#skin li").click(function(){

//将当前li设置成selected,其他的取消selected

$(this).addClass("selected").siblings().removeClass("selected");

//引入li相应的css样式文件

var file="css/"+this.id+".css";

$("#cssfile").attr("href",file)

});

</script>

<link>:

13.图片变大

<body>:

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

<script>:

$(function(){

//为a元素添加mouseover

$("img").mouseover(function(e){

//动态添加一个div,div中显示大图

//获取当前a元素的href值

var image_url = $(this).parent().attr("href");

var $div = $("<div id=‘tooltip‘><img src=‘"+image_url+"‘/></div>");

//设置$div样式,指定显示的位置left,top

$div.css("left",e.pageX);//设置div显示的left值

$div.css("top",e.pageY);//设置div显示的top值

$("body").append($div);//将div添加chuch到页面中

$div.show();//将div大图显示

}).mouseout(function(){//鼠标移开mouseout事件处理

$("#tooltip").remove();//将动态添加的div删除

alert("affga");

});

<style>:

/* tooltip */

#tooltip{

position:absolute;

}

以上是关于jQuery基础知识的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段