刚离职,一直忙于弄简历,整理面试题。今天得空吧前几天学习复习的jq基础知识整理一下,长时间不用还真的忘记了。所有在深入学习中也不要忘记复习之前的知识。做巩固,老话说的好打好根基才能盖好房。基础知识过后,下面还有联系题,注意看

分享一个jquery好手册:http://www.css88.com/jqapi-1.9/

小知识点
2、$("") 获取元素 (包括标签名,类名,id名)
3、事件源 . 方法(function(){})
//jq版
$(document).ready(function(){
//获取元素
var jqBut=$("button");//更具标签名获取元素
var jqDiv=$("div");
//绑定事件
jqBut.click(function(){
//驱动事件
jqDiv.show(); //显示盒子
jqDiv.html("中秋快乐")//设置文字
})
});
jQuery特点
1、链式编程
jqDiv.show().html(ss)
相当于
jq.show()
jq.html(内容)

jq入口问题

js 也有入口, window.onload === ¥(document).ready();为了防止页面为加载完就执行

1、jq可多个入口函数
2、js只能有一个,多次会覆盖
3、$实际上表示一个函数 $()调用函数
4、jquery ===$ 相等
  //jq入口函数 1、当页面加载完毕的时候,图片没有加载,执行这个函数
$(document).ready(function(){
alert()
});
//jq入口函数2、当页面加载完毕的时候,图片没有加载,执行这个函数
$(function(){
alert()
})
//jq入口函数 1、当页面加载完毕的时候,图片也加载完,执行这个函数
$(window).ready(function(){
alert()
})
 
jq和js 改变样式对比
1、jq对象是一个数组,包含原生jsDOM对象
2、原声js对象是一个原生对象
 //js改变多个样式
div.style.cssText="width:100px; height:100px; background:black; margin-bottom:20px;";
//jq改变多个样式,是josg数组方式
jqdiv.css({"width":,"height":,"background":"red","margin-bottom":});
 
jq对象转换为js对象
     A)jq对象名(索引值)
     b)jq对象名.get[ 索引值 ]
<script src="jquery-1.11.1.js"></script>
<script>
//入口函数
jQuery(document).ready(function () {
//如果想要那种方式设置属性或方法,必须转换成该种类型。
//1.js对象转换成jquery对象。 $(js对象);
var box = document.getElementById("box");
var cbox = document.getElementsByClassName("box");
var div = document.getElementsByTagName("div"); //js转换成jq
box = $(box);
cbox = $(cbox);
div = $(div); //转换成了jquery对象,皮上面有功能可以直接调用。
div.css({"width": , "height": , "border": "1px solid red"});
box.css("background", "red");
cbox.css("background", "yellow");
//jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
var jqbox = $("#box");
var jqCbox = $(".box");
var jqdiv = $("div");
//2.jquery对象转换成js对象。 1.jquery对象[索引值] 2.jquery对象.get(索引值)
//jquery对象转换成js对象
jqdiv[].style.backgroundColor = "black";
jqdiv.get().style.backgroundColor = "pink";
});
</script>
案例
隔行变色
 <script src="js/jquery-1.11.1.min.js"></script>
<script>
//jq函数入口 除了图片,页面加载后立即执行
jQuery(function(){
//获取元素
var jqli=$("li");
//for遍历所有li
for(var i=; i<jqli.length; i++){
//判断条件
if(i%===){
//jq对象转化成js对象
jqli[i].style.background="red";
}else{
jqli.get(i).style.background="yellow"
}
}
})
</script>

开关灯案例

 <script src="js/jquery-1.11.1.min.js"></script>
<script>
//函数入口
jQuery(document).ready(function(){
//获取函数
var butArr=document.getElementsByTagName("input");
var bd=$("body");
//绑定事件 js对象 转换成 jquery对象
$(butArr[]).click(function(){
//jquery对象转化成js
bd[].style.background="white";
});
$(butArr[]).click(function(){
//jquery对象转化成js
bd[].style.background="black";
});
})
</script>

jquery转换js的更多相关文章

  1. 将jquery.qqFace.js表情转换成微信的字符码

    jquery.qqFace.js使用方法 引用 <script src="~/Content/qqFace/js/jquery.qqFace.js?v=3"></ ...

  2. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

  3. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  4. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  5. jquery 、 JS 脚本参数的认识与使用

    jquery . JS 脚本参数的认识与使用 如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload(); //刷新当前页面. par ...

  6. jQuery: jquery.json.js

    http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...

  7. Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用

    在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...

  8. jquery.qrcode.js生成二维码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery倒计时组件(jquery.downCount.js)

    //html <span class="days">00</span> <span class="hours">00< ...

随机推荐

  1. DeepMind提出新型超参数最优化方法:性能超越手动调参和贝叶斯优化

    DeepMind提出新型超参数最优化方法:性能超越手动调参和贝叶斯优化 2017年11月29日 06:40:37 机器之心V 阅读数 2183   版权声明:本文为博主原创文章,遵循CC 4.0 BY ...

  2. 怎样终止HTTP请求

    使用 xhr.abort() var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.example.com/page.php', tr ...

  3. python 画图像训练结果的loss图

    得到每个epoch的loss和predict精度后,就可以愉快地画图直观地看出训练结果和收敛性了. # coding:utf-8 import matplotlib.pyplot as plt dat ...

  4. python 获取导入模块的文件路径

    接触到项目上有人写好的模块进行了导入,想查看模块的具体内容是如何实现的,需要找到模块的源文件. 本博文介绍两种查找模块文件路径方法: 方法一: #!/usr/bin/python # -*- codi ...

  5. python 删除特定字符所在行

    #查询文件中含有特殊字符串的行 #!/usr/bin/python # -*- coding:utf- -*- import re file1 = open('test.txt','r+') istx ...

  6. [react] - 循环请求 redux-saga

    //根据uuid 获取 apt报告信息 *getNotesByUid({ payload, callback }, { call, put }) { // payload 是个数组, 并发执行,参考r ...

  7. 接收端通过Request.InputStream读取流

    以下有两种方式可以获取响应的数据流 1. 接收端通过Request.InputStream读取流 public static string StreamRead() { byte[] byts = n ...

  8. iTerm2快速SSH连接并保存密码

    背景 Mac自带terminal,以及比较好用的iTerm2命令行工具,都缺乏一个功能,就是远程SSH连接,无法保存密码.一种方法是将本机的ssh_key放到远程服务器中实现无密码登录.这种方法在很多 ...

  9. Protocol handler start failedCaused by: java.net.SocketException: Permission denied

    最近在使用mac启动项目的时候,发现原本在Windows下正常跑的项目报错如下: Protocol handler start failedCaused by: java.net.SocketExce ...

  10. Xadmin相关实现

    一,保存搜索条件(Save search conditions) kept conditions(保存条件)的应用场景比较常见,在我们查询时,可以实现多条件的筛选查询,比如:在淘宝上,选择了其中的一个 ...