您的位置:首页 > Web前端 > JQuery

jquery入门

qq_44847231 2019-06-08 21:06 197 查看 https://blog.csdn.net/qq_44847

jquery入门

什么是jQuery

它是一个轻量级的javascript类库

jQuery优点

1 总是面向集合
2 多行操作集于一行

步骤

  1. 导入js库(< script type=“text/javascript” src=""></ script >)
  2. $(fn)做为程序入口 $就是jQuery简写
    ** jQuery程序的入口:**
    $(document).ready(fn)
    $(fn);

$ (fn)、$ (document).ready(fn)与window.onload的区别
$ (fn),$ (document).ready(fn)是等价的,那个代码在前面那个就先执行
jsp的dom树结构加载完毕就调用方法

而window.onload最后执行.jsp的dom树结构加载完毕,css,js第静态资源加载完毕后执行

jQuery三种工厂方法

1. jQuery(exp[,context])
exp:选择器
context:上下文,环境/容器,documemt

  1. 标签选择器

  2. ID选择器

$(function(){
$("#a3").click(function(){
alert("a3翻牌了");
})
})
  1. 类选择器
$(function(){
$(".c1").click(function(){
alert("c1翻牌了");
})
})
  1. 包含选择器:E1 E2
$(function(){
$("p a").click(function(){
alert("翻牌了");
})
})
  1. 组合选择器:E1,E2,E3
$(function(){
$("a,span").click(function(){
alert("翻牌了");
})
})
  1. 两个参数的选择器
$(function(){
//在div标签的内部找a标签,然后给找到的标签添加事件
//如果第二个参数没有填.默认是在整个(document)里面找
$("a","div").click(function(){
alert("翻牌了");
})
})

*2. jQuery(html)
html:基于html的一个字符串

3 jQuery(element)
element:js对象,表示一个html元素对象
js对象与jquery对象的相互转换

var h2 = document.getElementById("h2");
alert(h2.value);
//js对象转jquery对象
var h22 = $(h2);
alert(h22.val());

this指针的作用

1 事件源(获取当前按钮的按钮值)

2 当前元素(点击按钮,获取所有a标签的值)

$(function(){
$(":input").click(function(){
$("a").each(function(){
//整个this指的是当前元素
alert($(this).html());
})
})
})
标签: