jQuery基础

来源：互联网发布：mac os x无法更新编辑：程序博客网时间：2024/05/16 15:40

一. 什么是jquery

提高js编写速度，辅助工具，基于js的框架。

轻量级JS库，提供了简洁的API，基本解决了不兼容问题。

$ -- 选择器

//++i

对字符串无效，对数字有效

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Insert title here</title>

<scriptsrc="../js/jquery-1.11.1.js"></script>

function bigger(){

//获取段落原始字号16px

var size = $("p").css("font-size");

//去掉px以便于计算

size =size.replace("px","");

//+1后再设置给段落

$("p").css("font-size",++size+"px");

}

</script>

</head>

<body>

<inputtype="button"value="+"onclick="bigger()"/>

<p>1.引入jQuery</p>

<p>2.使用它的选择器选中节点</p>

<p>3.调用它的API处理节点</p>

</body>

</html>

//jQuery对象

本质上是一个DOM对象数组，它在该数组上扩展了一些操作。

jQuery对象就是经过封装的DOM数组

jQuery对象包含DOM对象，DOM对象只能调用DOM方法。

jQuery对象和DOM对象互转很容易

DOM对象转换为jQuery对象:${dom}

可以传入this或者事件源event都可以，加一个id也可以。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Insert title here</title>

<scriptsrc="../js/jquery-1.11.1.js"></script>

function print(){

console.log($("p"));

//使用选择器获得的是jQuery对象

var $ps = $("p");

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

//从jQuery对象中获得的是DOM对象

var p = $ps[i];

alert(p.innerHTML);

}

//调用函数时传入了this，使用img参数接收该值，这个值是DOM对象

function chg(img){

if($(img).width()==218){

//需要变大

$(img).width(250).height(250);

}else{

//变回原样

$(img).width(218).height(218);

}

</script>

</head>

<body>

<inputtype="button"value="打印" onclick="print()"/>

<p>jQuery对象本质上就是DOM数组</p>

<p>jQuery对象只能调用jQuery方法</p>

<p>DOM对象只能调用DOM方法</p>

<div>

</div>

</body>

</html>

自定义对象

直接量叫(JSON)

后绑定事件浏览器会自动传入event。

//冒泡机制

就是为了简化单机事件等等的事件。

//jQuery选择器

主要是用来选择节点

1. 基本选择器基本和CSS一样

2. 层次选择器基本和CSS一样

3. 过滤选择器分为几类。

4. 表单选择器就是用来选择input，用来选择表单控件

//基本选择器

1. 元素选择器标签

2. 类选择器 .class

3. id选择器 #id

4. 选择器组 #div .class

//层次选择器

$(“select1 select2”) 子孙

$(“select1>select2”) 子元素

$(“select1+select2”)下一个弟弟

$(“select1~select2”)选择所有弟弟

//body上写onload等于window.onload=function(){}

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Insert title here</title>

<scriptsrc="../js/jquery-1.11.1.js"></script>

window.onload=function(){

//1.基本选择器

//和CSS选择器一样

//2.层次选择器

//2.1.选择儿子和孙子

//2.2.选择弟弟

console.log($("#gz~li"));

//3.过滤选择器(*)

//3.1.基本过滤选择器(*)

//first last

//eq(index) 下标等于index的元素 gt(index)下标大于index的元素 lt(index)下标小于index的元素

//even 挑选偶数行 odd技术航

//not(selector) 筛选之后再把selector排除在外

//jQuery获取的是DOM数组

console.log($("li:first")[0].innerHTML);

console.log($("li:odd")[0].innerHTML);

console.log($("li:lt(2)")[1].innerHTML);

console.log($("li:eq(5)")[0].innerHTML);

console.log($("li:not(#gz)")[2].innerHTML);

//3.2.内容过滤选择器

//contains(text)

console.log($("li:contains('京')"));

//empty选择文本为空的元素

//3.3.可见性过滤选择器

//hidden 匹配不可见元素 display:none type="hidden"

//visible 匹配可见元素

console.log($("li:hidden")[0].innerHTML)

//3.4.属性过滤选择器

//[attribute]

//[attribute = value]

//[attribute != value]

console.log($("li[id !='gz']"));

//3.5.状态过滤选择器

//enable

//disable

console.log($("input:disabled"));

console.log($("input:checked"));

//checked 单选、多选

//selected option

//4.表单选择器

//:text

//:typeName

console.log($(":radio"));

}

</script>

</head>

<body>

<ul>

<liid="gz">广州</li>

<listyle="display:none">苏州</li>

</ul>

<!-- readonly:只读，数据依然可以提交给服务器。

disabled:禁用，数据无法提交给服务器。

-->

<p>

账号:<inputtype="text"disabled/>

</p>

<p>

密码:<inputtype="password"/>

</p>

<p>

男<inputtype="radio"name ="sex" checked/>

女<inputtype="radio"name ="sex" />

</p>

</body>

</html>

//读写节点

obj.html()

obj.text()

obj.val()/obj.val(“abc”)

obj.attr(“xx”)/obj.val(“xx”,”xx”)

//创建DOM节点

//插入DOM节点

parent.append(obj)

parent.prepend(obj)

brother.after(obj)

brother.before(obj)

//删除DOM节点

obj.remove()

obj.remove(selector)

obj.empty() = innerHTML=””;

//遍历节点

children() 直接子节点

next() 下一个节点

prev() 上一个节点

siblings() 所有兄弟

find(selector) 查找满足选择器的所有后代

parent() 父节点

//样式操作

addClass(“”) 追加样式

removeClass(“”) 移出指定样式

removeClass() 移出所有样式

toggleClass(“”) 切换样式

hasClass(“”) 判断是否是某个样式

css(“”) 读取css的值

css(“”,””) 设置多个样式

CSS貌似可以这样操作写两个css

.big{ }

.important{ }

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Insert title here</title>

<scriptsrc="../js/jquery-1.11.1.js"></script>

<style>

.big{

font-size:50px;

}

.important{

color:yellow;

}

</style>

window.onload=function(){

//1.读写内容

//1.1 html() ==innerHTML,也可以在后面连续加 html("xx")。

$("p:first").html("yannis");

//1.2 text() ==innerText

//不支持子标签，语法同1.1

$("p:eq(1)").text("<a href='http://w3.tedu.cn/b.html'>yannis</a>");

//1.3 val() == value

console.log($(":button:first").val("CCC"));

//1.4 attr() ==setAttribute()+getAttribute()

console.log($("img:first").attr("src"));

console.log($("img:first").attr("src","../images/02.jpg"));

//2.增删节点

//2.1 创建节点

var $li1 = $("<li>天津</li>");

var $li2 = $("<li>南京</li>");

//2.2 增加节点

$("ul").append($li1);

$("#lyg").before($li2);

//2.3 删除节点

//$("#lyg").remove();

//获取某节点的亲戚(父亲、孩子、兄弟)

//有时候我们不是字节写选择器选择节点，而是调用了别人的方法获得了某个节点，然后我对这个节点做了

//某些操作，又希望继续对它的亲戚做进一步操作，此时没办法直接写选择器，就需要调用这些方法了。

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

console.log($lyg.parent());

console.log($lyg.prev());

console.log($lyg.next());

console.log($lyg.siblings());

var $ul = $("ul");

console.log($ul.find("li:contains('京')"));

//4.样式操作

//4.1访问元素的style属性

//css()参考昨天写的字体变大的案例

//4.2访问元素的class属性(*)

//1)addClass("")

//给指定元素的class属性内加一个值

$("p:first").addClass("big").addClass("important");

//2)removeClass("")从指定元素的class属性内删除一个值

/*$("p:first").removeClass("big").removeClass("important");*/

//3)removeClass() 删除指定元素的class属性内的所有值

/*$("p:first").removeClass(); */

//4)hasClass("")判断指定元素的class属性内是否包含某值

console.log($("p:first").hasClass("big"));

}

function bigger(){

//5)toggleClass("")

//判断指定的元素的class属性上，是否有某值，有就删除，没有就加上他

$("p:first").toggleClass("big");

}

</script>

</head>

<body>

<p>jQuery支持<b>DOM操作</b></p>

<p>

<imgsrc= "../images/01.jpg"/>

</p>

<ul>

<liid="lyg">连云港</li>

</ul>

<p>

<inputtype="button"value="大大大"onclick="bigger()"/>

</p>

</body>

</html>

//jQuery事件处理

使用jQuery实现事件绑定

语法:

$obj.bind(事件类型,事件处理函数)

//合成事件

1. hover(mouseenter,mouseleave) 模拟光标悬停事件

2. toggle() 在多个事件响应中切换

//模拟操作

onfocus:光标切入

onblur:光标移除

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Insert title here</title>

<scriptsrc="../js/jquery-1.11.1.js"></script>

$(function(){

//给按钮绑定单机事件

$(":button").click(function(){

var n =0;//循环次数

var id = setInterval(function(){

$(":text").eq(n).trigger("focus");

//对第n个文本框模拟光标切入事件

//生成随机分数

varscore=parseInt(Math.random()*100);

//将分数写入文本框

$(":text").eq(n).val(score);

n++;

if(n==$(":text").length){

clearInterval(id);

}

},2000);

});

</script>

</head>

<body>

</body>

</html>

//还有一些动画的淡入淡出等等。

0 0