Day30 jQuery

1.1.1.1 什么是jQuery?

n jQuery是javaScript的前端框架.对常见的对象和常用的方法进行封装,使用更方便. 它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。

1.1.1 页面加载事件

jQuery提供ready()函数，用于页面成功加载后执行。与window.onload函数类型。

//实际开发中，我们习惯将<script>标签编写在<head>标签体内，

//整个页面的解析时从上网下的，此时将不能获得<input>对象

alert($("#demoId").length); //获得匹配对象的个数，0表示没有匹配到任何

//1 javascript页面加载

window.onload = function(){

alert("js页面加载");

}

//2 jQuery页面加载

$(document).ready(function () {

alert("jQuery页面加载");

});

* 注意：

* * js给onload只能赋一个值，如果对此赋值，后面的将覆盖前的。

* * jQuery ready可以使用多次，多个页面加载将依次执行。

</script>

<body>

</body>

1.1.2 基本选择器★(重点)

选择器:需要对元素进行操作,而拿到元素的过程就称之为选择器.

$(document).ready(function () {

//1 id选择器，格式：$("#id值")

var $d1 = $("#r01");

alert($d1.length); //1 ,id="r01"只有一个

//2 标签选择器，格式：$("标签名")

var $d2 = $("input");

alert($d2.length); //3，表示3个input

//3 类选择器，格式：$(".class类名")

// * length 和 size() 等效

var $d3 = $(".myClass");

alert($d3.size()); //2，表示两个input class为myClass

});

</script>

1.1.3 表单属性选择器

:enabled 可用

:disabled 不可用。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled>

:checked 选中（单选radio ，多选checkbox） <input type="..." checked="checked">

:selected 选择（下列列表 <select>） <option selected="selected">

1.1.1 属性操作：prop() 和attr()

l prop() 操作的标签的特性。JQ1.6新特性，获得一些第一次分配undefined属性值的标签时，如果抛异常，将忽略浏览器生成的任何错误。

l removeProp() 移除标签的特性。

l attr() 设置标签属性

l removeAttr() 移除标签的属性。

n 注意：prop() 和 attr() 使用时容易混淆，建议先使用prop() 没有效果，再使用attr()。

1.1.4 常见事件(掌握)

n 表单

u submit

u change

u blur

u focus

n 鼠标(掌握)

u mouseover

u mouseout

u click

n 键盘

n 页面加载

u $(function(){})

//3.7 两者获取值的区别
	//alert($('#sp').text()); //text() 获得文本内容,如果有标签直接忽略
	//($('#sp').html());//html() 获得html代码,如果有标签一并获取

	//3.8 两者设置值的区别
	//$('#sp').text("<i>欢迎新同学</i>"); // 添加文本,如果有标签.浏览器不进行解析
	$('#sp').html("<i>欢迎新同学</i>");//添加html代码,如果有标签.浏览器进行解析
* A.append(B) 将B插入到A内部的后面 (掌握)
	n A.appendTo(B) 将A插入到B内部的后面

A.append(B) 将B插入到A内部的后面 (掌握)
	n A.appendTo(B) 将A插入到B内部的后面
script type="text/javascript">

	var cityObj = $('#city');
	var p2Obj = $('#p2');
	//1 city 插入 p2 后面

	// A.afyer(B) 将B添加到A后面
	//p2Obj.after(cityObj);


	//A.before(B) 将B添加到A前面
	//2 city 插入 p2 前面
	p2Obj.before(cityObj);

jQuery 选择器 prop() 和attr()的更多相关文章

jQuery的prop和attr的区别，及判断复选框是否选中
jQuery的prop和attr的区别对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...
jquery里prop和attr的区别
本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...
jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
jquery的prop()和attr()
jQuery1.6以后prop()和attr()的应用场景如下: 第一原则:只添加属性名称该属性就会立即生效应该使用prop(); 第二原则:只存在true/false的属性应该使用prop(); 设 ...
【Jquery】prop与attr的差别
近期因项目须要用到复选框,当中一个控制全选. // 全选 $(".ckb_all").click(function(){ if($(this).attr("checked ...
jQuery中prop和attr区别
问题今天给一个button加onclick事件,由于最后button根据需要转成字符串,因此不能使用jQurey.click(),只能给button添加onclick属性的方式. 于是,$butto ...
第82天：jQuery中prop()和attr()的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
jquery中prop，attr，data的区别
这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...
jquery之prop与attr区别。
一切看下面代码示例<!DOCTYPE html> <html> <head> <title>全选和反选</title> <script ...

随机推荐

DevExpress 控件中GridControl的使用
近期开发用到了DevExpress系列的控件,GridControl是我用到的Dev系列控件最多的一个控件.现在先来总结一下: 首先先写一个简单的小例子来简单介绍一下GridControl的用法: 1 ...
dict的update方法
dict = {'Name': 'Zara', 'Age': 7} dict2 = {'Sex': 'female' } dict.update(dict2)输出结果:{'Age': 7, 'Name ...
disabled OR readonly
1.对元素设置disabled以及readonly属性 $("#uid").attr("disabled",true); $("#uid") ...
一览Django框架（转载）
本文面向:有python基础,刚接触web框架的初学者. 环境:windows7 python3.5.1 pycharm专业版 Django 1.10版 pip3 一.Django简介百度百 ...
从零开始系列之vue全家桶（4）带新手小白一起搭建第一个个人网站项目
未经允许,严禁转载,全文由blackchaos提供. 在安装好了前面大部分需要的插件,我们开始进行第一个个人项目.结合vue+vuex+vue-cli+vue-router+webpack使用. 1. ...
机器学习技法：04 Soft-Margin Support Vector Machine
Roadmap Motivation and Primal Problem Dual Problem Messages behind Soft-Margin SVM Model Selection S ...
NoClassDefFoundError: org/apache/commons/lang3/StringUtils
出错信息: 2014-2-5 21:38:05 org.apache.catalina.core.StandardContext filterStart严重: Exception starting f ...
boot.img格式文件拆解实例结构解析
以msm8226为例,讲解android源码编译生成boot.img的结构.boot.img包括boot.img header.kernel以及ramdisk文件系统.下面是对boot.img的结构进 ...
[HNOI 2005]狡猾的商人
Description 刁姹接到一个任务,为税务部门调查一位商人的账本,看看账本是不是伪造的.账本上记录了n个月以来的收入情况,其中第i 个月的收入额为Ai(i=1,2,3...n-1,n), .当 ...
[POI2006]ORK-Ploughing
Description Byteasar想耕种他那块矩形的田,他每次能耕种矩形的一边(上下左右都行),在他每次耕完后,剩下的田也一定是矩形,每块小区域边长为1,耕地的长宽分别为m和n,不幸的是Byte ...

jQuery 选择器 prop() 和attr()