day04

jQuery

jQuery简介

jQuery概述

Query是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

jQuery作用

简化js编程，没有浏览器兼容问题

jQuery的体验

引入方式

本地引入

体验案例

案例需求：在页面上写3个div,然后分别用js方式隐藏展示，以及用jq方式隐藏展示。体验jq给你带来的快感

jQuery的语法

第一种写法

$(“div”)

第二种写法

jQuery(“div”)

单词严格区分大小写

$与jQuery等价

页面加载

js的页面加载

1、后加载的会覆盖先加载的，只会运行最后一个

jq的页面加载

第一种方式

$(function(){})

第二种方式

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

第三种方式

window.onload = function(){}

1、不会出现覆盖问题，而是从上到下，按照顺序执行

分析js加载和jq加载的区别

1、js后加载的会覆盖先加载的，只会运行最后一个，jq不会出现覆盖问题，而是从上到下，按照顺序执行2、js页面加载会等到所有资源包括图文资源加载完成后，才会执行js函数，jq不会等到所有图片加载完后才执行，而是在图片加载前就执行了3、js执行时机慢于jq4、jq页面加载不会等图片加载后执行，而是再图片加载前就运行5、jq页面加载有多少个都不会出现覆盖问题，谁在前面先执行谁

jQuery和DOM之间的转换

js转jq

$(input).val();

jq转js

$inp[0].value;

选择器

基本选择器

id

/id选择器/ var $value=$("#name").val();

class

/类选择器 */ var $arr=$(".p1");

标签

//获取到了所有的input标签 var $in=$(“input”);

层次选择器

parent child , 获得父元素内部的所有的子、孙子…元素。（祖孙关系） 返回的是数组

var $h2=$(“form input”);

parent > child , 获得父元素下面的子元素。（父子关系） 返回的是数组

var $h2=$(“form > input”);

prev + next , 获得prev元素同级下一个next元素。（兄弟关系） 但是注意 有换行影响 返回的是单个元素

var $h2=$(“input + fieldset”);

prev ~ siblings , 获得prev元素同级下所有siblings元素。（兄弟关系） 即获取同级标签后面的选定的标签元素 返回的是数组

var $p= $(“input ~ h3”);

基本过滤选择器

:first //$(“p:first”) 第一个

元素

:last //$(“p:last”) 最后一个

元素

:not(…) //$(“input:not(:empty)”) 所有不为空的 input 元素:even //$(“tr:even”) 所有偶数 元素:odd //$(“tr:odd”) 所有奇数 元素:eq(index) //$(“ul li:eq(3)”) 列表中的第四个元素（index 从 0 开始）:gt(index) //$(“ul li:gt(3)”) 列出 index 大于 3 的元素:lt(index) //$(“ul li:lt(3)”) 列出 index 小于 3 的元素:header //$(":header") 所有标题元素

-

属性选择器

[attribute] $("[href]") 所有带有 href 属性的元素[attribute=value] $("[href=’#’]") 所有 href 属性的值等于 “#” 的元素[attribute!=value] $("[href!=’#’]") 所有 href 属性的值不等于 “#” 的元素[attribute$=value] $("[href$=’.jpg’]") 所有 href 属性的值包含以 “.jpg” 结尾的元素

表单对象属性选择器

:enabled $(":enabled") 所有激活的 input 元素:disabled $(":disabled") 所有禁用的 input 元素:selected $(":selected") 所有被选取的 input 元素:checked $(":checked") 所有被选中的 input 元素

对表单的细节操作问题 演示：

<form action="/day01/s1" method="post" enctype="text/plain"> 用户名:<input type="text" name="username" /><br/> 密码:<input type="password" name="password" /><br/> 性别:<input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女<br/> <input type="submit" value="提交" /> </form> <script type="text/javascript"> var username=f1.username; var password=f1.password; f1.submit(); </script>

动画

<input type="button" value="显示" onclick="fun1()" /> <input type="button" value="隐藏" onclick="fun2()" /> <input type="button" value="切换" onclick="fun3()" /> <script> function fun1() { $("p").slideDown("fast"); } function fun2() { $("p").slideUp("slow"); } function fun3() { $("p").slideToggle("fast"); } </script>

滑动

案例

un4(){

$("p").fadeTo("slow",0.1); } - 淡出 - $("p").fadeOut("slow"); - 淡入 - $("p").fadeIn("slow"); - 切换 - $("p").fadeToggle("slow"); - 调整透明度

0-1之间 值越小 越暗

- $("p").fadeTo("slow",0.1);