学习了JQuery的核心函数
做了一个简单的练习
1、获取一个函数
2、接收一个字符串选择器
3、接收字符片段
4、接收一个DOM元素（document objcet model）文档对象模型
案例代码
$(function () {
//1、接收一个函数
// alert("hello nj")
// 2、接收一个字符串选择器
var $box1 = $('.box1');
var $box2 = $('#box2');
console.log($box1);
console.log($box2);
// 3、接收一个字符片段
var $p =$("<p>我是一个P标签</p>")
console.log($p);
//append方法追加到box1后面
$box1.append($p);
// 4、接收一个DOM元素
var span = document.getElementsByTagName("span")[0];
console.log(span);
//把DOM元素包装成一个对象返回给JQ
var $span = $(span);
console.log($span);
<div class="box1"></div>
<div id="box2"></div>
<span>我是span标签</span>
<p class="test">这是一个标签</p>
静态方法和实例对象调用方法的两种形式
//静态方法和实例化调用
// 1、定义一个类
function AClass() {
}
// 2、静态方法
AClass.staticMethod = function () {
alert("staticMethod静态方法")
}
//直接使用类名调用静态方法
AClass.staticMethod();
// 2.1、实例化方法
AClass.prototype.instractMethod =function () {
document.write("实例化方法执行了")
}
// 3、通过实例化创建对象来调用非静态方法
// 对象调用
var a = new AClass();
a.instractMethod();
伪数组
$(function () {
//输出div的长度
var $div = $("div");
console.log($div);
//满足条件，0-length-1就满足数组条件
var arr = [1,2,3];
console.log(arr);
});
each和map循环
var arr = [1,2,5,8,9,10,20];
//伪数组
var obj = {0:1,1:2,3:5,7:9,9:10,length:5};
// 使用JS原生方式遍历数组
// 第一个参数是value的下标索引
arr.forEach(function (value,index) {
console.log(index,value);
});
//遍历伪数组，条件满足0-length-1 原生不能遍历伪数组
obj.forEach(function (value,index) {
console.log(index,value);
})
// 使用JQuery遍历
$.each(arr,function (value,index) {
console.log(index,value);
})
// 遍历伪数组,使用JQ能够遍历伪数组，
// 一般建议使用JQ
/**
* JQ语法格式
* $.each(数组名,function(index(索引),value(值))函数名称)
*/
$.each(obj,function (index,value) {
console.log(index,value);
})
//map 遍历数组的内容
// arr.map(function (value, index, array) {
// console.log(index,value);
// })
// map遍历伪数组
/**
* 原生JS的map和each都不能遍历伪数组
*/
// obj.map(function (value, index, array) {
// console.log(index,value);
// })
//分隔符
// var str = "----------------------------"
// console.log("*********"+str+"**********");
/**
* 使用JQ方式的map进行遍历
*/
// $.map(arr,function (value,index) {
// console.log(index,value);
// })
//JQ的map能遍历伪数组
// $.map(obj,function (value,index) {
// console.log(index,value);
// })
/**
* each与map遍历之间的区别
*
* each静态返回值遍历谁就是返回值
* map默认返回一个空数组
*
* each不支持使用回调函数
* map支持回调函数，并且可以对回调函数加以处理，返回组成一个新的数组
*
*/
var result1 = $.map(arr,function (value,index) {
console.log(index,value);
return index+value;
})
var result2= $.each(arr,function (value,index) {
console.log(index,value);
})
console.log(result1);
console.log(result2);
函数方法的几种判断方法
var arr = [1,3,5,7,9];
//伪数组
var Array = {0:1,1:2,3:5,7:9,9:10,length:5};
//定义一个对象
var obj ={"name":"张三","age":25};
//函数
var f = function(){};
//window对象
var wind = window;
/**
* 判断是否为一个window对象
* 返回结果为true/false
*/
// var win = $.isWindow(wind);
// console.log("判定结果为:"+win);
/**
* 判断是否为一个数组
* $.idArray();
* 返回结果为true/false
*/
// var array = $.isArray(arr);
// console.log("判定结果为:"+array);
/**
*去掉空格
* $,trim();
*/
// var str = " hello "
// var tim = $.trim(str);
// console.log("----"+str+"----");
// console.log("----"+tim+"----");
/**
* 判断是否为一个函数
* $.idFunction()
*/
var fun = $.isFunction(f);
console.log("判定结果为:"+fun);
JQuery的ready的暂停加载holdReady（）方法的使用
<script src="../js/jquery-1.10.2.js"></script>
<script>
/**
* 暂停ready立即执行
* JQ等DOM元素加载后立即执行 不等图片也加载完毕
* 使用holdRaedy暂停理解执行
* true为关闭，false开启
*/
$.holdReady(true);
$(document).ready(function () {
alert("hahaha");
})
</script>
</head>
<body>
<button>点击返回readly</button>
<script>
var but = document.getElementsByTagName("button")[0];
// 加载点击事件函数
but.onclick =function () {
// alert("执行redly")
//开启暂停执行
$.holdReady(false);
}
</script>
</body>
选择器
$(function () {
// 编写JQ代码
/**
* empty
* 匹配所有不包含子元素和文本的标签
* @type {jQuery|HTMLElement}
*/
var emp = $("div:empty");
// console.log(emp);
/**
*parent
* 找到有文本和子元素得知道元素
*/
var pare = $('div:parent');
// console.log(pare);
/**
* contains(text)
* 匹配查找文本,查找指定内容的元素
*/
var con = $('div:contains("是div")')
// console.log(con);
/**
* has(selector)
* 查找包含指定子元素的标签
*/
var ha = $('div:has("span")')
// console.log(ha);
});
属性和属性节点
$(function () {
/**
* 属性和属性节点
* 1、什么是属性
* 对象身上保存的变量
*2、如何操作属性
* 实例化对象
* 对象.属性=参数
* 对象['属性']=参数
*3、属性节点
* 编写HTML时，HTML添加的属性就是属性节点
* 浏览器打开找到span这个DOM元素，展开就是属性
* 3.1操作节点
* DOM.setAttributes（'dom属性','参数'）；
* DOM.getAttributes（）；
*4、属性和属性节点的区别是什么
* 任何元素都有属性，但是只有DOM才有属性节点
*/
// 定义一个方法
function Person() {
}
// 实例化方法
var p = new Person();
// p.name="小薇";
p['name']='鲜磊';
//调用方法格式，对象.属性
// console.log(p.name);
// console.log(p['name']);
var span = document.getElementsByTagName("span")[0];
//设置name的参数
span.setAttribute("name","lnj");
//获取name的值
console.log(span.getAttribute('name'));
});
属性方法
$(function () {
// 编写JQ代码
/**
* attr(name|pro|key,val|fn)
* 作用：可以设置属性的值
* 可以传递一个参数,也可以传递两个参数
* 如果是传递一个参数，代表获得节点的值
* 如果传递两个参数，代表设置属性的值
*
* 注意点：
* 获得：无论多少元素，只会返回第一个元素节点的值
* 设置：找到多少元素就会设置多少元素
* 设置：如果没有设置节点不存在，系统自动增加节点
*
*/
//返回第一个元素节点的值
var span = $('span').attr("class");
// console.log(span);
//设置找到的所有元素节点的
// var sqpn = $('span').attr('class','box')
//增加一个元素节点
// $("span").attr("name","abc");
// 删除removeAttr(name)
// 清楚所设置的节点元素
// $("span").removeAttr("class name")
/**
* prop(n|p|k,v|f)1.6+
* 使用方法和attr同样
*
* 注意点：
* prop可以操作扩展节点，还可以操作属性节点
* 如果同时设置两个prop，后者会覆盖前者
*/
$("span").prop("demo","nj1");
//
// $("span").prop("class","box")
// $("span").prop("name","nj1")
// 删除
//
// $('span').removeProp("demo");
//判断是否勾选
console.log($("input").prop("checked"));//返回结果为true/false
console.log($("input").attr("checked"));//返回结果为输入checked/undefined
});
attr与prop练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo4-节点练习</title>
<script src="../js/jquery-1.10.2.js"></script>
<script>
$(function () {
//1、获取button元素
var but = document.getElementsByTagName("button")[0];
but.onclick = function () {
//2、获取输入框的值
var input = document.getElementsByTagName("input")[0];
var text = input.value;
//attr获取DOM元素节点
$("img").attr("src",text);
}
})
</script>
</head>
<body>
<input type="text">
<button>点击切换图片</button>
<br>
<img src="https://www.baidu.com/img/bd_logo1.png?qua=high&where=super" alt="">
</body>
</html>
学习JQ会发现很多有趣的东西，希望在学习朋友和伙伴加油