JQuery相关了解-CFANZ编程社区

JQuery相关了解

1.Jquery对象

1.1安装
1.2.jQuery核心
1.3.Dom对象与Jquery包装集对象

1.3.1 Dom对象
1.3.2 Jquery包装集对象
1.3.3 Dom对象转Jquery对象
1.3.4 Jquery对象转Dom对象

2.jquery选择器

2.1基础选择器
2.2层次选择器
2.3表单选择器

3.jQuery Dom操作

3.1操作元素的属性

获取属性

3.2操作元素的样式
3.3创建元素
3.4删除元素
3.5添加元素
3.6遍历元素

4.jquery事件

4.1 ready加载事件
4.2 bind绑定事件

5.jquery Ajax

5.1 $ajax
5.2 $get

1.Jquery对象

1.1安装

下载网址：http://jquery.com/

有两种加载方式

1.1.1文件路径加载方法

<script type="text/javascript" src="JS文件路径">script>

1.1.2网址加载方法

<script src="http://code.jquery-1.11.2.min.js">script>

1.2.jQuery核心

$符号在JQuery中代表对Jquery对象的引用.jquery是核心对象。通过该对象可以获取jquery对象，

调用jquery提供的方法等，只有jquery对象才能调用jquery提供的方法

$<==>jQuery

1.3.Dom对象与Jquery包装集对象

明确Dom对象和Jquery包装集的概念。原始的Dom对象只有Dom只有Dom接口提供的方法和属性，通过js代码

获取的对象都是dom对象；而通过jquery获取的对象是jQuery包装集对象，简称jquery对象，只有jQuery对象

才能使用jQuery提供的方法。

1.3.1 Dom对象

javaScript中获取Dom对象，Dom对象只有有限的属性和方法

var div = document.getElementById("testDiv");
var divs = document.getElementByTagName("div");

1.3.2 Jquery包装集对象

可以说是dom对象的扩充在jquery的世界中将所有的对象，无论是一个还是一组们都封装成

一个jQuery包装集，比如获取包含一个元素的jquery包装集；

var jqueryobject=$("#testDiv");

1.3.3 Dom对象转Jquery对象

Dom对象转换为jQuery对象。只需要利用$()进行包装即可

var domDiv=document.getElementById('mydiv'); //获取Dom对象
mydiv = $(domDiv);

1.3.4 Jquery对象转Dom对象

jquery对象转Dom对象，只需要取数组的元素即可

//第一种 获取jquery对象
var jqueryDiv = jquery('#mydiv');
//第二种方式 获取jquery对象
jqueryDiv = $(#mydiv);
var dom = jqueryDiv[0];//将获取的jquery对象转换为Dom

2.jquery选择器

按照功能主要分为"选择"和"过滤"

2.1基础选择器

选择器	名称	举例
id选择器	#id	$("#testDiv")选择id为testDiv的元素
元素选择器	element	$(“div”)选择所有元素
类选择器	.class	$(".blue")选择所有class=blue的元素
选择所有元素	*	$("*")选择页面所有元素
组合选择器	selector,selector2,selectorN	$("#testDiv.span.blue")同时选中多个选择器匹配的元素

<body>
    <div id="mydiv1" class="blue">
        元素选择器
    div>
    
    <div id="mydiv1">
        id选择器<span>标签的内容span>
    div>
    
    <span>样式选择器span>
body>
<script src="http://code.jquery-1.11.2.min.js" type ="text/javascript" charset="utf-8">script>
<script  type ="text/javascript">
    //id选择器
    var mydiv=$("#mydiv1");
    console.log(mydiv);
    //类选择器
    var clas=$(".blue");
    console.log(clas);
    //元素选择器
    var spans = $("span");
    console.log(spans);
    //通用选择器
    var all=$("*");
    console.log(all);
    //组合选择器
    var group=$("#mydiv1,div,.blue");
    console.log(group);
script>

2.2层次选择器

选择器	名称	举例
后代选择器	ancestor descendant	$("#parent div")选择id为parent的元素的所有div元素
子代选择器	parent>child	$("#parent>div")选择id为parent的直接div元素
相邻选择器	prev+next	$(".blue+img")选择css类为blue的下一个img元素
同辈选择器	prev~sibling	$(".blue~img")选择css类为blue的之后的img元素

2.3表单选择器

Forms	名称	举例
表单选择器	:input	查找所有的input元素：$(“input”); 注意：会匹配所有的input、textarea、sleect和button元素
文本框选择器	:text	查找所有文本框：$(".text")
密码框选择器	:password	查找所有密码框：$(".password")
单选按钮选择器	:radio	查找所有单选按钮：$(".radio")
复选框选择器	:checkbox	查找所有复选框：$(".checkbox")
提交按钮选择器	:submit	查找所有提交按钮：$(".submit")
图像域选择器	:image	查找所有图像域：$(".image")
重置按钮选择器	:reset	查找所有重置按钮：$(".reset")
按钮选择器	:button	查找所有按钮：$(".button")
文件域选择器	:file	查找所有文件域：$(".file")

3.jQuery Dom操作

3.1操作元素的属性

获取属性

方法	说明
attr(属性名称)	获取指定的属性值，操作checkbox时选中返回checked，没有选中返回undefined
prop(属性名称)	获取具有true和false两个属性的属性值

3.2操作元素的样式

对于元素的样式，也是一种属性，由于样式用的特别多，所以对于样式除了

当做属性处理还可以有专门的方法处理

方法	说明
attr(“class”)	获取class属性的值，即样式名称
attr(“class”,“样式名”)	修改class属性的值，修改样式
addClass(“样式名”)	添加样式名称
css()	添加具体的样式
removeClass(class)	移除样式名称

增加元素的具体样式

1.css({'样式名':'样式值','样式名2','样式值2'})
css({"background-color":"red","color":"#fff"});
2.css("样式名","样式值")
css('color','white')

3.3创建元素

创建元素很简单，直接使用核心函数即可

$('元素内容');

$('<p>this is text!!!p>');

3.4删除元素

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容
empty()	清空所选元素的内容

3.5添加元素

方法	说明
prepend(content)	在被元素内部的开头插入元素会内容，被追加的content参数，可以是字符、Html元素标记
$(content).prepend(selector)	把content元素或内容加入selector元素开头
append(content)	在被选元素内部的结尾插入元素或内容，被追加的content参数可以是字符、HTML、元素标记
$(content).appnedTo(selector)	把content元素或内容插入selector元素内，默认是在尾部
before()	在元素前插入指定的元素或内容$(selector).before(contenct)
after()	在元素后插入指定的元素或内容$(selector).after(content)

3.6遍历元素

each()
$(selector).each(function(index,element));遍历元素
参数function 为遍历时的回调函数
index 为遍历元素的序列号，从零开始
element是当时的元素，此时是dom元素

4.jquery事件

4.1 ready加载事件

ready()类似于onLoad()事件

ready()可以写多个，按顺序执行

JQuery相关了解_dom对象 (function(){})

4.2 bind绑定事件

未被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数

$(selector).bind(evenType[,eventData],handler(eventobject));

even Type:是一个字符串类型的事件类型，就是你所需要绑定的事件

这类类型可以包括如下：

blur，focus,focusin,focusin,load ,resize ,scroll,unload,click,dblclick,mousedown,mouseup

mousemove,mouseover, mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress

keyup,error

[,eventData] ：传递的参数，格式：{名：值，名2：值2}

handler(evenObject):该事件出发执行的函数

5.jquery Ajax

5.1 $ajax

jquery调用ajax方法：

格式：$.ajax({});

参数：

type：请求方式GET/POST

url：请求地址url

async：是否异步，默认是true表示异步

data：发送到服务器的数据

dataType:预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

5.2 $get

这是一个简单的GET请求功能以取代复杂$.ajax

请求成功时调用回调函数。如果需要在出错时执行函数，请使用$.ajax

//1.请求json文件，忽略返回值
$.get('js/cuisine_area.json');
//2.请求json文件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});
//3.请求