jQuery 基础

女爷i 2022-03-11 00:54 218阅读 0赞

jquery是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。在使用jquery之前必须先引入它的库，如引入jquery-1.8.3.js  此一般用于学习阶段，而jquery-1.8.3.min.js 则一般用于使用阶段； 引入代码如下

所有的jquery代码皆写在页面加载函数，其一般格式如下：

$(function()\{

Jquery代码

\});

**获取元素的方法**

JS: document.getElementById()；

JQ：$(“\#id”)

**Jquery对象与DOM对象的转换**

//JQ对象转换成DOM对象的第一种方式

//$("\#span1")\[0\].innerHTML="呵呵哒！";

//JQ对象转换成DOM对象的第二种方式

$("\#span1").get(0).innerHTML="呵呵哒！";

JQ对象只能操作JQ里面的属性和方法；JS对象只能操作JS里面的属性和方法。

**使用jquery完成广告定时弹出操作**

第一步：引入jQuery相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素。

第四步：设置定时操作(显示广告图片的函数)

第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作(隐藏广告图片的函数)

第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作

var time;

$(function()\{

time=setInterval("showAd()",3000);

\});

function showAd()\{

//$("\#img1").show();

//$("\#img1").slideDown(3000);

$("\#img1").fadeIn(3000);

clearInterval(time);

time = setInterval("hideAd()",5000);

function hideAd()\{

//$("\#img1").hide();

//$("\#img1").slideUp(3000);

$("\#img1").slideUp(3000);

clearInterval(time);

</script>

toggle方法可以切换元素的可见状态，如果被选元素可见，则隐藏元素，如果被选元素不可见，则显示元素。可以用来很方便的操作图片的显示与隐藏，当然需要通过一个按钮的控制来完成。

**jQuery的选择器**

**基本选择器**

id选择器：$(“\#id名称”);

元素选择器：$(“元素名称”);

类选择器：$(“.类名”);

通配符：\*（表示所有）

多个选择器共用(并集)

**层级选择器**

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

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

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

**基本过滤选择器**

`$('li').first()``等价于：$(“li:first”)表示选择第一个元素。`

一些可供选择的选项：first、last、not、even、odd、eq、contains、empty、has、parent、hidden、visible

**此外还有属性选择器和表单选择器**

**使用JQ完成表格的隔行换色**

需要使用jquery的选择器(基本选择器、基本过滤选择器)

还需要使用jquery的CSS的方法(css(name,value))

如果CSS样式已经由美工写好，此时可以使用jquery的CSS类操作：addClass(class|fn)

第一步：引入jquery的类库

第二步：直接写页面加载函数

第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)

第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

$(function()\{

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

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

\});

</script>

**使用JQ完成全选和全不选**

需要使用jquery的选择器(id选择器、类选择器)

需要使用jquery的属性操作方法 prop()

第一步：引入jquery文件

第二步：书写页面加载函数

第三步：为上面的复选框绑定单击事件

第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

$(function()\{

//找到下面所有的复选框并设置属性checked()

/\*if($("\#select")\[0\].checked==true)\{

$(".selectOne").attr("checked",true)

\}\*/

$("\#select").click(function()\{

$(".selectOne").attr("checked",this.checked);

\});

</script>

**使用JQ完成省市二级联动**

首先需要遍历数组

$(function()\{

// 全选/ 全不选

$("\#checkallbox").click(function()\{

var isChecked = this.checked;

//使用对象访问的方式进行遍历，语法：$().each(function()\{\})

$("input\[name='hobby'\]")\[ThinkPad1\] .each(function()\{

this.checked = isChecked;

\});

被遍历的对象(是一个集合)

第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份

第二步：创建二维数组来存储省份和城市

第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】

第四步：接着遍历数组中的城市

第五步：创建一个城市文本节点

第六步：创建option元素节点

第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步：获取第二个下拉列表并将option元素节点添加进去

第九步：清除第二个下拉列表的option内容、

$(function()\{

//2.创建二维数组用于存储省份和城市

var cities = new Array(3);

cities\[0\] = new Array("武汉市","黄冈市","襄阳市","荆州市");

cities\[1\] = new Array("长沙市","郴州市","株洲市","岳阳市");

cities\[2\] = new Array("石家庄市","邯郸市","廊坊市","保定市");

cities\[3\] = new Array("郑州市","洛阳市","开封市","安阳市");

$("\#province").change(function()\{

//10.清除第二个下拉列表的内容

$("\#city").empty();

//1.获取用户选择的省份

var val = this.value;

//alert(val);

//3.遍历二维数组中的省份

$.each(cities,function(i,n)\{

//alert(i+":"+n);

//4.判断用户选择的省份和遍历的省份

if(val==i)\{

//5.遍历该省份下的所有城市

$.each(cities\[i\], function(j,m) \{

//alert(m);

//6.创建城市文本节点

var textNode = document.createTextNode(m);

//7.创建option元素节点

var opEle = document.createElement("option");

//8.将城市文本节点添加到option元素节点中去

$(opEle).append(textNode);

//9.将option元素节点追加到第二个下拉列表中去

$(opEle).appendTo($("\#city"));

\});

</script>

**使用JQ完成下拉列表左右选择**

第一步：确定事件(鼠标单击事件click)

第二步：获取左侧下拉列表被选中的option($(“\#left option:selected”)) \[假设左侧select定义了一个id=left\]

第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

$(function()\{

/\*1.选中单击去右边\*/

$("\#selectOneToRight").click(function()\{

$("\#left option:selected").appendTo($("\#right"));

\});

/\*2.单击全部去右边\*/

$("\#selectAllToRight").click(function()\{

$("\#left option").appendTo($("\#right"));

\});

/\*3.选中双击去右边\*/

$("\#left option").dblclick(function()\{

$("\#left option:selected").appendTo($("\#right"));

\});

</script>

**使用JQ完成表单校验**

**validate**是jquery插件，必须要在jquery基础上进行运行。

validate需要使用手动的声明，对哪个表单进行校验

$("\#registForm").validate（\{

rules：\{\}，

messages：\{\}

\}）；

rules语法规则：

rules：\{

字段名：校验器，

messages提示语法：

message：\{

字段名：\{校验器：“提示”，...\}

jQuery 基础

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jquery和$_jQuery基础

相关 [jQuery-1] jquery基础

相关 jQuery基础

相关 jQuery基础

相关 jQuery基础

相关 jQuery基础

相关 JQuery基础

相关 jQuery 基础

相关 jQuery基础

相关 JQuery基础