jquery复习总结一

目录

jquery和html的整合

jquery入门

获取一个jquery对象

dom对象和jquery对象之间的转换

页面加载:

派发事件:

案例：

jquery中效果:

隐藏或展示

滑入或滑出

淡入或淡出

弹出广告案例

案例1-步骤分析（定时器）

选择器总结:

基本选择器

层次选择器

基本过滤选择器:

内容过滤:

可见过滤:

属性过滤器:

表单过滤:

案例2-隔行换色

属性和css操作总结:

对属性的操作:

对css操作:操作元素的style属性

案例3-全选或者全不选(prop操作属性)

案例4-省市联动

技术:

遍历数组

设置或者获取value属性

设置获取获取标签体的内容

创建一个元素:

案例代码实现

文档操作:

内部插入

外部插入

删除

案例5-左右移动

步骤分析:

1.确定事件

2.编写函数:

技术分析:

案例代码实现

jquery和html的整合

jquery是单独的js文件

通过script标签的src属性导入即可

<script src="../js/jquery-1.11.0.min.js"></script>

jquery入门

获取一个jquery对象

$("选择器")  或者 jQuery("选择器")


<script src="../js/jquery-1.11.0.min.js"></script>

<body>

<input type="text" id="username" value="jack"/>

</body>

<script>

var $username=$("#username");

alert($username.val());

</script>

</html>

dom对象和jquery对象之间的转换

dom对象===>jquery对象

$(dom对象)

jquery对象===>dom对象

方式1:

jquery对象[index]

方式2:

jquery对象.get(index)


<script src="../js/jquery-1.11.0.min.js"></script>

<body>

<input type="text" id="username" value="jack"/>

</body>

<script>

/* var obj=document.getElementById("username");

var $user=$(obj);

alert($user.val()); */

//alert($user.value);

var $u=$("#username");

//var obj=$u.get(0);

var obj=$u[0];

alert(obj.value);

</script>

</html>

页面加载:

js:

window.onload=function(){}//在一个页面中只能使用一次

jquery 在一个页面中可以使用多次

方式1:

$(function(){...})

方式2:

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

派发事件:

$("选择器").click(function(){...});

等价于 原生js中

dom对象.onclick=function(){....}

掌握事件:

focus

blur

submit

change

Click


<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="../js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(function(){

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

alert("123");

});

});

</script>

</head>

<body>

<input type="button" id="bId" value="点击查看" />

</body>

</html>

案例：


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>常见事件</title>

<style type="text/css">

#e02{

border: 1px solid #000000;

height: 200px;

width: 200px;

}

</style>

<script src="../js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#e01").blur(function(){

$("#textMsg").html("文本框失去焦点：blur");

}).focus(function(){

$("#textMsg").html("文本框获得焦点：focus");

}).keydown(function(){

$("#textMsg").append("键盘按下：keydown");

}).keypress(function(event){

$("#textMsg").append("键盘按：keypress");

}).keyup(function(){

$("#textMsg").append("键盘弹起：keyup");

});

var i = 0;

$("#e02").mouseover(function(){

$("#divMsg").html("鼠标移上：mouseover");

}).mousemove(function(){

//$("#divMsg").html("鼠标移动：mousemove , " + i++ );

}).mouseout(function(){

$("#divMsg").html("鼠标移出：mouseout");

}).mousedown(function(){

$("#divMsg").html("鼠标按下：mousedown");

}).mouseup(function(){

$("#divMsg").html("鼠标弹起：mouseup");

});

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

$("#buttonMsg").html("单击：click");

}).dblclick(function(){

$("#buttonMsg").html("双击：dblclick");

});

});

</script>

</head>

<body>

<input id="e01" type="text" /><span id="textMsg"></span> <br/>

<hr/>

<div id="e02" ></div><span id="divMsg"></span> <br/>

<hr/>

<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>

</body>

</html>

jquery中效果:

隐藏或展示

show(毫秒数) hide(毫秒数)

滑入或滑出

slideDown(毫秒数):向下滑入

slideUp(毫秒数):向上滑出

淡入或淡出

fadeIn(int):淡入

fadeOut(int):淡出


<script src="../js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(function(){

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

//$("#b1Div").hide(1000);

$("#b1Div").toggle(1000);

});

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

//$("#b2Div").slideUp(2000);

$("#b2Div").slideToggle(2000);

});

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

$("#b3Div").fadeOut(1000);

});

})

</script>

</head>

<body>

<input type="button" id="b1" value="显示/隐藏 b1Div" />

<div id="b1Div"></div> <br/>

<input type="button" id="b2" value="滑出/滑入b2Div"/>

<div id="b2Div"></div> <br/>

<input type="button" id="b3" value="淡出/淡入b3Div" />

<div id="b3Div"></div>

</body>

弹出广告案例

案例1-步骤分析（定时器）

1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();

2.编写展示广告方法

获取div,然后调用效果方法

设置另一个定时器 隐藏

3.编写隐藏广告的方法

获取div,然后调用效果方法


<script src="../js/jquery-1.11.0.min.js"></script>

<script>

$(function(){

setTimeout(showAd,2000);

});

function showAd(){

//$("#ad").show(1000);

$("#ad").slideDown(1000);

setTimeout("hideAd()",3000);

}

function hideAd(){

//$("#ad").hide(1000);

$("#ad").slideUp(1000);

}

</script>

</head>

<body>

<div id="ad" style="width:100%;display: none;">

<img src="../img/ad_.jpg" width="100%" />

</div>
时间： 2024-10-12 15:07:47

jquery复习总结一的相关文章

jQuery复习节点知识（1、查看（获取）和设置属性）

两个关键字  1.attr   2.prop 主要要实现获得和设置两种方式 话不多说就直接上代码: 首先是获取方式的: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery复习节点知识(1.查看(获取)和设置属性)</title> <script type="text/javasc

jQuery复习知识点（2、创建节点 3、插入节点）

创建节点的语法: $(html); 插入节点的语法: 话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery复习知识点(2.创建节点 3.插入节点)</title> <script type="text/javascript"src="../j

jQuery复习笔记

jQuery最大的好处:可以不用考虑浏览器的兼容性. 一.选择器 1.将普通对象封装成jQuery对象 var test = document.getElementById('zh-profile-ask-inner-list'); var jqtest = $(test); jqtest.get(0); 2.按id/tag/class/属性/组合查找 var test1 = $('#abc'); //按ID查找 var ps = $('p'); //按tag查找 var a = $('.red

jQuery复习—包装集

jQuery包装器 Part1:jQuery包装器的用法 一.通过包装器方法选择和包装将要操作的DOM元素 $()函数返回特殊的JavaScriopt对象(收集到了JavaScirpt元素并添加了拓展功能),它包含与选择器相匹配的DOM元素数组,这个数组中的元素是按照在文档中的顺序排列的.这个对象拥有大量有用的预定义方法,可作用于已收集的元素集合. 特点: (1):jQuery包装器方法,当执行完毕后(比如隐藏操作)会返回相同的一组元素,以便为另一个操作做准备. 例子:$("div.notLon

jQuery复习—事件

jQuery事件处理 一.就绪处理器事件的绑定方法 1.bind(eventType, data, hanlder) 创建一个函数,将其作为在匹配集中的所有元素上指定的时间类型的事件处理器 参数: eventType: (字符串)为将要创建的处理器指定事件类型的名称.可以使用空格分隔的列表指定多个事件类型 . data:(对象)调用者提供的数据,用来附加到event实例的data属性,以便处理器函数所使用.如果省略,则第二个参数为处理器函数 handler: (函数)将要创建为事件处理器的函数.

一点jquery复习

jquery获取select选中的值: $('#brand').change(function(){ var brand=$("#brand  option:selected").val(); alert(brand); }); <div class="col-sm-8 col-xs-12"> <select name="brand" id="brand" class="form-control&q

jQuery复习—DOM无关的jQuery实用函数

DOM无关的jQuery实用函数 一.实用函数的定义 定义在jQuery/$命名空间下不操作包装集的函数.一般来说这些使用函数要么操作除DOM元素以外的JavaScript对象,要么执行一些与Dom操作无关的操作. 二.操作JavaScript对象和集合 1.修建字符串  $.trim(value) 定义:删除传入的字符串开头和结尾处的空白字符,并返回修改后的结果 参数:value需要修改的字符串 返回值:修改后的字符串 $.trim($('#someFiled').val()); 2.遍历属性

jQuery复习—用动画和特效装扮页面（队列未整理）

用动画和特效装扮页面 一.显示和隐藏元素 设置元素的style.display属性(none/block/inline) 1.简单的改变元素显示和隐藏 (1).显示 show() (2).隐藏 hide() (3).切换状态 toggle() 2.渐变的显示和隐藏元素 (1).显示 show(speed,callback) (2).隐藏 hide(speed,callback) (3).切换状态 toggle(speed,callback) 参数说明: speed: 数字或者字符串.可以是若干毫

jQuery复习

jQuery选择器$(#id)==docunment.getelementById();-基本选择器(basic)$("#test")//获取id为test的元素 $(".test")//获取所有class为test的元素 $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素$(".class"),根据css的c

Jquery 复习练习（02）Javascript 与jquery 互转

Javascript 与jquery 互转 jquery 为<script src="jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { $("input").click(function () { var a= $("#shang ul li span"); var b = a.get(0);