PHP jQuery

jquery可以说是js的封装,大多数情况下jquery比js简单,它们两个可以相互写对方的里面,使用jquery需要导入jquery文件。

<script src="jquery-1.1.min.js"></script>

jquery文件名格式为,jquery-版本号[.min] .js    其中min表示压缩版

jquery与js相似,所以他们的操作基本一一对应,只是方式不同:

主要操作有:

找对象:通过id、name、className、TagName找对象

操作对象:操作属性:取值,赋值,删除

操作样式:获取样式,设置样式

操作内容:

表单元素:获取内容,添加内容

非表单元素:获取内容,添加内容

操作元素:添加子元素、删除元素

添加事件:添加绑定事件、解除绑定事件

一一对应:

HTML页面

<div id="one"><span>one</span></div>

<div class="test" bs="aa">two</div>

<div class="test">three</div>

<div class="test">four</div>

<input type="text" name="uid" bs="aa" id="uid" />

<input type="button" id="btn" value="取消绑定" />

<input type="button" id="add" value="绑定事件" />

Jquery代码:都写在script里面

<script type = "text/javascript">

//$在jquery中专门用来做选择,相当于选择器,括号里面是根据什么来选,后面点事件

//这里的意思是说,给当前页面加了一个事件是加载完成,就是当前页面加载完成后执行里面的function(匿名函数)

$(document).ready(function(e){

//Jquery与js找对象

//JS通过id、name、className、TagName找对象

var a = document.getElementById("one");                //id

var b = document.getElementsByClassName("test");//classname

var d = document.getElementsByTagName("div");    //tagname

var c = document.getElementsByName("uid");          //name

//JQUERY通过id、name、className、TagName找对象

var aj = $("#one");                 //id

var bj = $(".test");                    //classname

var cj = $("div");                        //tagname

var dj = $("[name=‘uid‘]");    //name注意中括号,特别注意属性可以自己定义例如:bb="aa"

var ej = $("div.test");                //div中class为test的元素,Jquery可以使用选择器找对象。。。

==========================================================================

//Jquery与js操作对象

==========================================================================

 //JS操作属性:

a.setAttribute("","");            //设置属性,修改属性

a.remove("");                        //移除属性

a.getAttribute("");                //获取属性

//JQUERY操作属性

aj.attr("","");                          //设置属性,修改属性

aj.removeAttr("");                //移除属性

aj.attr("");                              //获取属性

==========================================================================

  //JS操作内容

a.innerText;                   //非表单元素的取值,赋值是:a.innerText = "aaaa";

a.innerHTML;                //非表单元素的取值,赋值是:a.innerHTML = "<a>123</a>";  可以解析html标签

a.value;                         //表单元素的取值,赋值是:a.value = "aaaa";

//JQUERY操作内容

aj.text();                        //非表单元素的取值,赋值是:aj.text("aaaa");

aj.html();                       //非标单元素的取值,赋值是:aj.html("<a>123</a>");    可以解析html标签

aj.val();                         //标签元素的取值,赋值是:aj.val("aaaa");

==========================================================================

 //JS操作样式

a.style.backgroundColor = red;    //设置样式

a.style.color;                                    //获取样式,只能获取内联样式,也就是写在标签里面的样式

//JQUERY操作样式

aj.css("color","yellow");                                    //设置样式

aj.css("color");                                        //可以获取到内嵌式的样式属性

==========================================================================

 //JS操作元素,创建元素两种方式

//第一种用html赋值来创建元素

var s = "<input type=‘button‘ value=‘"+i+"‘ class=‘bbb‘ onclick=‘doselect(this)‘>"

var dd = document.getElementById("test");

dd.innerHTML += s;

//第二种是使用createElement

var ab = document.createElement("input");

ab.setAttribute("type","button");

ab.setAttribute("value",i);

ab.setAttribute("class","bbb");

ab.setAttribute("onclick","doselect(this)");

var dd = document.getElementById("test");

dd.appendChild(ab);

//删除元素

var dd = document.getElementById("test");

dd.remove;

//JQUERY操作元素,创建元素

var str = "<div id=‘a‘ style=‘width:100px; height:100px; background-color:red‘></div>";

div.append(str);

//删除元素

$("#a").remove();

==========================================================================

 //JQUERY中的事件

$(".test").click(function(){

alert($(this).text());

});

$(".test").bind("click",function(){                //绑定事件,注意可以同时绑定多个

alert($(this).text());

});

$("#btn").click(function(){

$(".test").unbind("click");                    //解除绑定事件

});

$("#add").click(function(){

$(".test").bind("click",function(){

alert($(this).text());

});

});

});

</script>

时间: 2024-08-26 09:40:03

PHP jQuery的相关文章

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops

Jquery基础总结

jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. <ul> <li id=&quo

初识jQuery

jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:

zepto与jquery冲突的解决

问题出现的背景: 在light7框架下搭建的触屏版项目中,要拓展一个投票系统,其中投票系统有一个比较完善的上传组件,但是此组件是依赖zepto的,而原来的项目是依赖jQuery的,所以就会遇到冲突的问题: 解决方法1: jquery有一个方法叫noConflict() ,可以把jquery的$改掉. var jq=$.noConflict(); 这个时候用jq来代替jquery的$吧. 解决方法2: zepto的符号改掉 window.zp=window.Zepto = Zepto 在zepto

jQuery父级以及同级元素查找的实例

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(

jQuery EasyUI---DataGrid

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../jquery-1.4.2.min.js" ty

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

jQuery $.ajax传递数组的traditional参数传递必须true

出自:http://blog.csdn.net/ojackhao/article/details/24580437 起初我认为traditional:true,可有可无,但是后来不用traditional的时候,发现后台无法获取selectUsers的值,那么可以肯定的是traditional默认值是false.当提交的参数是数组( {selectUsers:[value,value,value]} ),如果是false的话,则提交时会是"selectUsers[]=value&sele

页面滚动图片等元素动态加载插件jquery.scrollLoading.js

如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的就不用加载了.这样还可以在一定程度上节省服务器资源.该插件作者的网页将该插件的功能和使用方法描述的非常详细,这里把最一般最普遍的使用情况给大家展现一下. 插件作者:http://www.zhangxinxu.com/ 首先我们需要加载jQuery库和本插件js文件. (jquery.scrollLo