Day01JQuery介绍及使用

news/2024/7/10 23:27:54 标签: jquery, javaweb

jQuery(Javascript框架)

对javascript代码的封装,javascript功能代码的半成品

jQuery作用

1).简化javascript开发,提高开发效率
2).屏蔽浏览器差异

所需插件

1) jQuery ——-js——-jquery-1.xx.x.js
eg:jquery-1.8.3.js jquery-1.8.3.min.js
2).jqueryjquery.min区别
jquery.min文件是经过jquery压缩,便于网络传输

使用jQuery

1.通过script标签引用外部js文件

<script type="text/javascript" src='jquery-1.8.3.js'></script>

2.在另外一个script标签中使用jquery函数

jquery标签支持链式调用
1)$(‘#id’)根据id获得响应标签对象
2)jq.text 获取标签体内部的文本
3)通过jq.css()方法为当前标签增加样式

<script type="text/javascript">
    //通过id获得对应的jquery对象(id选择器)
    var jqdiv = $('#d1');
    //加上.get(0)则转化为dom对象
    var jqdiv = $('#d1').get(0);
    //通过js获得dom对象
    var domdiv = document.getElementById('d1');

    //获取标签体内部的文本 
    jq.text()   //获取标签内部的文字,相当于dom对象.innerHTML
    $('#id').text();

    //为当前标签增加样式
    jq.css('css属性名','css属性值');
    //通过css()方法添加样式,链式增加样式,后面还可以继续跟.css()来继续增加样式
    //css方法最后一行代码  return  jq;
</script>    

3.通过js代码获得dom对象和jquery获得jq对象

dom对象.js属性或方法

jq对象.jq属性或者方法

1)document.getElementById(id)—>dom对象 不可以调用jquery相关方法
2)$(‘#id’)—>只有jquery对象,才可以调用jquery相关方法text(),css()

如何获取一个jquery对象:
1)通过jq选择器获得一个jquery对象

2)通过dom对象获得jquery对象 $(dom对象)

3)通过$(‘标签文本’),创建新的jq对象

 eg:比如创建td的标签对象$('<td></td>')

http://www.niftyadmin.cn/n/1492263.html

相关文章

Day02jQuery选择器

1.基本选择器(重点) ID选择器 $("#ID值")//通过id获取标签对象 元素选择器 $("标签名")//通过标签名获取对象 类选择器 $(".样式类名") 即 $(".class值") //通过样式名获取对象$(#id) $(div).css(background-color,red); $(.class…

Day02jQuery遍历

两种对象转化 将dom对象——转化为——jquery对象 $(dom对象) eg:$(dom)将jquery对象——转化为——dom对象 jquery对象.get(0); eg: jquery.get(0)2.遍历 $(selector) ——jquery对象 ——–size()或者length //元素个数 —————————-eq…

Day03jQuery事件绑定

事件绑定 基于HTML实现的事件绑定 存在耦合 //HTML:<input type"button" value"按钮" id"btn" onclick"test()"/> //Script:function test(){alert("按钮点击了");} 2.基于编程的方式给标签添加事件 注意&#xff1…

jsp下拉框select中options遍历集合

第一种方式&#xff1a;使用options <form:options items"后台传过来的集合" itemLabel"取集合中的某个属性进行显示" itemValue"将遍历的值赋值给某个属性" htmlEscape"设置是否启用默认html字符转换,填true或者false"/> 注意…

Day04jQueryDOM编程相关函数

DOM编程相关函数 注意&#xff1a; 1.1.在事件函数中this&#xff0c;代表触发该事件的事件源—dom对象&#xff08;this&#xff0c;事件标签对象&#xff09; 1.2.内置jquery的事件绑定为静态绑定 1.3 $jq.live(事件名称&#xff0c;绑定的函数)&#xff1b;动态绑定 事件…

Day05jQuery相关插件(日期,放大镜,表单验证)

1.日期插件 1)引入datepicker插件相关的js文件和css文件 直接将文件夹引入,导入WdatePicker.js即可 2)在input增加class’Wdate’,绑定单击事件&#xff0c;函数名WdatePicker() 3)可控参数: { dateFmt 日期显示格式, readOnly 是否只读, input输入框是否可改 isShowWee…

1.JSON基础语法

JSON语法规则 1.JSON语法是javaScript对象表示语法的子集。 语法&#xff1a; 1.1 数据在名称/值对中 1.2 数据由逗号分隔 1.3 花括号保存对象 1.4 方括号保存数组 2.JSON数据的书写格式是&#xff1a;名称/值对 名称/值对包含字段名称&#xff08;在双引号中&#xff09;…

Day02Ajax post请求

ajax操作中以post方式提交异步请求 a) 创建xhr var xhr new XMLHttpRequest(); b) 发送请求 xhr.open("post","url"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在post请求中有这句话&#x…