JQuery02

$(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); ???});

 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);

<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 ????????});

<!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" ></body></html>