JQuery

jQuery是一个JS函数库，100+函数，用于简化DOM操作　　(1)DOM操作简化函数

　　(2)事件处理函数

　　(3)动画函数

　　(4)AJAX操作

使用JQuery提供的函数

　　JQuery的版本：

　　JQuery1.x:体积较打，兼容IE，有缺失

　　JQuery2.x:体积少小，放弃IE，功能多

　　JQuery3.x:放弃IE，功能更加丰富

注意：推荐将jQuery.js的引入和自定义的JS代码编写在BODY最后。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>在HTML中使用jQuery</h1>
<button>为P添加样式</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat minus beatae corporis possimus quam numquam qui pariatur ex omnis corrupti nesciunt quo natus tenetur accusantium doloribus obcaecati dignissimos adipisci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet molestiae a et ab aperiam. Tempore a amet perferendis ea culpa ex blanditiis error sit. Eligendi aliquam error possimus tempora ullam.</p>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM实现：给所有的p元素添加边框和文字颜色
var list = document.querySelectorAll('p');
for(var i=0; i<list.length; i++){
    var p = list[i];
    p.style.border = "1px solid #080";
    p.style.color = "#080";
    p.style.backgroundColor = "#dfd";
}

//jQuery实现：给所有的p元素添加边框和文字颜色
//$('p').css('border', '1px solid #800');
//$('p').css('color', '#800');
//$('p').css('background-color', '#fdd');

</script>
</body>
</html>

jQuery函数的特性：

(1)几乎所有的函数都自带循环功能，可以对选中的元素进行遍历

(2) 几乎所有的函数都返回jQuery对象

练习：点击按钮后，修改所有P的样式 11:02~11:15

$( "button" ).on( "click", function( ) {

//按钮的单击事件处理过程....

});

ES6新特性：新的字符串声明方式—— ``字符串

(1)可以包含${}形式的变量占位符，如：

var str= `用户名：${uname} 年龄：${age+2}`

(2)支持字符串的换行

var str = `<tr>

</tr>`;

区分：DOM对象和jQuery对象

(1)DOM对象：浏览器把每个HTML标签都对应创建一个DOM对象

(2)jQuery对象：通过jQuery选择器函数($())返回的类数组对象，其中封装着DOM对象

(3) jQuery对象不能使用DOM对象的成员；反之也不行！

(4)jQuery对象转换为DOM对象：

$('div')[0].style.color = '#f00';

(5)DOM对象转换为jQuery对象：

$(domObj).css('color', '#f00'); //注意$()里边不能使用引号

使用jQuery查找元素 —— 重点

jQuery中查找元素，使用函数：

jQuery('选择器') 或其别名 $('选择器')

其中的参数选择器支持CSS中所有的选择器，并进行了扩展。

(1)Basic（基本选择器）

#id .class div * s1,s2,s3

<h1>基本选择器</h1>
<div class="dropdown">
    <a href="#3">产品大全</a>
    <ul class="menu">
      <li>冰箱</li>
      <li>洗衣机</li>
      <li>奶粉</li>
      <li>尿不湿</li>
    </ul>
</div>

<script src="js/jquery-1.11.3.js"></script>
<script>
//var r1 = $('div');
//console.log(r1);
//var r2 = r1.css('margin','0');
//console.log(r2);
//console.log(r1===r2); //true
//$('*').css('padding','0');

$('*').css('margin','0').css('padding','0');
$('a').css('color','#000').css('text-decoration', 'none');
$('.menu').css('border','1px solid #aaa').css('position','absolute').css('width','120px').hide();

var isShown = false; //下拉菜单当前是否显示
//点击超链接，则隐藏/显示下方的菜单
$('.dropdown > a').click(function(e){
    e.preventDefault(); //阻止超链接被点击的默认行为

    if(isShown){
      $('.menu').hide();
      isShown = false;
    }else {
      $('.menu').show();
      isShown = true;
    }
});

(2)Hierarchy（层级选择器）

parent > child parent child

prev + nextSibling prev ~ nextAllSibling

<h1>层级选择器</h1>

<div>

</div>

$('.box + p').css('text-decoration','underline');

$('.box ~ p').css('color','#0a0');

</script>

--------------------------------

<h1>层级选择器</h1>

<li><a href="#">二十元套餐</a></li>

<li><a href="#">三十元套餐</a></li>

</ul>

$('*').css('margin','0').css('padding','0');

$('ul.tabs').css('list-style','none');

$('ul.tabs > li').css('float','left').css('margin','16px 0');

$('ul.tabs > li > a').css('text-decoration','none').css('color','#000').css('padding', '8px 16px').css('border-bottom','1px solid #aaa');

//为标签页头中的a绑定监听函数

var jQObject = $('ul.tabs > li > a');

jQObject.click(function(e){

e.preventDefault();

//重置所有a的边框为下边框

jQObject.css('border','none').css('border-bottom', '1px solid #aaa');

//当前被点击的a，修改为上左右边框

$(this).css('border','1px solid #aaa').css('border-bottom', 'none');

});

</script>

(3)Attribute（属性选择器）

[属性名] [属性名="值"]

[属性名^="值") [属性名$="值"]

[属性名*="值"] [属性名!="值"]

<h1>属性选择器</h1>
<a href="#" title="空链接">链接1</a>
<a href="http://tmooc.cn" title="绝对地址">链接2</a>
<a href="#chapter1" >链接3</a>
<a href="1.jpg">链接4</a>
<a href="2.png">链接5</a>
<a href="3.gif">链接6</a>

<script src="js/jquery-1.11.3.js"></script>
<script>
$('a').css('color','#000');

//(1)选定所有具备title属性的链接元素，添加边框
$('a[title]').css('border','1px solid #aaa');
   //(2)选定所有指向空锚点(#)的链接元素，颜色淡灰
$('a[href="#"]').css('color','#666');
   //(3)选定所有指向绝对URL(http开头)的链接元素，背景颜色淡蓝
$('a[href^="http"]').css('background','#aaf');
   //(4)选定所有指向的图片URL(以.jpg/png/gif结尾)的链接元素，字体加粗
$('a[href$=".jpg"],a[href$=".png"],a[href$=".gif"]').css('font-weight','bold');

</script>

(4)Form（表单元素选择器）

:text :password :radio :checkbox

:submit :reset :button :image

:hidden :file

$(':text') 选定 <input type="text">的元素

:disabled :enabled :checked :selected

选定具有特定属性的表单元素

<h1>表单元素选择器</h1>

</form>

$(':text, :password').css('border-radius','3px');

$(':image, img').css('vertical-align','middle');

</script>

(5)Basic Filter（基本过滤选择器）

:first :last :even :odd

:eq(i) :lt(i) LessThan :gt(i) GreaterThan

:not(selector)

注意：基本过滤选择器把选定的所有元素放在一个大的集合中！下标从0开始分配。

<h1>基本过滤选择器</h1>

<ol>

</ol>

<hr>

<ul>

</ul>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

//(1)选定第一个li，字体加粗

$('li:first').css('font-weight','bold');

//(2)选定最后一个li，字体变斜

$('li:last').css('font-style','italic');

//(3)选定下标为1的li，背景红色

$('li:eq(1)').css('color', '#f00');

//(3)选定奇数个li，背景淡蓝色

$('li:odd').css('background', '#ddf');

//(4)选定偶数个li，背景淡黄色

$('li:even').css('background', '#ffd');

//(5)选定第3个li，添加删除线

$('li:eq(3)').css('text-decoration', 'line-through');

//(4)选定大于3个li，添加border-left

$('li:gt(3)').css('border-left', '1px solid #000');

$('tr td:first').css('background', '#dfd');

</script>

(6)Child Filter（子元素过滤选择器）

:first-child :last-child

:nth-child(2 / odd / even / 3n+1) :only-child

注意：子元素过滤选择器把选定的元素按照所在父元素进行分组！下标从1开始分配。

<h1>子元素过滤选择器</h1>

<ol>

</ol>

<hr>

<ul>

</ul>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

//(1)选定第一个li，字体加粗

$('li:first-child').css('font-weight','bold');

//(2)选定最后一个li，字体变斜

$('li:last-child').css('font-style','italic');

//(3)选定奇数个li，背景淡蓝色

$('li:nth-child(2n+1)').css('background','#eef');

//(4)选定偶数个li，背景淡黄色

//(5)选定第3个li，添加删除线

$('li:nth-child(3)').css('text-decoration','line-through');

//(4)选定大于3个li，添加border-left

$('tr td:first-child').css('background', '#dfd');

</script>

posted @ 2016-10-17 17:47 六把刀阅读(654) 评论(0) 编辑收藏举报

刷新页面返回顶部

六把刀

JQuery

公告